BottomNavigationBar() can only take the background
and contentColor
but there is no option for tint color.
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 = {})
}
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 = { }
)
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 = {})
}
}
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
.
If you want to change the tint color of the image then you can use below code
Image(painter = painterResource(R.drawable.ic_arrow_details), contentDescription = "", colorFilter = ColorFilter.tint(Color.Black))
You can use colorFilter properties in Image
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
.
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
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.