Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I theme `NavigationBar()` and `NavigationBarItem()` in Jetpack Compose?

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading