Material-components-android: [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.