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

Fer

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.

Pubescent

Best answer. After searching a lot on this problem, I got help from this answer. – Dimond

Thanks!!!! The only solution that worked after countless attempts. Make sure your vector drawable has no android:fillType="evenOdd". You might get compilation errors when setting a reference as fillColor – Ryals

Setting itemIconTintList to null programmatically works !! – Nore

This one works well for BottomNavigationView with BottomAppBar as parent. Applying Tint independently inn the vector xml itself is cool. – Litigation

This is the best answer, thank you so much, I have been working on this for about two days. This saved me lots of time. @Pubescent – Runner

After days of searching. The app finally matches the figma design. Thanks man. – Towny

Whilst this did remove the tint, it did so for all items, and when trying to reapply the tint to the other items pragmatically, it doesn't work. Changing the tint in the vector seems like a bad solution - what if you want to use that vector in other areas of your app with different tint? – Alagoas

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.

Fremitus

Bang Bang and Bang. Best answer ever seen in my life. +1. – Pernambuco

Tint is still applied for me. This didn't work. – Alagoas

Answer 3

Set the tint which is applied to our menu items' icons with "null" value this worked with me.

Boice

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Brubaker

perfect, good job. Images comes. :) – Marilou

Answer 4

Unlike Skytile said I found that you actually can change the tint of one menu item by using setIconTintMode(null) and you don't need to use setIconTintList

only works with android >= 26

Polyethylene

Answer 5

Mainly used this code when tab icon in multi color.

Below solution worked for me android:theme="@style/ActivityTranslucent" app:tabIconTintMode="multiply" app:tabIconTint="#ffffff" this three attribute mainly show your tab icon as it is.

                 <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tlProfile"
                    android:layout_gravity="bottom"
                    android:layout_width="match_parent"
                    android:layout_height="?actionBarSize"
                    android:background="#202026"
                    android:theme="@style/ActivityTranslucent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:tabIndicator="@drawable/ic_tab_indicator"
                    app:tabIndicatorColor="#1ed5cf"
                    app:tabIndicatorFullWidth="false"
                    app:tabIndicatorGravity="bottom"
                    app:tabIndicatorHeight="@dimen/_3sdp"
                    app:tabPaddingBottom="5dp"
                    app:tabIconTintMode="multiply"
                    app:tabIconTint="#ffffff"
                    app:tabPaddingTop="5dp"
                    app:tabRippleColor="@color/colorAccent">

                    <com.google.android.material.tabs.TabItem
                        android:id="@+id/tiSound"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:icon="@drawable/ic_sound_change"
                        android:text="" />


                    <com.google.android.material.tabs.TabItem
                        android:id="@+id/tiVideo"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:icon="@drawable/ic_video_change"
                        android:text="" />

                    <com.google.android.material.tabs.TabItem
                        android:id="@+id/tiLke"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:icon="@drawable/ic_like_change"
                        android:text="" />


                </com.google.android.material.tabs.TabLayout>

Mizzen

Answer 6

Add color resource folder in resources and put bottom_color_state in that folder and replace your bottom_color_state code as following

<?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:state_checked="false" android:color="@color/colorPrimaryDark"/>
</selector>

Eurythmics

Than how to use? @Chetan – Pragmatics