androidmaterial-designbottom-sheetmaterial-components-androidmaterial-components

Round corner for BottomSheetDialogFragment


I have a custom BttomSheetDialogFragment and I want to have round corners in top of Bottom View

This is my Custom class that inflates my layout that I want to appear from bottom

View mView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    mView = inflater.inflate(R.layout.charge_layout, container, false);
    initChargeLayoutViews();
    return mView;
}

and also I have this XML resource file as background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:topRightRadius="35dp"
        android:topLeftRadius="35dp"
        />
    <solid android:color="@color/white"/>

    <padding android:top="10dp"
        android:bottom="10dp"
        android:right="16dp"
        android:left="16dp"/>
</shape>

The problem is, when I set this resource file as background of my Layout's root element, the corners still are not rounded.

I can't use below code:

this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background);

Because it overrides the default background of BottomSheetDialog and there won't be any semi-transparent gray color above my Bottom View.


Solution

  • 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.