Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

597
Views
How to change android jetpack compose bottomAppBar icon tint color?

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

over 4 years ago · Hanz Gallego
7 answers
Answer question

0

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 = {})
}
over 4 years ago · Hanz Gallego Report

0

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 = { }
)
over 4 years ago · Hanz Gallego Report

0

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 = {})
    }

enter image description here

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 = {})
        }
    }

enter image description here

over 4 years ago · Hanz Gallego Report

0

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

over 4 years ago · Hanz Gallego Report

0

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.

over 4 years ago · Hanz Gallego Report

0

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.

over 4 years ago · Hanz Gallego Report

0

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
)
over 4 years ago · Hanz Gallego Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!