[System UI Controller] cannot setNavigationBarColor to Transparent with edge to edge

[FunkyMuse]

Description Using accompanist 0.33.0-alpha makes the navigation bar color not transparent, rather white/dark depending on the theme

Steps to reproduce

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.DisposableEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat
import com.google.accompanist.systemuicontroller.rememberSystemUiController

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = rememberSystemUiController()
            val isSystemInDarkTheme = isSystemInDarkTheme()
            DisposableEffect(systemUiController, !isSystemInDarkTheme) {
                systemUiController.setNavigationBarColor(
                    color = Color.Transparent,
                    darkIcons = !isSystemInDarkTheme
                )
                onDispose {}
            }
            Box(
                Modifier
                    .background(Color.DarkGray)
            ) {

            }
        }
    }
}

Expected behavior The navigation bar color should be transparent

Additional context

[alexvanyo]

Could you provide more info about your app theme in the reproducing section?

As is, the Box with the color won't be visible as it isn't taking up any size.

[FunkyMuse]

Could you provide more info about your app theme in the reproducing section?

As is, the Box with the color won't be visible as it isn't taking up any size.

Even if you add fillMaxSize it has the same problem.

https://github.com/SimpleMobileTools/Simple-Commons/pull/1777

You can check here https://github.com/FunkyMuse/Simple-Commons/tree/master opening up on the second button (bottom sheet chooser) it will launch https://github.com/FunkyMuse/Simple-Commons/blob/master/commons/src/main/kotlin/com/simplemobiletools/commons/compose/screens/AboutScreen.kt

[FunkyMuse]

When it comes to using a scaffold i've managed to fix it by just doing

 Box(
        modifier = modifier
            .fillMaxSize()
            .padding(top = paddingValues.calculateTopPadding()) //crucial part
            .background(MaterialTheme.colorScheme.surface)
    ) {
        content()
    }

But if it's not a scaffold like in the example let's say, i've no idea

[alexvanyo]

Once the navigation bar is transparent, the effective color in the area of the navigation bar is controlled by whatever content is behind it.

If you're applying a background color after applying padding, then that color won't be visible in the space where the padding was applied, and instead the overall background color will be used.

I'd recommend debugging the layout inspector, and see if the bounds of the components are what you expect. It sounds like the navigation bar color is correctly being set to transparent by the systemuicontroller.