Change color of Navigation Drawer Icon in Android Studio default template

Question

The new default Navigation Drawer Activity template in Android Studio

defines its titles and icons in a menu file activity_main_drawer like this:

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_camara"
        android:icon="@drawable/ic_action_emo_cool"
        android:title="Import" />
    <item
        android:id="@+id/nav_gallery"
        android:icon="@android:drawable/ic_menu_gallery"
        android:title="Gallery" />
    <item
        android:id="@+id/nav_slideshow"
        android:icon="@android:drawable/ic_menu_slideshow"
        android:title="Slideshow" />
        ...

The first item in my example uses a red icon:

but when I run the app, the color of the icon remains black.I have tested this for blue, green, yellow and purple icons, but the result is the same.

I read somewhere that the toolbar should use ThemeOverlay.AppCompat.Dark.ActionBar and my app already uses this in the styles.xml file:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

Initially I thought this had something to do with Android Studio's cache feature so I invalidated cache and restarted Android Studio with no luck.

Mistrot

try to app:itemIconTint="@android:color/blue" to your navigation View – Vitelline

https://mcmap.net/q/281988/-change-navigation-view-item-color-dynamically-android – Vitelline

Answer 1

Based on @MD's comment, all I needed to do was add:

app:itemIconTint="@color/my_desired_colour"

to NavigationView (it is located in activity_main.xml layout file) The default tint is black but you can use an even darker shade of black by using #000000

 <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_main"
    app:itemIconTint="#000000"
    app:menu="@menu/activity_main_drawer" />

Mistrot

thanks :) How would I go about having a tint set for all the icons but one. For one particular icon, i want the tint set to null (i.e.) one particular menu item icon appears in its full color in all states – Budweis

You welcome...But am not sure how you can achieve this.Sorry – Mistrot

What about different colors for each item? Google Play has navigation with such items or they just use PNG for colored items and vector drawables for other items? – Uund

@Uund I don't know how that was accomplished, sorry. – Mistrot

You will find your NavigationView into menu folder then just put app:itemIconTint="#000000" Note: "#000000" You can change whatever color you want – Bugg

Answer 2

Create a new style:

<style name="DrawerIconStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/red</item>
</style>

and in your theme, add this line:

<item name="drawerArrowStyle">@style/DrawerIconStyle</item>

Bluey

This worked for me perfectly. I needed to change drawer icon (three bars and arrow) color and it allowed me to do the change in first go. – Assortment

Answer 3

If you want to set it dynamically you can use:

ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open_drawer, R.string.close_drawer);

actionBarDrawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.colorAccent));

Bub

Answer 4

I called this method navigationView.setItemIconTintList(null); in the onCreate so that i can override the default color of the icon items in navigation drawer like this

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_places);
    drawer = findViewById(R.id.drawer_layout);
    NavigationView navigationView = findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
    navigationView.setItemIconTintList(null);
}

Then i changed the color of each icon in navigation drawer using this android:iconTint="@color/metallic_blue" in activity_places_drawer.xml

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

<group android:checkableBehavior="single">
    <item
        android:id="@+id/invite"
        android:icon="@drawable/ic_people_orange_24dp"
        android:title="@string/menu_invite"
        android:fontFamily="@font/roboto_medium" />
</group>

Hope this answer helps.

Eyrir

Answer 5

Just use this code:

navigationView.setItemIconTintList(null);

Pout

Thank you! Now my icons are colorful again. – Margo

Answer 6

Based on @ojonugwa ochalifu and @MD's comment,

You can achieve by writing app:itemIconTint but if you write this, the navigation drawers icon color will also be changed. The simple and easy solution that I found after lots of R&D is that you have define <item name="colorControlNormal">#FFE730</item> in theme of AppBarLayout or if you using Toolbar only without AppBarLayout, you can also write <item name="colorControlNormal">#FFE730</item> in theme or popupTheme of Toolbar in your xml.

This will also change the color of activity's back arrow as well.

Hope this helps you all who are facing this type of issue.

Papillon

Answer 7

In my case, I was having a style

 <style name="MyToolbarStyle" parent="Theme.AppCompat">
     <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
     <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
 </style>
 <style name="ActionButtonOverflowStyle">
        <item name="android:color">@color/colorPrimary</item>
    </style>
    <style name="DrawerArrowStyle">
        <item name="android:color">@color/colorPrimary</item>
    </style>

and have applied the theme to the Appbar layout, so programatically chaining color didn't work.

So, try removing any styles that you applied, in case you are not able to change the color of the icon and then try the above given solutions.

Amelia

Answer 8

This works for me for changing icon color from the menu xml file which you drag in the app:menu attribute of the NavigationView widget.

Use app:iconTint attribute to set the icon color.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/..."
        android:icon="@drawable/ic_person_black_24dp"
        android:title="..."
        app:iconTint="#FFEB3B" />
    <item
        android:id="@+id//..."
        android:icon="@drawable/ic_settings_black_24dp"
        android:title="..."
        app:iconTint="#FFEB3B" />

    <item
        android:id="@+id//..."
        android:icon="@drawable/logout"
        android:title="..."
        app:iconTint="#FFEB3B"/>
</menu>

Topping

Answer 9

add itmIconTint in navigation view

    <com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="@drawable/drawerbackgtound"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:itemTextColor="@color/white"
    app:iconTint="#FFFFFF"
    app:itemIconTint="#FFFFFF"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

Sicyon

Answer 10

I have changed my drawer menu icon color by doing this line of code:

actionBarDrawerToggle.getDrawerArrowDrawable()
                     .setColor(getResources().getColor(R.color.colorAccent));

Zolazoldi

Answer 11

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

Fingernail