navigationandroid-jetpack-composebottom-navigation-bar

Jetpack Compose. selectedContentColor and unselectedContentColor not working in BottomNavigationItem


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)


Solution

  • 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.