Toolbar Navigation Hamburger Icon missing

Question

I'm looking for a way to display the hamburger icon whitout using the Drawer/DrawerToggle and use the default icon included in Android enter image description here

By setting getSupportActionBar().setDisplayHomeAsUpEnabled(true); it display the back arrow but not the hambuerger. Other post on Stackoverflow (like this or this) use the DrawerLayout or a custom drawable. I cannot find the vector or png for the hamburger icon on the Android source.

Do you know how can I find the original hamburger icon in android/support library? (or how to displayed it)

Note: Vector and png can be found on google.com/design website : http://www.google.com/design/spec/resources/sticker-sheets-icons.html#

In my activity

mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d(LOG_TAG, "navigation clicked");
    }
});

Layout file

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

Styles.xml

<!-- Base application theme. -->
<style name="Theme.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


    <item name="colorPrimary">@color/primaryDef</item>
    <item name="colorPrimaryDark">@color/primaryDarkDef</item>
    <item name="colorAccent">@color/primaryDef</item>

    <!-- Remove the actionbar shadow-->
    <item name="android:windowContentOverlay">@null</item>
</style>

possible duplicate of [Appcompatv7 - v21 Navigation drawer not showing hamburger icon](http://stackoverflow.com/questions/26754940/appcompatv7-v21-navigation-drawer-not-showing-hamburger-icon) — Pedro Oliveira, Jan 21 '15 at 16:13
@PedroOliveira it's not a duplicate because I explcitly sayed I didn't use ActionBarDrawerToggle — Hugo Gresse, Jan 21 '15 at 16:17
Then if you're not using a drawer how are you supposed to show a menu? That hamburger icon is part of the drawer. — Pedro Oliveira, Jan 21 '15 at 16:19
@PedroOliveira this is not the main question, but it is not used to show a manu. I know it's against the UX Guidlines and it will not be in a public app. The question is just to find the icon inside Android if it's possible. — Hugo Gresse, Jan 21 '15 at 16:23
These are some of the times when I really hate android, simple things like this that can easily be done in other languages/platforms and you need to write all these lines of code for it -__- — user3718908x100, Dec 25 '16 at 14:18

score 40 · Accepted Answer · edited Apr 23 '19 at 23:18

40

If you want to use the same drawer as lollipop then let me tell you that's not a static image. That image is drawn in real time by a class called DrawerArrowDrawableToggle. So there is no "hamburger" icon for that.

However if you want the hamburger icon with no animation you can find it here:

https://material.io/tools/icons/?icon=menu&style=baseline

enter image description here

edited Apr 23 '19 at 23:18

Community

1
1

answered Jan 21 '15 at 16:33

Pedro Oliveira

20,442
8
55
82

Your answer complete 50% of the question, thank you ! Do you know a way to implement this for pre-lolipop device ? – Hugo Gresse Jan 21 '15 at 16:39
If you want to achive that nice animation with the hamburger menu I suggest you look up appcompatv7 for that and set up a drawer menu. If you want to just show the menu icon then just place the image inside the drawables and use it. I will post here my repo with a nice and simple template on "Material Drawer" that works on pre-lollipop devices :) https://github.com/kanytu/android-material-drawer-template – Pedro Oliveira Jan 21 '15 at 16:42
thank you, can you comlete your answer to include http://www.google.com/design/spec/resources/sticker-sheets-icons.html#sticker-sheets-icons-components where we can also find official icons. Not that vector icon requires API 21, so we have to use png – Hugo Gresse Jan 21 '15 at 16:49
Friend on that site you just have to click "Download ZIP" and it will download all the png's with the same drawable folder structure android project uses :) Just go there. Select your favorite color, click download zip, and drag that "res" folder into your own "res" folder :) – Pedro Oliveira Jan 21 '15 at 16:51
Thanks but it was just to compelte your answer with alternative method – Hugo Gresse Jan 21 '15 at 16:56
1

Edited. Does that do the job? :) – Pedro Oliveira Jan 21 '15 at 17:02

score 39 · Answer 2 · edited Jan 20 '17 at 01:54

39

To have an animated hamburger icon you should use DrawerLayout with ActionBarDrawerToggle and enable the icon for the ActionBar and for the ActionBarDrawerToggle.

Example:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle mDrawerToggle;

setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();

if (actionBar != null)
{
   actionBar.setDisplayHomeAsUpEnabled(true);
   mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.hello_world, R.string.hello_world)
   {

      public void onDrawerClosed(View view)
      {
         supportInvalidateOptionsMenu();
         //drawerOpened = false;
      }

      public void onDrawerOpened(View drawerView)
      {
         supportInvalidateOptionsMenu();
         //drawerOpened = true;
      }
   };
   mDrawerToggle.setDrawerIndicatorEnabled(true);
   drawerLayout.setDrawerListener(mDrawerToggle);
   mDrawerToggle.syncState();
}

Also, you need to add these methods to your Activity:

