Why i can't change icon color and text bottom navigation with gradient color android

Question

I want to make color like example image. but I found a problem when changing icons and text using the color gradient because the attributes in the bottom navigation only accept color. Please Help me god bless you.

https://i.stack.imgur.com/9FHeb.jpg

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:theme="@style/Widget.BottomNavigationView"
    android:background="@drawable/bg_bottom_nav"
    app:itemIconTint="@drawable/bottom_nav_icon_color_selector"
    app:itemTextColor="@drawable/bottom_nav_icon_color_selector"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:itemIconSize="22dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

https://stackoverflow.com/questions/52420262/bottom-navigation-view-gradient-icon-tint — Sana Ebadi, Sep 11 '19 at 09:35
also see this https://material.io/develop/android/components/bottom-navigation-view/ (Handling States) — Phil90, Sep 11 '19 at 09:39

score 1 · Accepted Answer · answered Jul 20 '21 at 11:51

After many hours of trying to make the text gradient, I was finally able to achieve this effect. The point is to reach the MaterialTextView inside BottomNavigationItemView. This is the code I use in onCreate() method of the activity (Kotlin):

for (bottomNavigationItem in binding.bottomNavigation[0] as BottomNavigationMenuView) {
            (((bottomNavigationItem as BottomNavigationItemView)
                .getChildAt(1) as BaselineLayout)
                .getChildAt(1) as MaterialTextView)
                .setGradientText()
        }

setGradientText() method simply decorates text. In your case you need to add third color and setup angle:

fun MaterialTextView.setGradientText() {
    paint.shader = LinearGradient(
        0f,
        0f,
        paint.measureText(text.toString()),
        textSize,
        intArrayOf(
            ContextCompat.getColor(context, R.color.main_gradient_start),
            ContextCompat.getColor(context, R.color.main_gradient_end)
        ),
        null, Shader.TileMode.CLAMP
    )
}

This code will decorate every element in bottom navigation and they only will be gradient when the element is selected. I'm not sure if it is possible to make gradient work on active and inactive elements at the same time.

Also, if you need code of my BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:itemTextColor="@drawable/bottom_menu_selector"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_menu" />

In conclusion, this is the best result I've reached now: Gradient text

About icons: you need to create selectors for your icons and add them to your menu file like this:

Sample selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Icon active gradient -->
    <item android:drawable="@drawable/ic_home_color" android:state_pressed="true"/>
    <item android:drawable="@drawable/ic_home_color" android:state_checked="true"/>
    <!-- Icon default -->
    <item android:drawable="@drawable/ic_home"/>
</selector>

Menu file

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/home_selector"
        android:title="@string/home" />
    <item
        android:id="@+id/catalogue"
        android:icon="@drawable/catalogue_selector"
        android:title="@string/catalogue" />
    <item
        android:id="@+id/collections"
        android:icon="@drawable/collections_selector"
        android:title="@string/collections" />
    <item
        android:id="@+id/profile"
        android:icon="@drawable/profile_selector"
        android:title="@string/profile" />
</menu>

score 0 · Answer 2 · answered Sep 20 '19 at 02:39

I am also doing this, for the gradient icon, I use 2 images. As for the text gradient, I'm still looking for a way.

Icon Gradient:

drawable/ic_home.xml: icon

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Icon active gradient -->
    <item android:drawable="@drawable/icon_home_active" android:state_pressed="true"/>
    <item android:drawable="@drawable/icon_home_active" android:state_checked="true"/>
    <!-- Icon default -->
    <item android:drawable="@drawable/icon_home"/>
</selector>

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />
    ....
</menu>

And in Activity, add the following code:

bottomNavView.setItemIconTintList(null);

Why i can't change icon color and text bottom navigation with gradient color android

2 Answers2