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

score 46 · Accepted Answer · edited Nov 29 '19 at 00:26

46

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.

edited Nov 29 '19 at 00:26

Jared Burrows

54,294
25
151
185

answered Jul 29 '18 at 12:13

Chandan Sharma

2,803
1
17
25

It's my pleasure. Happy coding !! – Chandan Sharma Jul 29 '18 at 12:33
I know this is old, but how do you change the text colour too? – C Williams Jan 01 '19 at 19:08
Works perfectly! – WHOATEMYNOODLES Jul 25 '19 at 14:14
1

Not working. Please help. I am using contraintlayout as my parent. – Mohammad Alfaz Feb 29 '20 at 06:08
3

I cant apply a drawable to itemIconTint. Only a color – MikkelT Aug 27 '21 at 09:24
@MikkelT Just add `bottom_navigation_selector.xml` to your `color` folder in `res`. – Hawklike May 28 '22 at 13:29
This solution still helpful. Thanks @ChandanSharma. – Sakhawat Hossain Jul 06 '23 at 20:43

score 16 · Answer 2 · answered Dec 30 '20 at 07:27

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"

score 2 · Answer 3 · answered Sep 02 '22 at 19:44

2

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")

answered Sep 02 '22 at 19:44

devio

607
9
29

Saikrishna Rajaraman · Answer 4 · 2018-07-29T12:24:47.843

0

Try,

navigation.setItemIconTintList(Color.BLUE);

Update :

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

edited Jul 29 '18 at 12:24

answered Jul 29 '18 at 11:55

Saikrishna Rajaraman

3,205
2
16
29

Ok . Now changed the icon color . but i want to change the color selected icon of blue to another color – Hasan Cheraghi Jul 29 '18 at 12:01
Give whatever color you want as parameter to function. – Saikrishna Rajaraman Jul 29 '18 at 12:03
The icon color is black and i want to change #fafafa when selected – Hasan Cheraghi Jul 29 '18 at 12:06

score 0 · Answer 5 · answered May 25 '22 at 09:00

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

score -1 · Answer 6 · edited Jan 15 '20 at 22:41

-1

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

edited Jan 15 '20 at 22:41

NathanOliver

171,901
28
288
402

answered Jan 15 '20 at 22:39

Ahmed Belmekhfi

1
1

3

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. – NathanOliver Jan 15 '20 at 22:41

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

6 Answers6

Linked