[BottomSheetDialogFragment] Gradient background

[CharlyLafon37]

Hello, I want to make a BottomSheetDialogFragment with a gradient background.

I've managed to change the background color of the dialog with these styles :

<style name="RoundedBottomSheetDialogTheme" parent="@style/ThemeOverlay.MaterialComponents.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/RoundedBottomSheetStyle</item>
    <item name="android:windowIsFloating">false</item>
</style>

<style name="RoundedBottomSheetStyle" parent="@style/Widget.MaterialComponents.BottomSheet.Modal">
    <item name="shapeAppearanceOverlay">@style/RoundedBottomSheetDialogShape</item>
    <item name="backgroundTint">@color/colorPrimary</item>
</style>

<style name="RoundedBottomSheetDialogShape" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

But backgroundTint only supports plain colors, not gradients.

Is it possible with the latest version of the library to achieve a gradient background ?

[pinakinkansara]

set backgroundTint to @null and set android:background with your gradient background drawable

<style name="RoundedBottomSheetStyle" parent="@style/Widget.MaterialComponents.BottomSheet.Modal">
    <item name="shapeAppearanceOverlay">@style/RoundedBottomSheetDialogShape</item>
    <item name="backgroundTint">@null</item>
    <item name="android:background>"@drawable/your_gradient_drawable"</item>
</style>

[CharlyLafon37]

@pinakinkansara I just tried your solution, it doesn't work the background stays white.

By the way my current version of the lib is 1.2.1, my App theme's parent is Theme.MaterialComponents.Light.NoActionBar and I use this code to style and define the layout in my BottomSheetDialogFragment class :

override fun getTheme(): Int = R.style.RoundedBottomSheetDialogTheme

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View?
{
    return inflater.inflate(R.layout.my_layout, container, false)
}

What I've tried :

<style name="RoundedBottomSheetStyle" parent="@style/Widget.MaterialComponents.BottomSheet.Modal">
    <item name="shapeAppearanceOverlay">@style/RoundedBottomSheetDialogShape</item>
    <item name="backgroundTint">@null</item>
    <item name="android:background">@drawable/bg_test</item> <!-- bg_test defines a gradient -->
</style>

[drchen]

Hi under the current implementation you also need to add app:shapeAppearance="@null" in your custom style to disable the default background the bottom sheet will use.

I'll raise to the team if we should avoid overriding custom background provided by the clients. (This can be a huge breaking change to all existing users of bottom sheets so I'm not sure if that's something we are going to do.)