How to change android jetpack compose bottomAppBar icon tint color?

Question

BottomNavigationBar() can only take the background and contentColor but there is no option for tint color.

Answer 1

If you want to change the tint color of the image then you can use the colorFilter property of the Image

Image(
    painter = painterResource(R.drawable.ic_arrow_details), 
    contentDescription = "", 
    colorFilter = ColorFilter.tint(Color.Black)
)

Answer 2

If you want to remove completly the tint color and you would like to use icon's colors then try with: tint = Color.Unspecified

For example:

Icon(
    modifier = Modifier.size(34.dp),
    imageVector = ImageVector.vectorResource(id = R.drawable.ic_your_icon),
    contentDescription = "Some icon",
    tint = Color.Unspecified
)

Answer 3

In case you didn't want to change content color, and wanted to have an individual color for specific Icon, there is a tint property. Like:

Icon(
 Icons.Filled.PushPin, "",
 tint = MaterialTheme.colors.secondary
)

But as others said, you can use unselectedContentColor and selectedContentColor in your NavigationItem.

Answer 4

For BottomNavigation, you need to provide BottomNavigationItem to construct it, while constructing BottomNavigationItem, you can use Icon with tint as resource like below

BottomNavigation() {
    BottomNavigationItem(icon = { 
           Icon(asset = vectorResource(id = R.drawable.homeBottomNav), tint = Color.Blue) //this is tint
       }, selected = true, onClick = {})
}

Answer 5

With the 1.0.0 (tested with 1.0.0-beta06) in the BottomNavigationItem you can define the attributes:

• selectedContentColor
• unselectedContentColor

Something like:

    BottomNavigation(backgroundColor = Color.White) {
            BottomNavigationItem(
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(Icons.Filled.Add, "contentDescription")
                },
                selected = true,
                onClick = {})
            BottomNavigationItem(
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(Icons.Filled.Search, "contentDescription")
                },
                selected = false,
                onClick = {})
    }

Also since the default selectedContentColor is based on the LocalContentColor.current you can also use something like:

    BottomNavigation(backgroundColor = Color.White) {
        CompositionLocalProvider(LocalContentColor provides Color.Red) {
            BottomNavigationItem(
                icon = {
                    Icon(Icons.Filled.Add, "contentDescription")
                },
                selected = true,
                onClick = {})
            BottomNavigationItem(
                icon = {
                    Icon(Icons.Filled.Search, "contentDescription")
                },
                selected = false,
                onClick = {})
        }
    }

Answer 6

You can use unselectedContentColor and selectedContentColor.

BottomNavigationItem(
   unselectedContentColor = Color.Black,
   selectedContentColor = Color.Red,
   icon = {
       Icon(
           painter = painterResource(id = screen.iconResourceId),
           contentDescription = null)
           },
    selected = currentRoute == screen.route,
    onClick = { }
)

Answer 7

selectedContentColor changes color of Text and Icon, but not Image() Composable. So if you want to keep color of multicolor-icon when selected, one should use Image(). Also you want to make it grayscale when unselected, you can use colorFilter.

Plus if you don't want to change color of Text/Icon, then you can use Color.Unspecified.