Change color of Navigation Drawer Icon in Android

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.

Answer 1

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.

Answer 2

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

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

Answer 4

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

Answer 5

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.

Answer 6

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>