Round Corner for Bottomsheetdialogfragment

Round corner for BottomSheetDialogFragment

Create a custom drawable rounded_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"/>

</shape>

Then override bottomSheetDialogTheme on styles.xml using the drawable as background:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">       
    <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

<style name="AppBottomSheetDialogTheme"
    parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>

<style name="AppModalStyle"
    parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/rounded_dialog</item>
</style>

This will change all the BottomSheetDialogs of your app.

How can I make the corners of my bottom sheet dialog rounded?

After messing around with the possible solutions people posted, I figured out that my code was working fine, but the corners of my NavigationView were obscuring the rounded corners of the drawer. After adding some padding, the rounded corners are displaying correctly.

Round corner for BottomSheetDialogFragment Not working on API 21

Morteza I made the code which makes the BottomSheetDialog Fragment dialog round corner by the following code and I tested it in KitKat version mobile as well.

Bottom Sheet Dialog Class code

public class MyBottomSheetDialog extends BottomSheetDialogFragment {

String string;

static MyBottomSheetDialog newInstance(String string) {
    MyBottomSheetDialog f = new MyBottomSheetDialog();
    Bundle args = new Bundle();
    args.putString("string", string);
    f.setArguments(args);
    return f;
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    string = getArguments().getString("string");
    //bottom sheet round corners can be obtained but the while background appears to remove that we need to add this.
    setStyle(DialogFragment.STYLE_NO_FRAME,0);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.bottom_sheet_modal, container, false);
    TextView tv = (TextView) v.findViewById(R.id.text);

    //dialog cancel when touches outside (Optional)
    getDialog().setCanceledOnTouchOutside(true);
    return v;
}}

bottom_sheet_modal.xml

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/linearLayout"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
//adding background from drawable
android:background="@drawable/rounded_dialog">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center"
    android:gravity="center"
    android:weightSum="10"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp">


    <Button
        android:layout_width="0dp"
        android:layout_weight="5"
        android:layout_height="wrap_content"
        android:text="Buy"
        />

    <Button
        android:layout_width="0dp"
        android:layout_weight="5"
        android:layout_height="wrap_content"
        android:text="sell"
        />

</LinearLayout>
</LinearLayout>

rounded_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#444343"/>
<corners android:topLeftRadius="16dp"
    android:topRightRadius="16dp"/>

</shape>

MainActivity.java

public class MainActivity extends AppCompatActivity {

BottomSheetDialogFragment bottomSheetDialogFragment;
Button button;
LinearLayout linearLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    bottomSheetDialogFragment = MyBottomSheetDialog.newInstance("Bottom Sheet Dialog");
    button = findViewById(R.id.button);



    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            bottomSheetDialogFragment.show(getSupportFragmentManager(),bottomSheetDialogFragment.getTag());
        }
    });

}
}

Try this and let me know @Morteza. Happy coding.

Bottomsheet rounded corner with state expanded

Try with the following code.

//create round_dialog.xml inside drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<corners
    android:bottomLeftRadius="24dp"
    android:bottomRightRadius="24dp"
    android:topLeftRadius="24dp"
    android:topRightRadius="24dp" />
</shape>


// update you theme file
    <style name="AddDocBottomSheetDialogTheme" 
parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>

<style name="AppModalStyle" 
parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/rounded_dialog</item>
<item name="android:layout_marginHorizontal">15dp</item>
</style>



// Dialog class
class TestDialogFragment : BottomSheetDialogFragment() {
private lateinit var binding: TestDialogFragmentBinding

override fun getTheme(): Int {
    return R.style.AddDocBottomSheetDialogTheme
}
}

Persistent Bottom Sheet with rounded corners in Android crashes when used in a card view

U can add shape for you bottom sheet background background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid android:color="@color/you_color"/>

    <corners
            android:bottomRightRadius="2dp"
            android:bottomLeftRadius="2dp"
            android:topLeftRadius="2dp"
            android:topRightRadius="2dp"/>
</shape>

BottomSheetDialog not rounding top corners correctly in Android

To solve this, you need a transparent background color in your dialog style (BottomSheetDialogStyle):

<item name="android:colorBackground">@android:color/transparent</item>

---

Related Topics