item selected color in android BottomNavigationView

I refer this. Schedules Activity is appeared when I click Schedules, but first item color (Favorites) is always selected. It doesn't change Schedules item color from Favorites item color. And also, third item (Music). I use android:state_checked NOT android:state_enabled." If working with startActivity, it doesn't change Schedules item color from Favorites item color. If not, it change color. How to solve this color select problems.

activity_main.xml

app:itemIconTint="@drawable/nav_item_color_state"
app:itemTextColor="@drawable/nav_item_color_state"
app:menu="@menu/bottom_navigation_main"

@drawable/nav_item_color_state

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_enabled="true" />
    <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
</selector>

create a color directory in res folder and create your xml file for customize your bottom navigation items:

res/color/bottom_nav_color.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/your_color" />
     <item android:state_checked="false" android:color="@color/your_color"/>
</selector>

and in your BottomNavigationView set app:itemTextColor and app:itemIconTint values to @color/bottom_nav_color

<android.support.design.widget.BottomNavigationView
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/main_navigation"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:background="@color/actionBarColor"
   app:menu="@menu/my_navigation_items"
   app:itemTextColor="@color/bottom_nav_color"
   app:itemIconTint="@color/bottom_nav_color"/>

1. Make a xml file in the drawable folder with the name of navigation_view_colored.xml and put this inside:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="false" android:color="@color/gray" />
  <item android:state_checked="true" android:color="@color/blue" />
</selector>

2. Add the xml you created to app:itemIconTint

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_navigation"
    android:layout_alignParentBottom="true"
    app:itemIconTint="@drawable/navigation_view_colored"
    app:itemTextColor="@color/blue"
    app:menu="@menu/bottom_navigation"
    android:background="?android:attr/windowBackground"/>

here is simple solution to your question

<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>

the selector res/drawable/tab_color_selector.xml:

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

update tab item selector color what your required to.

just change theme:

create themes.xml in values and add this style

<style name="BottomNavThem" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimaryRed</item>
</style>

and set to BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/main_navigation_menu"
    android:theme="@style/BottomNavThem"/>

In my situation, I used BottomNavigationBarEx plugin. So, I had to do it like below:

In my res/layout/layout_navigation_view.xml:

Added app:itemIconTint="@drawable/bottom_nav_colors". Since, I only used icons. So if you have text add this: app:itemTextColor="@drawable/bottom_nav_colors" also.

    <com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/bottomNavBar"
        android:background="@drawable/white_grey_border_top"
        app:itemIconTint="@drawable/bottom_nav_colors"
        app:menu="@menu/bottom_navigation_menu" />

Then in res/drawable directory (because selectors need to include in drawable or animatable directory) add the selector(as others mentioned):

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

Then in res/values/colors.xml add your select and unselect colors, as ex:

<color name="grey">#bfbfbf</color>
<color name="blue">#3F51B5</color>

Have you heard about the wrapper project called BottomBar of Roughike which makes the use of BottomNavigationView easier? Project can be found here.

I suggest you to use this project which is up to date and has contribution in a high level. If you refer to use this, You can simply insert the below code to change the colors when clicked on tabs and do much more customized stuff:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
Tab tab = newTab().setIcon(new BitmapDrawable(getResources(), icon)));
tab.getIcon().setColorFilter(Color.parseColor("#7E7E7E"), PorterDuff.Mode.SRC_IN);

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                          @Override public void onTabSelected(TabLayout.Tab tab) {
                            if (tab != null && tab.getIcon() != null) {
                              tab.getIcon().clearColorFilter();
                              }
                          }
                          @Override public void onTabUnselected(TabLayout.Tab tab) {
                            if (tab != null && tab.getIcon() != null) {
                              tab.getIcon()
                                  .setColorFilter(Color.parseColor("#7E7E7E"),
                                      PorterDuff.Mode.SRC_IN);
                            }
                          }
                          @Override public void onTabReselected(TabLayout.Tab tab) {
                          }
                        });
                      }
                    }
                  });

So basically what I do here, I color unselected tabs to #7E7E7E and clear the filter for coloring from selected ones so they appear with their original color of their icon. Of course, you can fill with another color when selected as well, that's up to you.

Hope this helps you!

Cheers,

Renc

Other answers using the drawable selector didn't work for me.

<?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/colorPrimary" />
    <item android:color="@color/bottomnavUnselectedColor"  />
</selector>

This worked in my case removing the state_checked="false"

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomnav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/transparent_rect"
        app:layout_constraintBottom_toBottomOf="parent"
        app:itemIconTint="@drawable/bottomnav_selector"
        app:menu="@menu/bottomnav_menu"/>