enableEdgeToEdge - navigation system bar is not fully transparent

Question

Why navigation system is not fully transparent?

enableEdgeToEdge(
    statusBarStyle = SystemBarStyle.auto(
        Color.TRANSPARENT,
        Color.TRANSPARENT,
    ) { false },
    navigationBarStyle = SystemBarStyle.auto(
        lightScrim,
        darkScrim,
    ) { false },
)

setContent {
    ArchApp()
}

The code I used from official android sample https://github.com/android/nowinandroid/blob/main/app/src/main/java/com/google/samples/apps/nowinandroid/MainActivity.kt#L123

Theme (the same as in nowinandroid)

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Allows us to override night specific attributes in the
         values-night folder. -->
    <style name="NightAdjusted.Theme.App" parent="android:Theme.Material.Light.NoActionBar" />

    <!-- The final theme we use -->
    <style name="Theme.App" parent="NightAdjusted.Theme.App" />

    <style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
    </style>

    <style name="Theme.App.Splash" parent="NightAdjusted.Theme.Splash">
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_splash_logo</item>
        <item name="windowSplashScreenBackground">@color/splash_screen_background</item>
        <item name="postSplashScreenTheme">@style/Theme.App</item>
    </style>
</resources>

Theme Night (the same as in nowinandroid)

<style name="NightAdjusted.Theme.App" parent="android:Theme.Material.NoActionBar" />

<style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
    <item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
    <item name="android:windowLightNavigationBar" tools:targetApi="27">false</item>
</style>

It's fully transparent in nowinandroid app

Answer 1

Use the following:

enableEdgeToEdge(
        statusBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT),
        navigationBarStyle = SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT) // light causes internally enforce the navigation bar to be fully transparent
    )

take a look with the .light, if you'll dive into the implementation then you'll notice it affects on window.isNavigationBarContrastEnforced which causes it to become fully transparent

Answer 2

By default a 3-buttons navigation mode in SDK >= 29 enableEdgeToEdge will enforce a translucent scrim on the background of the navigation bar. This way the navigation buttons are always clearly visible.

If you can guarantee that you won't draw complex content behind the navigation bar you can use this:

fun enableFullyEdgeToEdge() {
  enableEdgeToEdge(navigationBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT))
  if (Build.VERSION.SDK_INT >= 29) {
    window.isNavigationBarContrastEnforced = false
  }
}

Personally, for simple splashscreens and screens that will only draw the theme's background color on the navigation bar I don't enforce the navigation bar contrast. For screens that would draw content behind the navigation bar, like a recyclerview, I will enforce the navigation bar contrast for accessibility reasons.