androidandroid-jetpack-composeandroid-statusbar

Jetpack Compose: Can't make statusBar completely transparent

I have a screen, which contains a Map and I want to make a statusBar completely transparent.

What I've tried:

implementation "com.google.accompanist:accompanist-systemuicontroller:0.26.1-alpha"

@Composable
fun MapMainScreen() = Column(
    modifier = Modifier.fillMaxSize()
) {
    val controller = rememberSystemUiController()
    controller.setStatusBarColor(color = Color.Transparent)
    controller.setNavigationBarColor(color = Color.Transparent)
    controller.setSystemBarsColor(color = Color.Transparent)
    
    Map()
}

Also, I've tried to play with window in MainActivity before and in setContent call:

WindowCompat.setDecorFitsSystemWindows(window, false)
window.setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)

I want to see a result like in Google Maps, but now my statusBar has a White-Gray color instead of Transparent

enter image description here

enter image description here

How can I fix this and make my statusBar Transparent?

Solution

  • Any additional dependency is not needed.

    In your Compose theme (or directly in activity) set this:

    SideEffect {
    with(view.context as Activity) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
        window.statusBarColor = Color.Transparent.toArgb()
        window.navigationBarColor = Color.Transparent.toArgb()
    }
}

    Optionally, you could also add this line to make the navigation bar transparent:

    window.navigationBarColor = Color.Transparent.toArgb()