Appcompatv7 - v21 Navigation drawer not showing hamburger icon

Question

I am implementing the lollipop style navigation drawer with latest appcompat support library but the problem is the hamburger icon is never displayed . Only back icon is shown.

This is my activity code

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class Home extends ActionBarActivity {

private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);
    initViews();
}


private void initViews(){

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);


    toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
    setSupportActionBar(toolbar);

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

        /** Called when a drawer has settled in a completely closed state. */ 
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
            //getActionBar().setTitle(mTitle);
            //invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        } 

        /** Called when a drawer has settled in a completely open state. */ 
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            //getActionBar().setTitle(mDrawerTitle);
            //invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        } 
    }; 


    // Set the drawer toggle as the DrawerListener 
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
    getSupportActionBar().setHomeButtonEnabled(true); 

 }
}

This is my styles file

 <resources>
 <!-- Application theme. -->
<style name="Theme.Test" parent="@style/Theme.AppCompat.Light">

    <!-- customize the color palette -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="windowActionBar">false</item>
    <item name="drawerArrowStyle">@style/Theme.Test.DrawerArrowStyle</item>
</style>

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

The layout file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >

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

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:layout_below="@+id/toolbar">

    <!-- The main content view -->

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

</RelativeLayout>

In both cases only back arrow is shown , i have read many posts but nothing seems to make a difference . Any help would be appreciated.

score 149 · Accepted Answer · answered Nov 05 '14 at 10:50

149

You need to call

mDrawerToggle.syncState();

answered Nov 05 '14 at 10:50

Pedro Oliveira

20,442
8
55
82

Where do you call this? – Bensonius Nov 21 '14 at 05:57
2

I guess inside onDrawerClosed() and onDrawerOpened() – Paul Verest Nov 21 '14 at 09:38
14

Just after you initialize your `ActionBarDrawerToggle` – Pedro Oliveira Nov 21 '14 at 09:40
1

Hi! Can we show Hamburger icon it without calling `mDrawerToggl.syncState()`, actually i am showing the Navigation drawer as overlay on the ToolBar so the animation is not required in my case. – Shajeel Afzal Dec 07 '14 at 18:02
No joke, been trying to find this for two days. THANKS! – Ryan Detzel Apr 30 '15 at 12:18
Thank you very much @Pedro Oliveira. It finally helped me out. – Tejas Sherdiwala Jun 04 '15 at 10:56
1

The maybe your problem is another one @AlexVPerl. No need to downvote just because it didn't work for you. Hell, if I'm gonna downvote all the answers that doesn't work for me.... – Pedro Oliveira Jun 22 '15 at 22:18
1

@PedroOliveira Is that not the use-case for up / down vote buttons? – AlexVPerl Jun 22 '15 at 22:22
No, not at all. Here's some help. http://meta.stackoverflow.com/questions/252677/when-is-it-justifiable-to-downvote-a-question – Pedro Oliveira Jun 22 '15 at 22:23
I'm happy for you that know how to use the website and make it better :) – Pedro Oliveira Jun 22 '15 at 22:40
Is there any way to show drawer toggle icon in `NavigationView`? – Apurva Oct 26 '15 at 06:29
What is the purpose of "syncState" ? I see it being called multiple times in samples... – android developer Mar 26 '16 at 22:31
i did everything and hamburger icon show in higher api but it is not working in api 14 @PedroOliveira can you help? – Dheeraj Joshi Oct 28 '17 at 05:51

score 19 · Answer 2 · answered Jul 20 '15 at 14:04

Make sure that you're importing the correct drawer toggle.

When I imported the v4 version I had the arrow (below).

import android.support.v4.app.ActionBarDrawerToggle;

Changing it to this (below, v7) fixed my issue.

import android.support.v7.app.ActionBarDrawerToggle;

score 15 · Answer 3 · answered Jan 15 '16 at 16:02

15

Make sure that you call

mDrawerToggle.syncState();

AFTER calling

getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
getSupportActionBar().setHomeButtonEnabled(true);

answered Jan 15 '16 at 16:02

Lukas Lechner

7,881
7
40
53

1

is it possible without setting the toolbar as actionbar, to show the hamburger drawable? – android developer Mar 26 '16 at 22:33

score 13 · Answer 4 · answered Jan 25 '15 at 12:24

When using the ActionBarDrawerToggle, you must call it during onPostCreate() and onConfigurationChanged()

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

And `onOptionsItemSelected` too. – Brais Gabin Nov 04 '15 at 11:13 — Brais Gabin, Nov 04 '15 at 11:13

score 9 · Answer 5 · answered Aug 31 '15 at 13:02

9

Since my NavigationDrawer was extending a Fragment not an Activity I was not able to override postCreate. The below is what I did.

   ActionBar actionBar = getActionBar();
   actionBar.setDisplayHomeAsUpEnabled(true); // this sets the button to the    back icon
   actionBar.setHomeButtonEnabled(true); // makes it clickable
   actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer);// set your own icon

