Search code examples
androidkotlinandroid-bottomsheetdialog

Bottomsheet rounded corner with state expanded


I am facing a specific problem. I have a bottomSheet and I would like to put a radius on the TopLeft and TopRight corner. It works except when the bottomSheet.state is STATE_EXPANDED. So I found this solution

@SuppressLint("RestrictedApi", "VisibleForTests")
override fun onCreateDialog(savedInstanceState: Bundle?): BottomSheetDialog {
    val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
    bottomSheetDialog.behavior.disableShapeAnimations()
    return bottomSheetDialog
}

But the problem is : In my bottomSheet, I have an EditText and a button. So that the keyboard is below the button, I have to add this line of code in my onCreateDialog method

bottomSheetDialog.behavior.state = STATE_EXPANDED

So when I add it, for some reason, the corners are no longer rounded ...

here you can find my current code :

@SuppressLint("RestrictedApi", "VisibleForTests")
override fun onCreateDialog(savedInstanceState: Bundle?): BottomSheetDialog {
    val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
    bottomSheetDialog.behavior.disableShapeAnimations()
    bottomSheetDialog.behavior.state = STATE_EXPANDED
    return bottomSheetDialog
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setStyle(DialogFragment.STYLE_NORMAL, R.style.BottomSheetStyle)
}

And here my Style

<style name="BottomSheetStyle" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="android:windowSoftInputMode">adjustResize</item>
</style>

Do you know what can I do to make this work ? bottomSheetDialog.behavior.disableShapeAnimations()


Solution

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