NavigationBar shows gray surface tonal overlay on Android 12+ emulator but not on Android 8.1 real device in Jetpack Compose

Problem:

I have a NavigationBar in Jetpack Compose with containerColor = Color.White but on Android 12+ emulator it shows a gray tonal overlay on top of the white background. On my Android 8.1 real device it looks correct (pure white).

Screenshot:

bottomappbar:

@Composable fun PetMateBottomBar(navController: NavHostController) { val items = listOf( BottomNavItem.Home, BottomNavItem.MedLog, BottomNavItem.Emergency, BottomNavItem.Mating, BottomNavItem.Profile ) val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route NavigationBar( modifier = Modifier .fillMaxWidth(), containerColor = Color.White ) { items.take(2).forEach { item -> BottomBarItem(item, navController, currentRoute) } Spacer(modifier = Modifier.weight(1f)) items.takeLast(2).forEach { item -> BottomBarItem(item, navController, currentRoute) } } }

MainActivity:

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { installSplashScreen() super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { PetMateTheme(dynamicColor = false ) { Box(modifier = Modifier.fillMaxSize()) { NavGraph() CustomSnackbarHost() } } } } }

What I tried:

Setting tonalElevation = 0.dp on NavigationBar

Setting windowInsets = WindowInsets(0, 0, 0, 0)

Setting containerColor = Color.White explicitly

Setting surfaceTint = Color.Transparent in theme

Wrapping in Surface with tonalElevation = 0.dp