How to change the icon color selected on bottom navigation bar in android studio

Question

When I select an item in bottom navigation bar in android studio, background item selected is equal to primarycolor in values->colors.xml . and now I want to change this color which is not to same the primarycolor. how do i can to change it?

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
        Fragment fragment;
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    fragment = new HomeFragment();
                    loadFragment(fragment);
                    return true;
                case R.id.navigation_addpost:
                    fragment = new AddFragment();
                    loadFragment(fragment);
                    return true;
                case R.id.navigation_notifications:
//                    mTextMessage.setText(R.string.title_notifications);
                    return true;
                case R.id.navigation_profile:
                    fragment = new ProfileFragment();
                    loadFragment(fragment);
                    return true;
            }
            return false;
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        loadFragment(new HomeFragment());
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        navigation.setItemTextColor(ColorStateList.valueOf(Color.RED));
    }

Kohinoor

Answer 1

To change the selected tab icon color in BottomNavigationView you should use the Selector.

Create bottom_navigation_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:color="@color/yourSelectedColor" />
  <item android:color="@color/defaultColor"  />
</selector>

Apply app:itemIconTint="@drawable/bottom_navigation_selector" to your BottomNavigationView in xml file.

Enure

It's my pleasure. Happy coding !! – Enure

I know this is old, but how do you change the text colour too? – Posey

Works perfectly! – Colombi

Not working. Please help. I am using contraintlayout as my parent. – Ceratoid

I cant apply a drawable to itemIconTint. Only a color – Mountainous

@Mountainous Just add bottom_navigation_selector.xml to your color folder in res. – Torch

This solution still helpful. Thanks @ChandanSharma. – Arras

Answer 2

Despite reading all the answers I was confused about whole process, so I am going to explain step by step how I resolved this issue so beginners can understand it properly

Let's assume you created bottom navigation activity with name MainActivity so now

create bottom_navigation_selector.xml in your drawable folder using this code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:color="@color/yourSelectedColor" />
  <item android:color="@color/defaultColor"  />
</selector>

then go to the activity_main.xml layout and add this line in BottomNavigationView

app:itemIconTint="@drawable/bottom_navigation_selector"

If you also want to change text color accordingly then you need to add this line aswell

app:itemTextColor="@drawable/bottom_navigation_selector"
    

Separable

Answer 3

To show the real color of items use this

java

bottom_navigation.setItemIconTintList(null);

kotlin

bottom_navigation.itemIconTintList = null

and if you want to change the calor just replace the null with

Color.parseColor("#ffffff")

Threnode

Answer 4

Try,

navigation.setItemIconTintList(Color.BLUE);

Update :

navigation.setItemIconTintList(Color.parseColor("#fafafa"));

Infringement

Ok . Now changed the icon color . but i want to change the color selected icon of blue to another color – Kohinoor

Give whatever color you want as parameter to function. – Infringement

The icon color is black and i want to change #fafafa when selected – Kohinoor

Answer 5

If you are using compose and constructing a BottomNavigationItem you have to use the unselectedContentColor option to set the color.

eg

unselectedContentColor = MaterialTheme.colors.primary,

   BottomNavigationItem(
                icon = {},
                unselectedContentColor = MaterialTheme.colors.primary,
                alwaysShowLabel = false,
                selected = currentRoute == item.route,
                onClick = { },
            )

Coworker

Answer 6

bottomNavigationView.setItemIconTintList(ColorStateList.valueOf(Color.parseColor("#3F51B5")));

Lowenstern

While this code may solve the problem the answer would be a lot better with an explanation on how/why it does. Remember that your answer is not just for the user that asked the question but also for all the other people that find it. – Mande