androidandroid-jetpack-composeandroid-bottomappbarandroid-jetpack-compose-scaffold

Jetpack compose - change bottom bar cutout color


How to change the color of the cut out for the bottom bar?

I know it takes the color from MaterialTheme.colors.background, but I don't want to change the background color for all components, only for the bottom bar. (The white color in the cut out in the picture.)

enter image description here

I have tried different things, for example setting a new theme just for the bottom bar, but that doesn't work.

val bottomBarColors = MaterialTheme.colors.copy(background = Color.LightGray)
...

bottomBar = {
    MaterialTheme(
        colors = bottomBarColors,
        typography = MaterialTheme.typography,
        shapes = MaterialTheme.shapes
    ) {
        BottomAppBar(
            cutoutShape = fabShape,
            content = {
                MyBottomNavigation(navController, bottomNavigationItems)
            })
    }
}

Solution

  • In your case you can apply the Modifier.background to the BottomAppBar:

        bottomBar = {
            BottomAppBar(
                modifier = Modifier.background(Color.Red),
                cutoutShape = fabShape) {
    
                BottomNavigation {
                    /* .... */
                }
            }
        }
    

    enter image description here