How to remove black bar at bottom in Jetpack Compose

Question

in my app I have created a BottomBar with a scaffold using Jetpack Compose. On newer devices (e.g. Google Pixel 6) there is a black bar at the bottom of the App Switcher. How can I remove this? I want it to be the same color as the BottomBar.

Answer 1

You can use the following piece of code in your theme.kt or any other composable function if you would like the change the colour depending on it:

val window = (LocalView.current.context as? Activity)?.window
    ?: throw Exception("Not in an activity - unable to gte Window reference")

val myColor = Color(0xFFXXXXXX)

SideEffect {
    window.statusBarColor = myColor.toArgb()
    window.navigationBarColor = myColor.toArgb()
}

There should already be a similar piece of code in your theme.kt file if you have created your project as a Material3 template.