I’m theming my app, but the status bar doesn’t fol...

# compose

[Simone Summo]

I’m theming my app, but the status bar doesn’t follow the colors

[Bryan Herbst]

Assuming you are in the Android Dev Challenge template, it does not draw edge-to-edge in Compose by default and the color is controlled by the colors set in themes.xml.

You can either change the color there for a quick win, or make some tweaks to support drawing edge-to-edge in Compose

[Stylianos Gakis]

As far as I know this doesn't look at the colors you have specified in compose, but in the colors.xml and the theme specified in your manifest.

With that said, using
implementation "dev.chrisbanes.accompanist:accompanist-insets:$accompanist_version" from https://github.com/chrisbanes/accompanist
You can do something like this (please do correct me people if I am doing something wrong here)

@Composable
fun EdgeToEdgeContent(content: @Composable () -> Unit) {
    val view = LocalView.current
    val window = (LocalContext.current as Activity).window
    val statusBarColor = MaterialTheme.colors.primary
    val statusBarAndroidColor = android.graphics.Color.valueOf(
        statusBarColor.red,
        statusBarColor.green,
        statusBarColor.blue,
        statusBarColor.alpha
    )
    val navigationBarColor = MaterialTheme.colors.primary
    val navigationBarAndroidColor = android.graphics.Color.valueOf(
        navigationBarColor.red,
        navigationBarColor.green,
        navigationBarColor.blue,
        navigationBarColor.alpha
    )
    window.statusBarColor = statusBarAndroidColor.toArgb()
    window.navigationBarColor = navigationBarAndroidColor.toArgb()
    val insetsController = remember(view, window) {
        WindowCompat.getInsetsController(window, view)
    }
    val isLightTheme = MaterialTheme.colors.isLight
    insetsController?.run {
        isAppearanceLightNavigationBars = isLightTheme
        isAppearanceLightStatusBars = isLightTheme
    }
    ProvideWindowInsets(content = content)
}

And then I am simply wrapping everything with it by specifying in my main Activity:

setContent {
    AppTheme {
        EdgeToEdgeContent {
            Surface(
                color = MaterialTheme.colors.background,
                modifier = Modifier.fillMaxSize()
            ) {
                YourAppComposable()
            }
        }
    }
}

I hope this helps!

[Colton Idle]

Really hope android makes supporting edge to edge easier in some way.

[Quentin Dommerc]

+1, really hope to see the theme.xml + colors.xml disappear 😬

[Simone Summo]

Thanks all for the help!