How to prevent bottom sheet from animating corner shape to square?

Question

I've designed my bottom sheet like this

<style name="ShapeAppearanceOverlay.BottomSheet" parent="">
    <item name="cornerSize">30dp</item>
    <item name="cornerFamily">rounded</item>
</style>

And it works fine my bottom sheet comes up with 30dp corner radius, however if I push slide up on my bottom sheet the corner flattens out, How can I prevent this from happening?

I actually used shapeAppearanceLargeComponenet theme attribute to have this style throughout my app https://bryanherbst.com/2020/05/04/bottom-sheet-corners/ from this guide. — Rahul Pawar, Jun 23 '21 at 11:44

score 2 · Answer 1 · answered May 04 '22 at 07:49

I am not sure, if you have already fixed this issue but I found here a solution to prevent sharp corner when its expanded. Her is the link: https://github.com/material-components/material-components-android/issues/1278#issuecomment-844979762

Avoid using shape shapeAppearanceOverlay and add into your layout which is used for bottomSheetDialogFragment, a drawable like below ->

<?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="@color/light_white_dark_grey_02" />
</shape>

and for the style use 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>

It worked for me but I recommend have a look into that link that I shared above ;)

score 1 · Answer 2 · answered Jun 23 '21 at 04:02

Use this style in your bottom sheet for transparent background

    <style name="BottomSheetMainStyle" parent="ThemeOverlay.MaterialComponents.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/Widget.Test.BottomSheet.Modal</item>
    </style>

    <style name="Widget.Test.BottomSheet.Modal" parent="Widget.MaterialComponents.BottomSheet.Modal">
        <item name="backgroundTint">@android:color/transparent</item>
    </style>

How to prevent bottom sheet from animating corner shape to square?

2 Answers2