Selected tab's color in Bottom Navigation View
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
.
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:
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" />