How do I change the color of the hamburger menu icon?

Question

First of all, I'd like to clarify that I'm willing to change the color of the Hamburger nav menu icon itself, and not the icons within the nav menu.

I followed this tutorial: https://developer.android.com/training/implementing-navigation/nav-drawer#DrawerButton

As a result, I have a NavMenu Icon (Hamburger) within the app bar. Problem: The icon is black (the default color of the Vector drawable).

I created a new style:

<!-- Hamburger menu -->
<style name="MyDrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@color/colorTextTitle</item>
</style>

I then added this style to my theme:

<style name="customTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Hamburger menu -->
    <item name="drawerArrowStyle">@style/MyDrawerArrowToggle</item>
</style>

Made sure this style was the one used by my app in the manifest:

<application>
    android:theme="@style/customTheme"
</application>

And also applied this theme to the toolbar (just in case...)

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorToolbarBackground"
            app:theme="@style/customTheme"
            app:popupTheme="@style/customTheme"
            app:title="@string/app_name"
            app:titleTextColor="@color/colorTextBody">

        </android.support.v7.widget.Toolbar>
    </FrameLayout>

Result of the operation: None of this had any effect. The hamburger icon remains desperately black.

Would any of you be able to explain to me what mistake I made and how I can change this color?

score 6 · Answer 1 · answered Mar 14 '19 at 17:54

I recommend you take a look at the sample provided by Google/Android Studio.

Create a new project called test-hamburger (name optional ;-) )
Select the "Drawer" template obviously. I didn't check "Use AndroidX" but should work.
I selected MinAPI 23/Target 28.

After you have the sample app, run it and observe toolbar is green and text/tint is white.

Open values/styles.xml (not the v21 version, f**c those) :)

This is how the existing theme looks:

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

You need to add this line to it: <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

And of course, define the style:

    <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/holo_red_dark</item>
    </style>

All in all, your style should now look like:

    <!-- 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>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/holo_red_dark</item>
    </style>

Which, when run, looks like:

Thank you for this detailed answer. I just did this, and it works. I then proceeded to do it again using API lvl 21 (the one I use in my project), and it still works (so at least I know that's not the problem). I'll keep messing with this hamburger project, and try to find the proper way to implement my theme. — Eric, Mar 14 '19 at 20:28
Make sure you use the right parent in your styles, it's very important: `parent="@style/Widget.AppCompat.DrawerArrowToggle"` is not the same as `parent="Widget.AppCompat.DrawerArrowToggle"` — Martin Marconcini, Mar 14 '19 at 21:32

score 0 · Answer 2 · answered Mar 14 '19 at 18:25

Use this as the style of your toolbar

<style name="Toolbar">
    <item name="android:textColorPrimary">@color/colorAccent</item>
    <item name="android:textColor">@color/colorAccent</item>
    <item name="android:textColorSecondaryInverse">@color/colorAccent</item>
    <item name="android:textColorSecondary">@color/colorAccent</item>
</style>

I hope it helps

How do I change the color of the hamburger menu icon?

2 Answers2