Translucent navigation bar with BottomSheetDialog

650 Views Asked by At

I'm fighting for a proper navigation bar coloring on targetSdk=30 in my BottomSheetDialog when going edge-to-edge. I set the light navigation bar option via code here:

override fun onAttachedToWindow() {
    super.onAttachedToWindow()

    val window = window
        ?: error("window not attached?!")
    val sheetView = findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
        ?: error("bottom sheet design not found")

    WindowInsetsControllerCompat(window, sheetView).apply {
        isAppearanceLightNavigationBars = true
    }

    ViewCompat.setOnApplyWindowInsetsListener(sheetView) { _, windowInsets ->
        val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
        sheetView.updatePadding(
            bottom = insets.bottom
        )
        sheetView.updateLayoutParams<ViewGroup.MarginLayoutParams> {
            bottomMargin = -insets.bottom
        }
        WindowInsetsCompat.CONSUMED
    }
}

and in my theme I have this

<style name="BottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
    <item name="enableEdgeToEdge">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

This results in a completely transparent navigation bar, as expected (since the navigation bar color is transparent, after all). BUT, when I try to make the navigation bar translucent, i.e. by giving it a color of "#40ffffff" or by setting android:windowTranslucentNavigation , the navigation bar keeps transparent, without the scrim / background protection applied. What am I doing wrong?

0

There are 0 best solutions below