Change Navigation View Item Color Dynamically Android

Question

I'd like to build a navigation drawer where each item has a different selection color (the icon tint and text color) as the google play store has:

I'm not sure how they've solved this, I think they use different activities with different drawers. I want to use fragments and I want to change the icon tint and text color. Any ideas how I can do this? I'm using google's design support library and a drawer layout with a navigation view in there.

Literature

It's possible they didn't use the NavigationView, since this was in the app way before the design support library (if I recall correctly). I think you have the recreate the view yourself to achieve this effect. – Cisalpine

@tom. did you get a solution, you seemed to have accepted the answer but it is not working for me. – Cheat

Answer 1

use app:itemIconTint in your NavigationView for icons and use app:itemTextColor for textColors

Sample :

drawable/navigation_text_color :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is used when the Navigation Item is checked -->
    <item android:color="#009688" android:state_checked="true" />
    <!-- This is the default text color -->
    <item android:color="#E91E63" />
</selector>

and layout :

<android.support.design.widget.NavigationView
       .
       .
       app:itemTextColor="@drawable/navigation_text_color"/>

Unreasoning

thanks, I'm now changing the ColorStateList each time a menu item has been clicked. – Literature

Where would you put this selector XML snippet? Also, app:itemTextColor changes the color of all the icons. Is there a way to change just one icon's color? Thanks! – Obscurity

@Obscurity I'm changing it every time an item is selected with the following java code: jsfiddle.net/a2j7jayo – Literature

@Obscurity no, in material design concepts, in navigation view, all icons must be one color – Unreasoning

@D.A.V.O.O.D so u don't use inbox for example ? Some icons has different colors even if they are not the "checked" one. I think that's what justinrixx want to achieve (and so do i). – Timehonored

has anyone got the answer to this? i am facing the same issue? – Cheat

@ParthAnjaria what issue ? – Unreasoning

i wasnt able to change the color, but later i got the solution, i have added my solution that works for me – Cheat

@ParthAnjaria your answer change all colorAccent of theme ! this answer works, i updated answer to know better – Unreasoning

I placed this file in res/color. Also you can define app:itemIconTint for icons. – Sutherlan

Answer 2

If by dynamically you mean programmatically you could try this:

// FOR NAVIGATION VIEW ITEM TEXT COLOR
int[][] states = new int[][]{
        new int[]{-android.R.attr.state_checked},  // unchecked
        new int[]{android.R.attr.state_checked},   // checked
        new int[]{}                                // default
};

// Fill in color corresponding to state defined in state
int[] colors = new int[]{
        Color.parseColor("#747474"),
        Color.parseColor("#007f42"),
        Color.parseColor("#747474"),
};

ColorStateList navigationViewColorStateList = new ColorStateList(states, colors);

// apply to text color
navigationView.setItemTextColor(navigationViewColorStateList);

// apply to icon color
navigationView.setItemIconTintList(navigationViewColorStateList);

So you could define multiple colors for different settings like Day or Night.

Endophyte

Answer 3

You can do that programmatically using

MenuItemCompat.setIconTintMode(item, PorterDuff.Mode.DST)

where item is a MenuItem you do not need a tint for.

Grimaldi

This is the perfect solution! Please upvote as this should not be here at the bottom! – Cavalryman

But this required at least API levels >= 26 – Reliance

@Reliance no. It works in my API 21+ project – Grimaldi

Answer 4

Finllay i got the answer,

You must change the colorAccent in the colors file to which ever color you want :

  <color name="colorAccent">whichever color required</color>

This solution worked for me

Cheat

Answer 5

    <android.support.design.widget.NavigationView
           .
           .
           app:itemIconTint="@color/your_selector_file_name" // for Icon
        app:itemTextColor="@color/your_selector_file_name" // for text
/>

Adding to what @DAVOOD said. The below color selector worked for me.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- This is used when the Navigation Item is checked -->
        <item android:color="@color/tenoBrandColor" android:state_pressed="true" />
        <!-- This is the default text color -->
        <item android:color="@color/textprimary" />
</selector>

Solarize

Answer 6

There's a simpler option for the lazy ones out there.

TL;DR: Just create a new style with the colorPrimary being your desired color and then set the NavigationView's theme to be this new style.

Just make a new style as:

<style name="AppTheme.NoActionBar.NavigationView">
    <item name="colorPrimary">@color/myDesiredColor</item>
</style>

This style will automatically inherit from your base theme (on my case it was AppTheme.NoActionBar) and then you just have to set the colorPrimary with your desired color.

Then you just have to set the NavigationView's theme as:

android:theme="@style/AppTheme.NoActionBar.NavigationView"

in:

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_menu_test"
    app:menu="@menu/main_drawer"
    android:theme="@style/AppTheme.NoActionBar.NavigationView" /> 

Hube