I have code:
@Composable
fun BottomNavigationBar(navController: NavController) {
val items = listOf(
BottomNavigationItem.One,
BottomNavigationItem.Two,
BottomNavigationItem.Three,
BottomNavigationItem.Four,
BottomNavigationItem.Five
)
BottomNavigation(
backgroundColor = colorResource(id = R.color.teal_700),
contentColor = Color.White
) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
items.forEach { item ->
BottomNavigationItem(
icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) },
label = { Text(text = item.title) },
selectedContentColor = Color.White,
unselectedContentColor = Color.White.copy(0.4f),
alwaysShowLabel = true,
selected = currentRoute == item.route,
onClick = {
navController.navigate(item.route) {
navController.graph.startDestinationRoute?.let { route ->
popUpTo(route) {
saveState = true
}
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}
But contentColor and selectedContentColor with unselectedContentColor not working. Selected item didn't change color (and other items didn't have unselectedContentColor)
I found bug (or, maybe it's correct situation), but If you have
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
properties selectedContentColor and unselectedContentColor won't work. You must use the following imports:
import androidx.compose.material.Icon
import androidx.compose.material.Text
In compose.material3
you have to use the Navigationbar and NavigationItems
. In compose.material
(Material 2) you have to use BottomNavigationBar/Item. Then everything works like expected.