Jetpack Compose TopBar and BottomBar Default Elevation content doesn't fill its container

Question

How do I fix the topbar and bottombar doesn't fill up its container. The topbar and bottombar uses the default Elevation respectively

You can see the Top bar doesn't fill max width and it got shadows, while the bottom bar have the text its own compose

Scaffold(
        topBar = {
            TopAppBar(
                title = { Text( text = "TEST" ) },
                actions = {
                    IconButton(
                        onClick = { },
                    ) {
                        Icon(
                            imageVector = Icons.Filled.AccountCircle,
                            contentDescription = null
                        )
                    }
                },
            )
        },
        bottomBar = {
           BottomNavigation
            {
                val navBackStackEntry by bottomAppBarNavController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination

                bottomBarItems.forEach { mainRoute ->
                    BottomNavigationItem(
                        selected = currentDestination?.hierarchy?.any { it.route == mainRoute.route } == true,
                        icon = {
                            Icon(
                                imageVector = mainRoute.icon,
                                contentDescription = stringResource(id = mainRoute.resourceId),
                            )
                        },
                        label = { Text( text = stringResource(id = mainRoute.resourceId), ) },
                        onClick = { },
                        alwaysShowLabel = false // This hides the title for the unselected items
                    )

                }
            }
        }
    ){

    }

Answer 1

This happens because of the elevation that TopAppBar and BottomNavigation have by default and because you are using a semitransparent color as primary color in your theme.

You can:

• remove the elevation: TopAppBar(elevation = 0.dp)
• use a solid background color
• try to convert the semitransparent color to the non transparent one with something like: TopAppBar(backgroundColor = Color(0xD9FFFFFF).compositeOver(Color.White))