@Override
protected void onPostCreate(Bundle savedInstanceState)
{
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig)
{
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

edited Jan 20 '17 at 01:54

Jared Rummler

37,824
19
133
148

answered Sep 16 '15 at 17:04

mohax

4,435
2
38
85

Doesn't work indeed... until I realized the missing drawerLayout.syncState to make the hamburger icon appear :) – Stephen Vinouze Oct 11 '15 at 15:06
@ptitvinou, see updated answer. I add missing methods. – mohax Oct 11 '15 at 15:40
@mohax how can I just show hamburguer icon instead of back arrow? – Sibelius Seraphini Mar 24 '16 at 14:45
2

@SibeliusSeraphini, this line do it `mDrawerToggle.setDrawerIndicatorEnabled(true);`. If you pass `false` as argument you'll see backArrow. Do not forget to add 2 methods from end of answer to activities class' – mohax Mar 24 '16 at 14:49
@mohax I'm still seeing the arrow icon instead of the home, this activity is not the initial one, this could be a problem? – Sibelius Seraphini Mar 24 '16 at 15:18
@SibeliusSeraphini, this code works for me, so if you have some problem with it you could ask a separate question and give a link to this answer in it. Need to see yours code to find a problem. – mohax Mar 24 '16 at 15:23
2

@mohax I need to add this line: mDrawerToggle.syncState(); after drawerLayout.setDrawerListener(mDrawerToggle); – Sibelius Seraphini Mar 24 '16 at 15:31
how can move animated hamburger icon to right of Toolbar. – Mahdi Nov 20 '16 at 21:33
@Kenji, I think you can't do it with standart widget. May be you could try to find some library for it – mohax Nov 20 '16 at 22:45
This code worked perfectly for me, but when I switch views the hamburger icon disappears. I have a separate include, however the icon appears for one layout and not the other. – ackfloverstow Jul 18 '22 at 19:54

score 30 · Answer 3 · edited Nov 06 '18 at 12:21

30

For that you just need write to some lines

   DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
   ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
   drawer.addDrawerListener(toggle);
   toggle.setDrawerIndicatorEnabled(true);
   toggle.syncState();

toggle.setDrawerIndicatorEnabled(true); if this is false make it true or remove this line

edited Nov 06 '18 at 12:21

JerabekJakub

5,268
4
26
33

answered May 09 '17 at 06:17

Vivek Barai

1,338
13
26

1

I am not able to understand one thing. If the main functionality of that hamburger icon is to open the drawer then why do we need to add drawlistener to it separately? – logdev Jan 26 '20 at 19:16

score 16 · Answer 4 · answered Apr 05 '17 at 18:12

You can try to make your own drawable for the hamburger icon like this.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#ffffff"
        android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z" />
</vector>

Then in your fragment/activity,

getSupportActionBar().setHomeAsUpIndicator(R.drawable.as_above);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

For other drawables, this might help: https://github.com/google/material-design-icons/blob/master/navigation/drawable-anydpi-v21/

score 15 · Answer 5 · edited Jan 26 '17 at 15:52

Here is the simplest solution that worked for me.

The ActionBarDrawerToggle has two types constructors. One of them take toolbar as a parameter. Use that (second one below) to get the animated hamburger.

ActionBarDrawerToggle(this, mDrawerLayout, R.string.content_desc_drawer_open, 
R.string.content_desc_drawer_close);

ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.content_desc_drawer_open, 
R.string.content_desc_drawer_close);`  //use this constructor

score 9 · Answer 6 · edited May 23 '17 at 11:54

9

I had the same problem and I found the simplest solution here:

appcompatv7-v21-navigation-drawer-not-showing-hamburger-icon

All I had to do was to call:

mDrawerToggle.syncState();

edited May 23 '17 at 11:54

Community

1
1

answered May 24 '16 at 13:50

Kacper Wolkowski

1,517
1
16
24

score 7 · Answer 7 · edited Dec 07 '15 at 12:26

7

I had the same problem. Get the ToolBar and then set Navigation icon

final android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.blablabla);

edited Dec 07 '15 at 12:26

Damian Kozlak

7,065
10
45
51

answered Dec 07 '15 at 12:25

Mikheil Zhghenti

734
8
28

score 6 · Answer 8 · answered Jul 28 '16 at 12:17

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    mToolbar.setTitle("title");
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
    getSupportActionBar().setHomeButtonEnabled(true);
    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_list);

Stoycho Andreev · Answer 9 · 2015-01-21T16:36:46.220

5

ok to hide back arrow use

getSupportActionBar().setDisplayHomeAsUpEnabled(false);
getSupportActionBar().setHomeButtonEnabled(false);

then find hamburger icon in web ->hamburger

and finally, set this drawable in your project with action bar method:

getSupportActionBar().setLogo(R.drawable.hamburger_icon);

edited Jan 21 '15 at 16:36

answered Jan 21 '15 at 16:27

Stoycho Andreev

6,163
1
25
27

2

I'm searching the hamburger icon in the support lib or android sdk. – Hugo Gresse Jan 21 '15 at 16:32
@AlexPerl perhaps you are doing something wrong. Can you tell me about your case. – Stoycho Andreev Jun 23 '15 at 03:57

score 4 · Answer 10 · answered Jul 28 '18 at 21:05

4

 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.addDrawerListener(toggle);
    toggle.syncState();

it's work with me

answered Jul 28 '18 at 21:05

Mohamed Hamole

41
3

score 3 · Answer 11 · answered Dec 11 '15 at 16:47

Maybe you can try this, but you will lose animation between arrow and hamburger icon

@Override
protected void onCreate(Bundle arg0) {
    super.onCreate(arg0);
    super.setContentView(R.layout.activity_menu_drawer_left);

_drawerToggle = new ActionBarDrawerToggle(this, _drawerLayout, R.string.drawer_opened, R.string.drawer_closed) {
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            changeDrawerIconOnDrawerClick(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        }

        /** Called when a drawer has settled in a completely closed state. */
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
            changeDrawerIconOnDrawerClick(R.drawable.ic_drawer);
        }
    };

     //to change default icon to hamburger item initially
    changeDrawerIconOnDrawerClick(R.drawable.ic_drawer);    }



private void changeDrawerIconOnDrawerClick(int resourceId) {
    //Drawable icon = ContextCompat.getDrawable(getApplicationContext(), resourceId);
    Drawable icon = ResourcesCompat.getDrawable(getResources(), resourceId, null);
    icon.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
    _drawerToggle.setDrawerIndicatorEnabled(false);
    _drawerToggle.setHomeAsUpIndicator(icon);
}

score 2 · Answer 12 · answered Jul 06 '16 at 05:07

2

Replace the default Up-arrow with your own drawable

getSupportActionBar().setHomeAsUpIndicator(R.drawable.hamburger);

answered Jul 06 '16 at 05:07

junhaotee

483
4
10

score 2 · Answer 13 · answered Oct 24 '16 at 07:33

Just Add the following in your onCreate method,

if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeButtonEnabled(true);
        }

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, mDrawer, mToolbar, R.string.home_navigation_drawer_open, R.string.home_navigation_drawer_close) {

            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
            }
        };
        mDrawer.addDrawerListener(toggle);
        toggle.syncState();

and In strings.xml,

<string name="home_navigation_drawer_open">Open navigation drawer</string>
<string name="home_navigation_drawer_close">Close navigation drawer</string>

score 1 · Answer 14 · answered Dec 30 '16 at 12:44

Use this constructor in MyActionBarDrawerToggle :

    public MyActionBarDrawerToggle(AppCompatActivity host, DrawerLayout drawerlayout, SupportToolbar toolbar, int openedResource, int closedResource)
        : base(host, drawerlayout, toolbar, openedResource, closedResource)
    {
        mHostActivity = host;
        mOpenedResource = openedResource;
        mClosedResource = closedResource;
    }

and Call this method in teh mainActivity (Using AppCompatActivity)

        mDrawerToggle = new MyActionBarDrawerToggle(
            this,                           //Host Activity
            mDrawerLayout,                  //DrawerLayout
            mToolbar,                       //Toolbar
            Resource.String.openDrawer,     //Opened Message
            Resource.String.closeDrawer     //Closed Message
        );


        mDrawerLayout.AddDrawerListener(mDrawerToggle);
        SupportActionBar.SetHomeButtonEnabled(true);
        SupportActionBar.SetDisplayShowTitleEnabled(true);
        mDrawerToggle.DrawerIndicatorEnabled = true;
        mDrawerToggle.SyncState();

EpicPandaForce · Answer 15 · 2017-01-26T14:42:39.347

in onCreate():

    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close) {
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
            supportInvalidateOptionsMenu();
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            supportInvalidateOptionsMenu();
        }
    };
    drawerLayout.setDrawerListener(drawerToggle);


    drawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Backstack.get(MainActivity.this).goBack();
        }
    });
    //actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
    //getSupportActionBar().setDisplayHomeAsUpEnabled(false);
    actionBar.setDisplayHomeAsUpEnabled(false);
    actionBar.setHomeButtonEnabled(true);

And when setting up UP navigation:

private void setupViewsForKey(Key key) {
    if(key.shouldShowUp()) {
        drawerToggle.setDrawerIndicatorEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    else {
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        drawerToggle.setDrawerIndicatorEnabled(true);
    }
    drawerToggle.syncState();

I can't believe this took more than an hour... thank you to http://stackoverflow.com/a/33867836/2413303 — EpicPandaForce, Jan 26 '17 at 14:42

score 0 · Answer 16 · answered Oct 10 '20 at 21:18

0

in JetPack it work for me

NavigationUI.setupWithNavController(vb.toolbar, nav)
vb.toolbar.navigationIcon = ResourcesCompat.getDrawable(resources, R.drawable.icon_home, null)

answered Oct 10 '20 at 21:18

Eugene K

71
1
3
4

what is vb in your case here? could you provide entire method/class? – obey Oct 30 '20 at 20:23
`vb` it's my viewbinding – Eugene K Nov 01 '20 at 11:06

Toolbar Navigation Hamburger Icon missing

16 Answers16

Linked