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.

try to `app:itemIconTint="@android:color/blue"` to your `navigation View` — M D, Oct 29 '15 at 06:39
[http://stackoverflow.com/questions/30967851/change-navigation-view-item-color-dynamicly-android](http://stackoverflow.com/questions/30967851/change-navigation-view-item-color-dynamicly-android) — M D, Oct 29 '15 at 06:41

Ojonugwa Jude Ochalifu · Accepted Answer · 2016-10-26T17:02:32.753

155

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" />

edited Oct 26 '16 at 17:02

answered Oct 29 '15 at 07:15

Ojonugwa Jude Ochalifu

26,627
26
120
132

2

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 – Rohan Oct 02 '16 at 13:36
You welcome...But am not sure how you can achieve this.Sorry – Ojonugwa Jude Ochalifu Oct 02 '16 at 19:18
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? – user25 Feb 02 '19 at 21:40
@user25 I don't know how that was accomplished, sorry. – Ojonugwa Jude Ochalifu Feb 02 '19 at 23:21
2

You will find your `NavigationView` into **menu** folder then just put `app:itemIconTint="#000000"` Note: "#000000" **You can change whatever color you want** – Forhad Mar 10 '19 at 08:33

score 52 · Answer 2 · edited Oct 23 '19 at 16:48

52

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>

edited Oct 23 '19 at 16:48

Community

1
1

answered May 12 '16 at 12:15

Pablo Cegarra

20,955
12
92
110

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. – Akhilesh Jul 04 '21 at 19:21

Benjamin Corben · Answer 3 · 2020-02-28T07:38:49.663

7

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

edited Feb 28 '20 at 07:38

answered Nov 27 '19 at 13:39

Benjamin Corben

277
3
10

score 5 · Answer 4 · answered May 28 '20 at 21:43

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.

score 4 · Answer 5 · answered Oct 26 '17 at 11:03

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.

Reejesh PK · Answer 6 · 2019-01-20T19:22:04.017

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.

score 2 · Answer 7 · answered May 15 '20 at 01:46

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>

score 2 · Answer 8 · answered Apr 05 '22 at 09:34

2

Just use this code:

navigationView.setItemIconTintList(null);

answered Apr 05 '22 at 09:34

Hridoy Krisna Das

159
7

score 0 · Answer 9 · edited Nov 15 '21 at 12:36

0

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

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

edited Nov 15 '21 at 12:36

Antoine

1,393
4
20
26

answered Nov 15 '21 at 06:24

Ali Raza Khan

181
1
4

score -1 · Answer 10 · answered Mar 02 '16 at 09:04

-1

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

answered Mar 02 '16 at 09:04

Parth Anjaria

3,961
3
30
62

score -1 · Answer 11 · answered Jul 02 '20 at 07:02

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" />

Change color of Navigation Drawer Icon in Android Studio default template

11 Answers11

Linked