In our last post we showed you how to create a bottom navigation bar in Android using BottomNavigationView. BottomNavigationView. But how to easily change the color of menu item and text of the menu items in the bottom navigation view. It is very easy and simple to change the color of menu items and text and in this post as a sequel to the previous one we will show you how to do this.
First you need to create a new Drawable Resource file with selector as a root element. We will name it bottom_nav_item_color. In this file we will set the color of the item and the text in two situations, when the item is checked and when it isn’t checked. The code in this file will look like this:
|
1 2 3 4 |
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/colorPrimary" /> <item android:state_checked="false" android:color="@color/colorAccent"/> </selector> |
We’ve added primary and accent but you can add any color. Next in the layout where you are using the BottomNavigationView element you need to add two more lines in the element:
|
1 2 |
app:itemTextColor="@drawable/bottom_nav_item_color" app:itemIconTint="@drawable/bottom_nav_item_color" |
Now our our BottomNavigationView will look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/nav_view" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="0dp" android:layout_marginEnd="0dp" android:background="@color/colorLightGray" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:itemTextColor="@drawable/bottom_nav_item_color" app:itemIconTint="@drawable/bottom_nav_item_color" app:menu="@menu/bottom_nav_menu" /> |
And that’s it, the color of the icon and the text in the menu items in our bottom navigation bar is changed.
Happy coding!