Bottom navigation view - gradient icon tint

Question

I have changed icon tint in BottomNavigationView using selector and gradient color as tint when icon is pressed, but instead changing icon tint to gradient Android made all my icon purple. My question is if there is any possibility to change tint of icons in BottomNavigationView to be gradient color?

BottomNavigationCode:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_bottom_main"
        android:layout_width="match_parent"
        app:itemIconTint="@color/bottom_menu_background"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_main"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

bottom_menu_background:

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/button_gradient_blue" android:state_checked="true" />
     <item android:color="@color/baseGray"/>
 </selector>

button_gradient_blue:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <gradient android:angle="0" android:startColor="@color/light_blue_gradient_start"
            android:endColor="@color/light_blue_gradient_end"  />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <solid android:color="@color/button_pressed_color"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <gradient android:angle="0" android:startColor="@color/light_blue_gradient_start"
            android:endColor="@color/light_blue_gradient_end" />
        </shape>
    </item>
</selector>

Answer 1

A more simple way to achieve this than creating a subclass is to create two separate drawable, then create a selector assigned as the icon for the menu for the bottom navigation view.

activity.xml:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    app:itemIconTint="@drawable/sel_navigation"
    app:itemTextColor="@drawable/sel_navigation_label"
    app:menu="@menu/navigation" />

menu/navigation.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/navigation_history"
    android:icon="@drawable/ic_history_selector"
    android:title="@string/title_history" />
</menu>

drawable/ic_history_selector.xml:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_history_selected" android:state_pressed="true" />
<item android:drawable="@drawable/ic_history_selected" android:state_checked="true"/>
<item android:drawable="@drawable/ic_history"/>
</selector>

drawable/ic_history.xml:

<vector ...>
<path android:fillColor="@color/gradient_orange" .../>
</vector>

color/gradient_orange.xml:

<gradient xmlns:android="http://schemas.android.com/apk/res/android"
android:angle="0"
android:endColor="@color/orange"
android:startColor="@color/lightOrange"
android:startX="0"
android:endX="0"
android:startY="0"
android:endY="100"
android:type="linear" />

Finally, you need to set the icon tint list to null, so it won't use the icon tint color from the XML. Works perfectly with gradients (API 24+).

See: https://stackoverflow.com/a/47203888