Make Status bar transparent in Jetpack Compose

WindowCompat.setDecorFitsSystemWindows(window, false)

setContent {
    // Remember a SystemUiController
    val systemUiController = rememberSystemUiController()
    val useDarkIcons = !isSystemInDarkTheme()

    DisposableEffect(systemUiController, useDarkIcons) {
        // Update all of the system bar colors to be transparent, and use
        // dark icons if we're in light theme
        systemUiController.setSystemBarsColor(
            color = Color.Transparent,
            darkIcons = useDarkIcons,
            isNavigationBarContrastEnforced = false
        )
        // setStatusBarColor() and setNavigationBarColor() also exist

        onDispose {}
    }

    Scaffold(
        Modifier.fillMaxSize(),
    ) {
        LazyColumn(
            modifier = Modifier.fillMaxHeight(),
            contentPadding = WindowInsets.systemBars.asPaddingValues()
        ) { ... }
    }
}

LazyColumn takes space up to status bar and status bar is drawn over LazyColumn

References

  • https://stackoverflow.com/questions/73756866/jetpack-compose-cant-make-statusbar-completely-transparent

Leave a Comment

Your email address will not be published. Required fields are marked *