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

user_13516834 0
Viewed 178

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?

enter image description here enter image description here

android-bottomsheetdialog android-fragments android-layout android
2 Answers

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>
user_58917470

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 ;)

user_23396470
Related