BottomNavigationView Original icon color

Question

I have my bottomNavigationView :

And i added this class to prevent it from doing shiftingMode :

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                //item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }

I just want to show the original icons colors without this selector, how i can reach this ?

my navigation xml :

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/my_navigation_item"
        android:layout_alignParentBottom="true"/>

Solution 1

Our use case was a multicolored icon when the tab is active and a grey one when it is not. Setting itemIconTintList to null made the inactive tab icons have the same colors as the active ones when using the material component BottomNavigationView.

So we had to do this in addition:

menu_bottom_navigation.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/first_tab"
        android:enabled="true"
        android:icon="@drawable/ic_first_tab_selector"
        android:title="@string/first_tab_title"/>
    <item
        android:id="@+id/second_tab"
        android:enabled="true"
        android:icon="@drawable/ic_second_tab_selector"
        android:title="@string/second_tab_title"/>
</menu>

ic_first_tab_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_first_tab_inactive" android:state_selected="false" />
    <item android:drawable="@drawable/ic_first_tab_active" android:state_selected="true" />
</selector>

Where ic_first_tab_inactive.xml is the drawable for your inactive icon and ic_first_tab_active.xml is the drawable for your active icon.

Solution 2

Here How you would do if you are using Kotlin Find your navigation Id From your Main Activity then in your mainActivity onCreat Use This Code

 my_navigation_item.itemIconTintList = null

Solution 3

You are able to use app:itemIconTint from xmlns:app="http://schemas.android.com/apk/res-auto"

For example

<android.support.design.widget.BottomNavigationView
    //...
    app:itemIconTint="@color/gray_scale"
    //...
/>

It is handy when your drawables have different colors

Comments

[NightSkyDev]

Thanks for your solution, it works! I tried adding: app:itemIconTint="@null" to the XML, but it doesn't work.

[jpp]

Your explanation is unclear and doesn't seem to add anything to this accepted and upvoted answer.

[coder]

life saver!! :)

[CCJ]

Why does this work? I figured my app:itemIconTint might be the problem, but when I omit that attr from the XML the unselected icons don't show up at all unless I also call setItemIconTintList(null). How is calling setItemIconTintList(null) different from not specifying an icon tint at all?

[Alex Zhulin]

Thank you, you saved me a lot of time