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>

score 3 · Answer 1 · edited Jul 23 '21 at 12:33

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

Where is the sel_navigation xml class – Vijendra patidar Jul 09 '21 at 07:48 — Vijendra patidar, Jul 09 '21 at 07:48
It is a regular color selector. – hohteri Jul 10 '21 at 08:58 — hohteri, Jul 10 '21 at 08:58

Kacper Kogut · Accepted Answer · 2018-09-27T11:10:23.863

1

Ok I managed to do this by using two different drawables, one with gradient tint and one for unselected in Bottom Navigation Menu.

I have created custom view that extends form BottomNavigationView, and I have created custom method for creating menu:

fun initMenu(){
    itemIconTintList = null
    var firstStart = true
    setOnNavigationItemSelectedListener {
        val index = it.itemId
        firstStart = false
        menu.forEach {
            if (it.isChecked && !firstStart) {
                if (it.itemId == index)
                    return
                it.isChecked = false
                it.icon = ContextCompat
                    .getDrawable(context, UNSELECTED_MAP[it.itemId]!!)
        }

    }
    it.icon = ContextCompat.getDrawable(context, SELECTED_MAP[it.itemId]!!)

}

Where UNSELECTED_MAP and SELECTED MAP are a HashMaps with item menu id as "key" and drawable resource as "value"

edited Sep 27 '18 at 11:10

answered Sep 20 '18 at 11:09

Kacper Kogut

707
6
15

@kacper can you please provide a detailed answer to this. I am also in the same situation and unable to figure out what to do – Tarun Kumar Sep 27 '18 at 05:11
@TarunKumar Sure, I have followed answers [in this thread](https://stackoverflow.com/questions/41826122/android-bottom-navigation-view-change-icon-of-selected-item) , if you still be facing this problem let me know, so I will copy my code here – Kacper Kogut Sep 27 '18 at 09:49
@KacperKogut, I have icon selected state icon with gradient and different icon for unselected state. But as I need to provide the icontint attribute in else, the icon is appearing white and the icontint attribute is not accepting gradient drawable. So I am unable to set the gradient icon in the bottomnavbar. I need to know how you achieved to set the gradient icon on the selected state.\ – Tarun Kumar Sep 27 '18 at 10:50
@TarunKumar, You can't do it this way. You have to create drawable for selected and for unselected state, and when user press the icon you have to change drawable not the color. I updated my anwser to show you how I did it – Kacper Kogut Sep 27 '18 at 11:12
1

@KacperKogut thanks a lot for your help. Now it's working – Tarun Kumar Sep 27 '18 at 11:17

score 0 · Answer 3 · answered Oct 21 '19 at 21:03

0

set color in java bottomNav.addItemNav(new ItemNav(this, R.drawable.ic_home, getResources().getString(R.string.home)).addColorAtive(R.color.yellow_selected_color).addColorInative(R.color.text_color));

answered Oct 21 '19 at 21:03

Ali Doran

378
1
12

Bottom navigation view - gradient icon tint

3 Answers3

Linked