[BottomSheetDialog] Rounded corners in expanded state

[dostalleos]

Description: BottomSheetDialog has rounded corers only if it's not expanded. Corners are rounded as it's specified in the ShapeAppearance during swipe or in collapsed state. Once BottomSheetDialog becomes expanded, rounded corners are animated to sharp corners.

Expected behavior: Rounded corners should not change in expanded state if expanded state is not full screen. It would be great to have ability to disable this behavior at least.

Source code:

<style name="ThemeOverlay.App.BottomSheetDialog"parent="ThemeOverlay.MaterialComponents.Dialog">
    <item name="android:windowIsFloating">false</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowAnimationStyle">@style/Animation.MyTheme.BottomSheet.Modal</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="bottomSheetStyle">@style/Widget.App.BottomSheet.Modal</item>
    <item name="android:navigationBarColor">?colorSurface</item>
    <item name="android:navigationBarDividerColor" tools:ignore="NewApi">@android:color/transparent</item>
    <item name="android:windowLightStatusBar" tools:ignore="NewApi">false</item>
</style>

<style name="Widget.App.BottomSheet.Modal" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.BottomSheet</item>
</style>

<style name="ShapeAppearance.App.BottomSheet" parent="ShapeAppearance.MaterialComponents.LargeComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
</style>

Android API version: 29

Material Library version: 1.2.0-alpha06

Device: Pixel 3

[wcshi]

This sounds related to something @melaniegoetz is working on internally/

[jimmy-tap]

@wcshi @melaniegoetz Please provide us with expected date for solving this issue

[TonnyL]

1.3.0-alpha01 still has this issue 🙁.

[gabrielemariotti]

It seems to be an expected behavour.

Check this comment in PR: #437

Bad news: Our design team is strongly opinionated that rounded corners indicate scrollable content while flat corners indicate that there is no additional content. As such, they do no want us to add this change with fitToContents.

Also in the design doc there is indication to use flat corners when the bottomsheet is expanded..

Good news: You should be able to fix this for your case by setting up a callback and overriding the shapeAppearance in the expanded state.

You can find in the PR a solution or you can check this question on SO: https://stackoverflow.com/questions/43852562/round-corner-for-bottomsheetdialogfragment/57627229#57627229

[Fishfield]

I just stumbled upon another solution to keep the rounded corners. If you just set cornerSize, the rounded corners stay as they are when the bottom sheet is expanded. I hope this helps some of you in order to avoid those hacky workarounds

<style name="ShapeAppearance.App.LargeComponent" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">@dimen/corner_radius_s</item>
</style>

[thevoiceless]

@Fishfield Can you share a more complete example? I've tried setting shapeAppearance and shapeAppearanceOverlay and neither seems to apply when the sheet is expanded like you said.

[lsuski]

You can try this:

<style name="BottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/BottomSheet</item>
    <item name="android:colorBackground">@color/white</item>
</style>
<style name="BottomSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@android:color/transparent</item>
</style>

in bottom sheet layout

android:background="@drawable/rounded_top_corners_background"

drawable/rounded_top_corners_background :

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

in activity/application theme

<item name="bottomSheetDialogTheme">@style/BottomSheetDialog</item>

[Gidde-Abhishek]

You can try this:

<style name="BottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/BottomSheet</item>
    <item name="android:colorBackground">@color/white</item>
</style>
<style name="BottomSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@android:color/transparent</item>
</style>

in bottom sheet layout

android:background="@drawable/rounded_top_corners_background"

drawable/rounded_top_corners_background :

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

in activity/application theme

<item name="bottomSheetDialogTheme">@style/BottomSheetDialog</item>

This worked for me! 8/2021

[drchen]

I'll close the issue since it's WAI according to our designers' opinion and there are solutions for clients to override the behavior. Thank you all for your feedbacks!

[devs-gireeb]

You can try this:

<style name="BottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/BottomSheet</item>
    <item name="android:colorBackground">@color/white</item>
</style>
<style name="BottomSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@android:color/transparent</item>
</style>

in bottom sheet layout

android:background="@drawable/rounded_top_corners_background"

drawable/rounded_top_corners_background :

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

in activity/application theme

<item name="bottomSheetDialogTheme">@style/BottomSheetDialog</item>

Your solution worked, you saved my day!

[wixeless]

Try this

class MyBottomSheer: BottomSheetDialogFragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        disableShapeAnimation()
    }

    @SuppressLint("RestrictedApi", "VisibleForTests")
    private fun disableShapeAnimation() {
        try {
            val dlg = dialog as BottomSheetDialog
            dlg.behavior.disableShapeAnimations()
        } catch (ex: Exception) {
            Log.e("BaseBottomSheet", "disableShapeAnimation Exception:", ex)
        }
    }
}

[drchen]

FYI since 1.8 rounded corners become a standard design with M3 styles, no matter it's collapsed or expanded. : )

[oOJohn6Oo]

For those who do not want to use M3, just upgrade to latest version and add <item name="shouldRemoveExpandedCorners">false</item> to your bottomSheetStyle theme.

[Zee604]

pougf 👿