4

I'm having a terribly hard time trying to change the color(s) of selected/unselected icons and the active indicator. The docs don't have examples or proper Kdocs and I can't seem to find any examples online (please point me to any you know of). The icons just don't change their color and remain black.

My NavigationBar looks like this:

NavigationBar(
    containerColor = NavBarColor,
    contentColor = ContentColor, // <-- Can't tell what this is for.
    modifier = Modifier
        .align(Alignment.BottomCenter)
) {
    // ...
    destinations.forEachIndexed { index, item ->
        NavigationBarItem(
            selected = currentDestination?.hierarchy?.any { it.route == item.route } == true,

            onClick = {
                // ...
            },

            icon = {
                when (index) {
                    0 -> {
                        Icon(
                            imageVector = Icons.Rounded.Add,
                            contentDescription = stringResource(id = item.description)
                        )
                    }
                    1 -> {
                        Icon(
                            imageVector = Icons.Rounded.Home,
                            contentDescription = stringResource(id = item.description)
                        )
                    }
                    2 -> {
                        Icon(
                            imageVector = Icons.Rounded.Call,
                            contentDescription = stringResource(id = item.description)
                        )
                    }
                }
            },

            // Why on Earth does this not want to work:
            colors = NavigationBarItemDefaults.colors(
                selectedIconColor = NavBarColor, // <-- This doesn't work.
                unselectedIconColor = ContentColor, // <-- This doesn't work.
                indicatorColor = ContentColor // <-- This works.
            )
        )
    }
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
imashnake_
  • 171
  • 9

1 Answers1

6

Use import androidx.compose.material3.Icon for your icon.

You're mixing material and material3 code here: Icon is imported from material and uses material LocalContentColor, on the other hand NavigationBarItem is material3 view and provides material3 LocalContentColor.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • Its not working for me!! I have imported `Icon` from v3. – ino Jun 05 '22 at 07:55
  • @ino have you checked other imports? `NavigationBarItem` and `NavigationBar` should be from v3 too. If this doesn't help, please create a separate question with a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – Phil Dukhov Jun 05 '22 at 07:58
  • Thanks, I am going to create a separate question. I have imported `NavigationBar` and `NavigationBarItem` from v3 as well. – ino Jun 05 '22 at 07:59
  • I have changed the tint color from being static to be changed programmatically, now it seems to work. – ino Jun 05 '22 at 08:09