Selected tab color as bottom navigation

Question

I add a BottomNavigationView to the project and would like to have a different text color (and icon hue) for the selected tab (to achieve the effect of the BottomNavigationView tabs). Using a different color with android:state_selected="true" in the color selector resource file does not seem to work. I also tried to have additional element entries with android:state_focused="true" or android:state_enabled="true" , unfortunately android:state_enabled="true" . Also tried to set the state_selected attribute to false (explicitly) for the default color ( state_selected ), but to no avail.

Here is how I can add a 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 be grateful for any help.

Answer 1

When creating a selector always keep the default state at the end, otherwise only the default state will be used. You need to change the order of the elements in the 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 the BottomNavigationBar is state_checked not state_selected .

Answer 2

1. Inside res, create a folder called color (for example, drawable)

2. Right-click on the 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:

Answer 3

BottomNavigationView uses colorPrimary from the theme applied to the selected tab, and uses android:textColorSecondary to tint the inactive tab.

That way, you can create a style with your preferred primary color and set it as the theme for your BottomNavigationView in the 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" /> 

Answer 4

Try using android:state_enabled instead of android:state_selected for the attributes of the selector element.

Answer 5

If you want to change the colors of the icons and text programmatically:

 ColorStateList iconsColorStates = 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") }); ColorStateList textColorStates = 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(iconsColorStates); navigation.setItemTextColor(textColorStates); 

Answer 6

It is too late to answer, but useful for everyone. I made a very stupid mistake, I used bottom_color_nav.xml to select and deselect the color change. BottomNavigation still doesn't get the right color.

Then I understand that I was returned false in the onNavigationItemSelected method , which was only released with my code.

Answer 7

This will work:

 setItemBackgroundResource(android.R.color.holo_red_light)