Selected tab's color in Bottom Navigation View

Question

I'm adding a BottomNavigationView to a project, and I would like to have a different text (and icon tint) color for the selected tab (to achieve greying out non-selected tabs effect). Using a different color with android:state_selected="true" in a color selector resource file doesn't seem to work. I also tried having additional item entries with android:state_focused="true" or android:state_enabled="true", no effect unfortunately. Also tried setting the state_selected attribute to false (explicitly) for the default (non-selected) color, with no luck.

Here is how I add the view to my layout:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/silver"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground"
        app:menu="@menu/bottom_nav_bar_menu" />

Here is my color selector (bnv_tab_item_foreground.xml):

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

And my menu resource (bottom_nav_bar_menu.xml):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_local_taxi_black_24dp"
        android:title="@string/home" />
    <item
        android:id="@+id/action_rides"
        android:icon="@drawable/ic_local_airport_black_24dp"
        android:title="@string/rides"/>
    <item
        android:id="@+id/action_cafes"
        android:icon="@drawable/ic_local_cafe_black_24dp"
        android:title="@string/cafes"/>
    <item
        android:id="@+id/action_hotels"
        android:icon="@drawable/ic_local_hotel_black_24dp"
        android:title="@string/hotels"/>

</menu>

I would appreciate any help.

score 374 · Accepted Answer · answered Oct 30 '16 at 05:20

374

While making a selector, always keep the default state at the end, otherwise only default state would be used. You need to reorder the items in your selector as:

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

And the state to be used with BottomNavigationBar is state_checked not state_selected.

answered Oct 30 '16 at 05:20

Kamran Ahmed

7,661
4
30
55

98

add it on – dianakarenms Feb 07 '17 at 20:58
1

In my case I needed to generate dynamic menu, and this solution didn't work. The only working solution was manually setting menu items http://stackoverflow.com/a/7106111/2098878 – Rafael Mar 02 '17 at 11:21
What about divider in between of items ? – Anshul Tyagi Mar 29 '17 at 06:14
13

"state_checked not state_selected". What a time saver:) Thanks! – Piotr Ślesarew Apr 09 '17 at 09:32
On KitKat, the default selector flashes when selected and creates visual inconsistencies. – TheRealChx101 May 06 '19 at 13:37
the order is important! – Dmitry Smolyaninov May 30 '19 at 12:29
4

add it on instead of @ drawable – Anton Makov Oct 16 '19 at 20:09
7

For anyone who got stuck like me, I had to create a "color" directory in "res" , and put this file in there. – Tayyab Mazhar May 29 '20 at 12:24

score 108 · Answer 2 · edited Jun 04 '18 at 05:58

1. Inside res create folder with name color (like drawable)

2. Right click on color folder. Select new-> color resource file-> create color.xml file (bnv_tab_item_foreground) (Figure 1: File Structure)

3. Copy and paste bnv_tab_item_foreground

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            app:itemBackground="@color/appcolor"//diffrent color
            app:itemIconTint="@color/bnv_tab_item_foreground" //inside folder 2 diff colors
            app:itemTextColor="@color/bnv_tab_item_foreground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation" />

bnv_tab_item_foreground:

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

Figure 1: File Structure:

This saved me a ton of time. Awesome explanation. – OtienoSamwel May 06 '22 at 13:21 — OtienoSamwel, May 06 '22 at 13:21

score 74 · Answer 3 · edited Mar 18 '19 at 19:33

BottomNavigationView uses colorPrimary from the theme applied for the selected tab and it uses android:textColorSecondary for the inactive tab icon tint.

So you can create a style with the prefered primary color and set it as a theme to your BottomNavigationView in an xml layout file.

styles.xml:

 <style name="BottomNavigationTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/active_tab_color</item>
        <item name="android:textColorSecondary">@color/inactive_tab_color</item>
 </style>

your_layout.xml:

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            android:theme="@style/BottomNavigationTheme"
            app:menu="@menu/navigation" />

`android:textColorSecondary` not works. should use `android:colorForeground` instead — Mahdi Moqadasi, Aug 11 '19 at 11:53
This is the best answer, the "selector" method uses "darker_gray" as the inactive tab color which is different form the original one. Also `android:textColorSecondary` works for me. Thanks! — Sam Chen, Dec 27 '19 at 04:22

score 23 · Answer 4 · edited Mar 19 '21 at 06:48

23

If you want to change icon and text colors programmatically:

ColorStateList iconColorStates = new ColorStateList(
     new int[][]{
          new int[]{-android.R.attr.state_checked},
          new int[]{android.R.attr.state_checked}
     },
     new int[]{
          Color.parseColor("#123456"),
          Color.parseColor("#654321")
     });

navigation.setItemIconTintList(iconColorStates);
navigation.setItemTextColor(iconColorStates);

edited Mar 19 '21 at 06:48

nKognito

6,297
17
77
138

answered Mar 15 '19 at 12:44

Neuron

1,020
2
13
28

2

you made my day :) Works like a charm – ΩlostA Nov 10 '20 at 11:40

score 19 · Answer 5 · answered May 14 '20 at 03:49

I am using a com.google.android.material.bottomnavigation.BottomNavigationView (not the same as OP's) and I tried a variety of the suggested solutions above, but the only thing that worked was setting app:itemBackground and app:itemIconTint to my selector color worked for me.

        <com.google.android.material.bottomnavigation.BottomNavigationView
            style="@style/BottomNavigationView"
            android:foreground="?attr/selectableItemBackground"
            android:theme="@style/BottomNavigationView"
            app:itemBackground="@color/tab_color"
            app:itemIconTint="@color/tab_color"
            app:itemTextColor="@color/bottom_navigation_text_color"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_navigation" />

My color/tab_color.xml uses android:state_checked

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

and I am also using a selected state color for color/bottom_navigation_text_color.xml

Not totally relevant here but for full transparency, my BottomNavigationView style is as follows:

    <style name="BottomNavigationView" parent="Widget.Design.BottomNavigationView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/bottom_navigation_height</item>
        <item name="android:layout_gravity">bottom</item>
        <item name="android:textSize">@dimen/bottom_navigation_text_size</item>
    </style>

I posted `color/tab_color.xml` in my answer above, it is the color selector file. — Sampson, Sep 30 '21 at 11:47

score 9 · Answer 6 · edited Jan 28 '20 at 06:31

9

It's too late to answer but might be helpful for someone. I was doing a very silly mistake, I was using a selector file named as bottom_color_nav.xml for Select and unselect color change but still it was not reflecting any color change in BottomNavigationView.

Then I realize, I was returning false in onNavigationItemSelected method. It will work fine if you'll return true in this method.

edited Jan 28 '20 at 06:31

Subhan Ali

1,370
13
17

answered Jul 29 '19 at 07:24

ajay singh

169
1
5

score 7 · Answer 7 · edited Sep 16 '20 at 21:25

In order to set textColor, BottomNavigationView has two style properties you can set directly from the xml:

itemTextAppearanceActive
itemTextAppearanceInactive

In your layout.xml file:

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bnvMainNavigation"
            style="@style/NavigationView"/>

In your styles.xml file:

    <style name="NavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
      <item name="itemTextAppearanceActive">@style/ActiveText</item>
      <item name="itemTextAppearanceInactive">@style/InactiveText</item>
    </style>
    <style name="ActiveText">
      <item name="android:textColor">@color/colorPrimary</item>
    </style>
    <style name="InactiveText">
      <item name="android:textColor">@color/colorBaseBlack</item>
    </style>

Not sure why I couldn't get this solution to work, but the accepted solution did work. Also anyone looking for the default material styling of `itemIconTint` and `itemTextColor` , check out `@color/mtrl_navigation_bar_item_tint` — lasec0203, Sep 27 '21 at 05:01

score 3 · Answer 8 · answered Oct 30 '16 at 04:42

3

Try using android:state_enabled rather than android:state_selected for the selector item attributes.

answered Oct 30 '16 at 04:42

Abtin Gramian

1,630
14
13

As mentioned in the question, I tried state_enabled as well, but that's not the correct state attribute to be used with this specific widget. The issue was what was mentioned in the answer: 1. The ordering was wrong (default state should be the last item in the selector) 2. state_checked is the correct state attribute to be used with BottomNavigationView. – Javad Dec 25 '16 at 14:04

score 1 · Answer 9 · edited May 05 '19 at 08:01

1

This will work:

setItemBackgroundResource(android.R.color.holo_red_light)

edited May 05 '19 at 08:01

tuomastik

4,559
5
36
48

answered May 05 '19 at 07:46

KUNAL DAS

23
6

score 1 · Answer 10 · answered Jan 13 '22 at 19:54

1

As the folder structure has changed, the tab_color.xml belongs to res > drawable now which can handle selectors. From there on the accepted solution works.

answered Jan 13 '22 at 19:54

Benedict Lang

103
1
4

score 0 · Answer 11 · answered May 09 '20 at 09:43

Instead of creating selector, Best way to create a style.

<style name="AppTheme.BottomBar">
    <item name="colorPrimary">@color/colorAccent</item> 
</style>

and to change the text size, selected or non selected.

<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>

Enjoy Android!

Selected tab's color in Bottom Navigation View

11 Answers11

Linked

Related