如何更改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));
    }

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.

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"
    

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

Answer 4

Try,

navigation.setItemIconTintList(Color.BLUE);

Update :

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

Answer 5

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

Answer 6

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

eg

unselectedContentColor = MaterialTheme.colors.primary,

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