How to change color of hamburger icon in material design navigation drawer

Question

I am following this example

http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

and in this example it is showing hamburger icon white,i want to customize it and make it black,but i am not able to find anything to how to change it,can any one tell how to customize it?

Manifest

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialdesign" >


    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

style

<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="homeAsUpIndicator">@drawable/hamburger</item>
    </style>

</resources>

MainActivity

public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener {

    private static String TAG = MainActivity.class.getSimpleName();

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);

        // display the first navigation drawer view on app launch
        displayView(0);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        if(id == R.id.action_search){
            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {
        displayView(position);
    }

    private void displayView(int position) {
        Fragment fragment = null;
        String title = getString(R.string.app_name);
        switch (position) {
            case 0:
                fragment = new HomeFragment();
                title = getString(R.string.title_home);
                break;
            case 1:
                fragment = new FriendsFragment();
                title = getString(R.string.title_friends);
                break;
            case 2:
                fragment = new MessagesFragment();
                title = getString(R.string.title_messages);
                break;
            case 3:
                fragment = new ContactUsFragment();
                title = getString(R.string.title_contactus);
                break;
            case 4:
                fragment = new AboutUsFragment();
                title = getString(R.string.title_aboutus);
                break;
            default:
                break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.container_body, fragment);
            fragmentTransaction.commit();

            // set the toolbar title
            getSupportActionBar().setTitle(title);
        }
    }

Solution 1

To change color of hamburger icon you have to open "style.xml" class, then try this code:

<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

</style>

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <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/black</item>
</style>

So check <item name="color">@android:color/black</item> line. Just change your desired color here.

Solution 2

do it programmatically add this line

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

Solution 3

1.In Color.xml.<color name="hamburgerBlack">#000000</color>

2.In style.xml.

<style name="DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/hamburgerBlack</item>
    </style>

3. Then your main theme class(File name style.xml).I have “AppTheme”.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         <item name="drawerArrowStyle">@style/DrawerIcon</item>
    </style>

Solution 4

Overriding colorControlNormal also works.

<item name="colorControlNormal">@android:color/holo_red_dark</item>

Solution 5

For that you can proceed as follows:

protected ActionBarDrawerToggle drawerToggle;

drawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.black));

View more solutions

Comments

[Anand Singh]

anyway you can check this github.com/codepath/android_guides/wiki/… link. It have good tutorial.

[Anand Singh]

so write above code in your MainActivity , it will work.

[Aditya]

but its not allowing for download

[Aditya]

Let us continue this discussion in chat.

[OlivierM]

That's is a pretty hacky and hard to maintain way.. I'd say it would be better not to do anything than follow this. That could help to get a sample working for a demo though.

[AndroidDevBro]

Good answer. Would you happen to know how to change the colour of the icon for selected activities instead?

[Nic Parmee]

Or if you match your android manifest theme name to the style name in your styles.xml.

[Paixols]

only for API 20 and up

[Daron]

but how do we get a reference to actionBarDrawerToggle? (running your suggested code will return null because we don't a reference to the actionBarDrawerToggle)

[Daron]

@Gratien Asimbahwe this code you posted will crash because there is no reference to drawerToggle....how do we get a reference?

[Daron]

this code you posted will crash because there is no reference to drawerToggle....how do we get a reference?

[Daron]

@Tarun Voora - this might be just what i am looking for...i am looking for a way to change it using code...i will look into this within the next couple of days...thanks in advance!... i am looking for the hamburger menu icon though...but this may point me in the right direction.

[KeepAtIt]

Look no further, Sai Gopi N answered the question correctly. To answer Daron, you have to make an instance in your main activity. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);

[android developer]

Any way to set DrawerArrowStyle to specific toolbars ? And what's the default value of it?

[Satyam Gondhale]

Worked Amazing. Thanks

[Wowo Ot]

this is perfect.

[user1840981]

Please provide full step to apply icon in kotlin