item selected color in android BottomNavigationView

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>

Have you taken separate activities for Schedules, Favourites, and Music ? — Chintan Soni, Feb 15 '17 at 08:45

score 202 · Answer 1 · edited Sep 24 '19 at 22:10

202

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

edited Sep 24 '19 at 22:10

Anbuselvan Rocky

606
6
22

answered Sep 28 '17 at 16:28

Mohammad Hosein Heidari

2,169
1
8
8

2

You open for me some new in android. Is it hack or just official android sdk? – Serg Burlaka Feb 13 '19 at 21:49
1

@SergBurlaka Hi, there is a function in BottomNavigationView documentation for set itemTextColor value and type of function input is ColorStateList and ColorStateList documentation is in below link https://developer.android.com/reference/android/content/res/ColorStateList – Mohammad Hosein Heidari Feb 15 '19 at 15:46
1

Perfect solution! Thanks! – Lucas P. Nov 27 '19 at 13:40
1

This should mark as correct answer. Working perfect. Thanks! – Dinith Rukshan Kumara Mar 06 '20 at 21:26
1

Perfect. After spending 30 minutes reading through the Android docs, this was exactly what I needed. No more. No less. Thank you. – Forrest Mar 20 '20 at 19:31

score 22 · Answer 2 · edited Apr 12 '21 at 14:03

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>

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

mohsen · Answer 3 · 2021-03-09T14:04:58.770

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

score 6 · Answer 4 · edited Aug 02 '19 at 15:33

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.

score 6 · Answer 5 · answered Dec 01 '19 at 11:05

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>

score 1 · Answer 6 · answered Feb 15 '17 at 08:40

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

It means using tabLayout instead of RelativeLayout. where is tabLayout? — WPG, Feb 15 '17 at 08:46
@StevenLin if you refer to the GitHub project given, you can find the library for this usage. — , Feb 15 '17 at 08:49
tabLayout is shown underline, I want to use logo and text only. Sir! — WPG, Feb 16 '17 at 03:42

score -1 · Answer 7 · answered May 23 '21 at 03:28

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

item selected color in android BottomNavigationView

7 Answers7

Linked