Hi! I’ve a `Scaffold` with a `BottomAppBar` (because I want the cutoutShape effect) and a few `Botto...

# compose

[Guilherme Delgado]

Hi!
I’ve a Scaffold with a BottomAppBar (because I want the cutoutShape effect) and a few BottomNavigationItem (this also happened when I had BottomNavigation as a parent instead of BottomAppBar ) and the problem is there’s no “selected” effect on the menu items. I’ve checked and the var is being changed accordingly, but I see no UI change. To test it I did this (to my BottomNavigationItem icon and label):

colorFilter = ColorFilter.tint(MaterialTheme.colors.onBackground.copy(alpha = if (isSelected) 1f else .5f)),

and it works.
What am I missing to get this working properly with the selected property? Or the selected state is not meant for the item (icon and label)? Thanks

[Lucien Guimaraes]

Do you mean to update the color of icon/label of selected item ?

[Lucien Guimaraes]

Then in BottomNavigationItem you can use selectedContentColor and unselectedContentColor

[Lucien Guimaraes]

Example:

BottomNavigationItem(
    ...
    selectedContentColor = Green.darken1,
    unselectedContentColor = Grey.lighten10,
)

[Guilherme Delgado]

i’ve tried that and it changed the ripple color 😬 , I’ll give a second try

[Lucien Guimaraes]

can you share your BottomNavigationItem implementation ?

[Guilherme Delgado]

val isSelected = it.navCommand == navManager.commands.value

BottomNavigationItem(
    icon = {
        Image(
            painter = painterResource(it.iconId),
            contentDescription = it.navCommand.destination,
            colorFilter = ColorFilter.tint(MaterialTheme.colors.onBackground),
        )
    },
    label = {
        Text(
            text = stringResource(id = it.resourceId).uppercase(),
            style = MaterialTheme.typography.caption,
            color = MaterialTheme.colors.onBackground
        )
    },
    selected = isSelected,
    onClick = {
        if (navManager.commands.value != it.navCommand) {
            scope.launch { navManager.navigate(it.navCommand) }
        }
    }
)

[Lucien Guimaraes]

That's because you set the color of your label and icon manually. By removing the colorFilter from icon and color from label it should works fine

[Lucien Guimaraes]

and add

selectedContentColor = Green.darken1,
unselectedContentColor = Grey.lighten10,

[Lucien Guimaraes]

BottomNavigationItem(
    icon = {
        Image(
            painter = painterResource(it.iconId),
            contentDescription = it.navCommand.destination,
        )
    },
    label = {
        Text(
            text = stringResource(id = it.resourceId).uppercase(),
            style = MaterialTheme.typography.caption,
        )
    },
    selected = isSelected,
    onClick = {
        if (navManager.commands.value != it.navCommand) {
            scope.launch { navManager.navigate(it.navCommand) }
        }
    },
    selectedContentColor = Color.Green,
    unselectedContentColor = Color.Red,
)

[Guilherme Delgado]

it changes the text color but not the icon 🤔

[Guilherme Delgado]

(the icon is an svg drawable, that’s why I was using tint)

[Lucien Guimaraes]

can you try to change Image by Icon ?

[Lucien Guimaraes]

this might be the issue

[Lucien Guimaraes]

icon = {
        Icon(
            painter = painterResource(it.iconId),
            contentDescription = it.navCommand.destination,
        )
    },

[Guilherme Delgado]

nailed it 😎 thanks!