How to change the hamburger icon in android

Aman Gupta

24 December 2016

In this blog,

We will see how to change the default hamburger icon by programmatically. And will also see some style techniques for changing the default icon colors.

The hotdog or hamburger button is a button in a graphical user interface carrying an icon consisting of three parallel horizontal lines (displayed as ☰). It is often placed in the top left or top right of a user interface and is so called for its resemblance to a hotdog or hamburger.

Selection of a hotdog/hamburger button typically results in a menu of pages or options.

Change the default hamburger icon by program

There are few simple step to achieve our desire,

Step 1: Setup the drawer toggle

mDrawerToggle = ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);

1

mDrawerToggle = ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);

Step 2: Set the DrawerIndicatorEnabled to false

mDrawerToggle.setDrawerIndicatorEnabled(false);

1

mDrawerToggle.setDrawerIndicatorEnabled(false);

Step 3: Set the listener to the drawer Toggle because by above setup your hamburger button click will not work as previous,

mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mDrawerLayout.openDrawer(GravityCompat.START); } });

1
2
3
4
5
6

mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
          @Override
               public void onClick(View view) {
                   mDrawerLayout.openDrawer(GravityCompat.START);
               }
           });

Step 4: Finally set the icon which we want,

mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_hamburg);

1

mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_hamburg);

Change the default hamburger icon color

There are also few simple steps to do achieve this,

Step 1: Simply Make a style in style.xml file,

<style name="MyWhiteColorTheme" 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/DrawerHamburgerStyle</item> </style>

1
2
3
4
5
6
7
8
9

<style name="MyWhiteColorTheme" 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/DrawerHamburgerStyle</item>
</style>

Step 2: Finally create a style and set it to the drawerArrowStyle attribute,

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

1
2
3
4

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

Source: https://en.wikipedia.org/