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?

Answer 1

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

Answer 2

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

1. Create a new project called test-hamburger (name optional ;-) )
2. Select the "Drawer" template obviously. I didn't check "Use AndroidX" but should work.
3. 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: