item selected color in android BottomNavigationVie

Question

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>

Answer 1

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

Answer 2

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.

Answer 3

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>

Answer 4

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

Answer 5

1-make file xml in drawble with name of navigation_view_colored.xml and put

<?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" />

2-add xml you create to 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"/>