CODEWITHSUNDEEP
navigationandroid-jetpack-composebottom-navigation-bar
Alex
Alex

Reputation: 1740

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)

Upvotes: 3

Views: 1789

Answers (1)

Alex
Alex

Reputation: 1740

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.

Upvotes: 16

Related Questions