Changing Single Item Tint On Bottom Navigation View In Android (XML)

Photo by Adrien on Unsplash

Most of the applications have a bottom navigation bar to navigate between different pages of the application. Of course, each of the applications has its own design and color scheme. Due to their custom color schemes, applications often require custom tint colors for the icons in the bottom navigation view. While setting the tint color for the entire bottom navigation view is easy. Changing the tint color of a single item in the bottom navigation view is a bit tricky. In this article, we will learn how to change the tint color of a single item in the bottom navigation view on Android.

Changing the tint color of a single item in the bottom navigation view is not as straightforward as changing the tint color of the entire bottom navigation view. To understand the issue, lets examine some attempts to change the tint color of a single item in the bottom navigation view.

First Attempt

A very common approach to changing the tint color of a single item in the bottom navigation view is to use the ‘setItemIconTintList` method of the bottom navigation view. This method allows you to set a color state list for the icons of the bottom navigation view. For example, let’s assume we have a bottom navigation view as shown below:

  <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@drawable/bottom_navigation_color_selector"
        app:itemTextColor="@drawable/bottom_navigation_color_selector"
        android:layout_alignParentBottom="true"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/navigation" />

And the `bottom_navigation_color_selector.xml` file is as shown below:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#18A7FB" android:state_checked="true"/>
    <item android:color="#18A7FB" android:state_pressed="true"/>
    <item android:color="?attr/colorOnSurface"/>
</selector>

Then we can set the tint color of the bottom navigation view as shown below:

binding.navigation.itemIconTintList = ColorStateList.valueOf(resources.getColor(R.color.red, theme))

After executing the above code, the tint color of all the items in the bottom navigation view will be changed to red. However, this is not what we want. We want to change the tint color of a single item in the bottom navigation view.

Second Attempt

You may also try colored icons in the menu resource file. Then, setting the tint of the icons to null in the bottom navigation view.

binding.navigation.itemIconTintList = null

Assuming that the icon of interest uses red as fill color, like this:

<vector 
    android:height="24dp"
    android:tint="#000000"
    android:viewportHeight="24"
    android:viewportWidth="24"
    android:width="24dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
>
    <path android:fillColor="@color/red" android:pathData="..."/>
</vector>

Then, we get the end result as such:

This solution partially works for the icons we want to change the tint color. However, it breaks other icons in the bottom navigation view.

Better solution

A better but indirect approach is to find the menu item and change its tint color individually. This can be done by iterating through the menu items and changing the tint color of the desired item. The code snippet below demonstrates how to change the tint color of a single item in the bottom navigation view:

 binding.navigation.menuView
    .safeCast<NavigationBarMenuView>()
    ?.children
    ?.find { it.id == R.id.navigation_challenges }
    ?.safeCast<BottomNavigationItemView>()
    ?.apply {
        setIconTintList(ColorStateList.valueOf(resources.getColor(R.color.red, theme)))
    }

fun<T> Any.safeCast(): T? {
    return this as? T
}   

After executing the above code, the tint color of the desired item in the bottom navigation view will be changed to red.

This solution is even suitable for the icons with various colors. By setting tint color to null, the original color of the icon will be preserved. For example, we have used this approach in Wannawell application. Take a look below:

As you can see, we can keep the colors of the My Day icon while keeping the theme tint on other icons.

Conclusion

In this article, we have learned how to change the tint color of a single item in the bottom navigation view in Android. We have seen that changing the tint color of a single item in the bottom navigation view is not as straightforward as changing the tint color of the entire bottom navigation view. Hope this article helps you to customize the bottom navigation view in your application.

LinkedIn

Love you all.

Stay tune for upcoming blogs.

Take care.