A modern programming language that makes developers happier.

kotlinlang

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

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

Then in `BottomNavigationItem`  you can use `selectedContentColor`  and `unselectedContentColor`

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

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

can you share your `BottomNavigationItem` implementation ?

```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) }
        }
    }
)```

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

and add
```selectedContentColor = Green.darken1,
unselectedContentColor = Grey.lighten10,```

```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,
)```


it changes the text color but not the icon :thinking_face:

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

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