while using ModalBottomSheetLayout, how to make background and status bar transparent in Jetpack compose

Viewed 722

I am new to jetpack. My app is having ModalBottomSheetLayout in MainScreen. Now when I click on button of MainScreen, it shows BottomSheet. When bottom sheet is open, the background is transparent but status bar is not. How to make it transparent?

1 Answers

So far, you can use the System UI Controller in the accompanist library to control the statusBar Color and navigationBar color

implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"
// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight

SideEffect {
    // 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
    )

    // setStatusBarsColor() and setNavigationBarsColor() also exist
}
Related