How to show menu item icon without tint color in BottomNavigationView

Question

I have created a BottomNavigationView with three items. One of it was user tab.

For the guest tab, there is an image but the TintColor is applying and we can't see that.

So how to remove tint colour for that particular item?

I have tried

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                            item.setIconTintList(null);

                        }

But no luck. And it applies to above api 26

My activity

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:itemIconTint="@drawable/bottom_color_state"
    app:itemBackground="@color/colorAccent"
    app:itemTextColor="@drawable/bottom_color_state"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/menu_bottom_navigation" />

bottom_color_state.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/white" android:state_enabled="true" />
        <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
        <item android:color="@color/white" android:state_selected="true" />
        <item android:color="@color/off_white" android:state_selected="false" />
        <item android:color="@color/white" android:state_checked="true" />
        <item android:color="@color/off_white" android:state_checked="false" />
        <item android:color="@color/off_white" />
    </selector>

Thanks in advance

Answer 1

It appears there's no way to change the tint of just one menu item because the BottomNavigationView applies the tint to every item in the list from a wrapper drawable. You'll need to remove the tint list from the nav view and set your tint list on each of your menu item icons individually.

navView.itemIconTintList = null

Then in each of the menu item icons you want to tint, set your color state list on the vector drawable.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="@color/bottom_color_state"
        android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z"/>
</vector>

I tested the solution as far back as API 21.

Answer 2

I know this thread is fairly old, but maybe the answer can help some people stumbling upon the thread anyway.

We had the same problem (using NavigationView instead of BottomNavigationView) and for some reason Skytile's solution didn't work for us.

As Skytile pointed out, it is not possible (at least on API levels < 26) to set a custom tint list on individual items. However, it is possible to set the tint mode:

val itemsWithoutTint: List<Int> = listOf(12345)
for (i in 0 until getMenu().size()) {
    val item = getMenu().getItem(i)
    if (item.itemId in itemsWithoutTint) {
        MenuItemCompat.setIconTintMode(item, PorterDuff.Mode.DST)
    }
}

By setting the TintMode to DST (https://developer.android.com/reference/android/graphics/PorterDuff.Mode), the source (in this case the tint color) is ignored and the destination (the icon to be tinted) is left untouched.