Hope it helps!

answered Aug 31 '15 at 13:02

user2132226

85
1
1

Maybe expand a little about why you think this would help the person asking? – Mikael Ohlson Sep 02 '15 at 13:34
Sorry they wanted the hamburger icon displayed and the way I changed it was with the above code. Please read the comments beside the code. This could help people who get stuck with the back icon on the navigation drawer. – user2132226 Sep 03 '15 at 14:09
How would you show the hamburger drawable in the toolbar, without making toolbar as actionbar ? – android developer Mar 26 '16 at 22:34

score 6 · Answer 6 · answered May 21 '15 at 10:39

6

Dont forget to override onOptionsItemSelected method and check if ctionBarDrawerToggle was clicked, in this case return true otherwise the activity will be finished.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

answered May 21 '15 at 10:39

Alberto Penas

101
1
1

3

One-liner: `return actionBarDrawerToggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item)` – gregschlom May 11 '16 at 01:58

score 5 · Answer 7 · edited Jun 02 '17 at 05:25

5

You can simply use this:

// Defer code dependent on restoration of previous instance state.
mDrawerLayout.post(new Runnable() {
    @Override
    public void run() {
        mDrawerToggle.syncState();
        getActionBar().setHomeAsUpIndicator(R.drawable.ic_drawer);
    }
});

edited Jun 02 '17 at 05:25

Pang

9,564
146
81
122

answered Sep 04 '15 at 00:18

RobotCharlie

1,180
15
19

remove code after *mDrawerToggle.syncState()*, and you good to go. – Ahmad Jamil Al Rasyid Nov 20 '19 at 13:10

score 3 · Answer 8 · edited Apr 04 '15 at 19:26

3

While including ActionBarDrawerToggle, make sure to use the post method:

mDrawerLayout.post(new Runnable() {
   @Override
   public void run() {
       mDrawerToggle.syncState();
   }
});

edited Apr 04 '15 at 19:26

alexwlchan

5,699
7
38
49

answered Apr 04 '15 at 18:32

user3248601

31
2

This worked for me! That and also removing a workaround done by using `setHomeAsUpIndicator(R.drawable.ic_menu/ic_back)` that was forcing the icon that was pretended when switching between fragment. But after being updated to the new animated burger icon, that does not do the job. – Jota Jul 29 '15 at 09:51

score 3 · Answer 9 · answered Jul 08 '15 at 17:02

3

mDrawerToggle.syncState() did not work for me, but I eventually got it to work with:

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

I was, however, not using a Toolbar.

answered Jul 08 '15 at 17:02

John Leehey

22,052
8
61
88

This line of code saved my day. I have converted my eclipse code to android studio and all of a sudden my drawer toggle button automatically converted to arrow. now it is working fine after adding this line of code. Thanks a lot @john Leehey – Hitesh Kamani Oct 28 '15 at 14:41

score 3 · Answer 10 · answered Jun 08 '17 at 08:46

I also got similar problem, in my case problem was, when initiating actionbartoggle, I was not passing valid toolbar argument (toolbar was initialized later), without a proper, non-null toolbar, ActionBarToggle will fail to create a hamburger icon.

actionBarToggle = ActionBarDrawerToggle(this, mDrawer, toolbar, 
R.string.drawer_open, R.string.drawer_close);

score 2 · Answer 11 · answered Jun 25 '15 at 04:42

you can call syncState() from your Activity's onPostCreate to synchronize the indicator with the state of the linked DrawerLayout after onRestoreInstanceState has occurred.

@Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

Also ActionBarDrawerToggle can be used directly as a DrawerLayout.DrawerListener, or if you are already providing your own listener, call through to each of the listener methods from your own.

private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
  .
  .
  .
  .
mDrawerLayout.setDrawerListener(mDrawerToggle);

    mDrawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

score 1 · Answer 12 · edited Jun 02 '17 at 05:26

This works for me. I have extended AppCompatActivity instead of ActionBarActivity.

mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,null, R.string.drawer_opened, R.string.drawer_closed) {
    @Override
    public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);
        if( getSupportActionBar()!= null)
        getSupportActionBar().setTitle(R.string.drawer_opened);
        mActionBarDrawerToggle.syncState();
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        super.onDrawerClosed(drawerView);
        if(getSupportActionBar() != null)
            getSupportActionBar().setTitle(R.string.drawer_closed);
            mActionBarDrawerToggle.syncState();

    }
};

score 1 · Answer 13 · answered Apr 08 '17 at 13:20

Navigation drawer was not showing when clicking action bar menu. This fixed it for me.

   @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
      //add your switch statement


        return super.onOptionsItemSelected(item);
    }

Appcompatv7 - v21 Navigation drawer not showing hamburger icon

13 Answers13

Linked

Related