BottomSheetDialogFragment bottom navigation color

I have tried to apply a custom color to the bottom navigation bar but failed. I tried this:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowLightNavigationBar">true</item>
<item name="android:navigationBarColor">@color/white</item>
<item name="android:windowTranslucentNavigation">false</item>

It works for usual DialogFragment but not for the BottomSheetDialogFragment.

I tried this also:

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
        dialog.setOnShowListener { dialogInterface ->
            val d = dialogInterface as BottomSheetDialog
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                d.window?.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
                d.window?.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
                d.window?.navigationBarColor = ContextCompat.getColor(requireContext(), R.color.white)
            }
        }

        return dialog 
}

How can I change the nagivation bar color to custom? Right now it is always transparent.

[ivaniskandar]

My solution for this is by having my own bottom sheet style and applying it by overriding the getTheme() method:

    <style name="Widget.AppTheme.BottomSheet" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
        <item name="android:windowIsFloating">false</item> <!-- This is important -->
        <item name="android:statusBarColor">@color/transparent</item> <!-- And then this will be needed -->
        <item name="android:navigationBarColor">@color/bottom_sheet_background</item>
        <item name="android:colorBackground">@color/bottom_sheet_background</item>
    </style>

I’m yet to try making the navbar transparent and making the actual bottom sheet draws under the navbar, but that one is working for now.

[stephentalley]

There’s no need to override an entire theme, or change any of your Java/Kotlin code. Just set the appropriate theme overlay in your app theme:

<style
    name="MyAppTheme"
    parent="Theme.MaterialComponents.DayNight"
>
    …
    <item name="bottomSheetDialogTheme">@style/MyAppBottomSheetDialog</item>
    …
</style>

<style
    name="MyAppBottomSheetDialog"
    parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog"
>
    <item name="android:windowIsFloating">false</item>
</style>