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

score 32 · Answer 1 · answered Apr 03 '19 at 03:35

32

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.

answered Apr 03 '19 at 03:35

Skytile

589
5
10

1

Best answer. After searching a lot on this problem, I got help from this answer. – kid.abr Dec 04 '19 at 06:10
1

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 – reavcn Dec 23 '19 at 16:50
Setting itemIconTintList to null programmatically works !! – YuTang Feb 26 '20 at 14:43
This one works well for BottomNavigationView with BottomAppBar as parent. Applying Tint independently inn the vector xml itself is cool. – Jashan PJ Sep 03 '21 at 11:04
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. @Skytile – danial iranpour Dec 04 '21 at 08:44
After days of searching. The app finally matches the figma design. Thanks man. – OtienoSamwel May 06 '22 at 13:33
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? – JCutting8 Jul 19 '23 at 07:36

score 7 · Answer 2 · answered Jul 20 '21 at 11:49

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.

Bang Bang and Bang. Best answer ever seen in my life. +1. – Sambhav Khandelwal May 10 '22 at 11:50 — Sambhav Khandelwal, May 10 '22 at 11:50
Tint is still applied for me. This didn't work. – JCutting8 Jul 19 '23 at 05:59 — JCutting8, Jul 19 '23 at 05:59

score 1 · Answer 3 · edited Mar 16 '23 at 15:47

1

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

edited Mar 16 '23 at 15:47

Boken

4,825
10
32
42

answered Oct 20 '21 at 23:40

Mohamed Elmahalwy

11
1
2

1

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](/help/how-to-answer). – Community Oct 21 '21 at 03:04

score 0 · Answer 4 · answered Jun 10 '19 at 23:29

0

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

answered Jun 10 '19 at 23:29

SuperGenedy

1
1

score 0 · Answer 5 · answered Nov 21 '20 at 08:59

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>

score -1 · Answer 6 · answered Aug 23 '18 at 11:18

-1

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>

answered Aug 23 '18 at 11:18

Chetan Shelake

656
1
6
14

1

Than how to use? @Chetan – Himani Jul 21 '21 at 09:17

How to show menu item icon without tint color in BottomNavigationView

6 Answers6

Linked