CODEWITHSUNDEEP
androidmaterial-designgradientbottomnavigationview
Kacper Kogut
Kacper Kogut

Reputation: 735

Bottom navigation view - gradient icon tint

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. enter image description here 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>

Upvotes: 3

Views: 6620

Answers (3)

hohteri
hohteri

Reputation: 184

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

Upvotes: 3

Ali Doran
Ali Doran

Reputation: 566

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));

Upvotes: 0

Kacper Kogut
Kacper Kogut

Reputation: 735

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"

Upvotes: 1

Related Questions