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.

Panama

Answer 1

You need to call

mDrawerToggle.syncState();

Reld

Where do you call this? – Elyot

I guess inside onDrawerClosed() and onDrawerOpened() – Carma

Just after you initialize your ActionBarDrawerToggle – Reld

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. – Buseck

No joke, been trying to find this for two days. THANKS! – Moschatel

Thank you very much @Pedro Oliveira. It finally helped me out. – Gallinule

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.... – Reld

@PedroOliveira Is that not the use-case for up / down vote buttons? – Retroversion

No, not at all. Here's some help. meta.#253177 – Reld

I'm happy for you that know how to use the website and make it better :) – Reld

Is there any way to show drawer toggle icon in NavigationView? – Pyles

What is the purpose of "syncState" ? I see it being called multiple times in samples... – Angevin

i did everything and hamburger icon show in higher api but it is not working in api 14 @PedroOliveira can you help? – Lisle

Answer 2

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;

Teufert

Answer 3

Make sure that you call

mDrawerToggle.syncState();

AFTER calling

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

Then

is it possible without setting the toolbar as actionbar, to show the hamburger drawable? – Angevin

Answer 4

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);
    }

Picrite

And onOptionsItemSelected too. – Czarina

Not help for me. Android 6.0 – Christie

Answer 5

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!

Evetteevey

Maybe expand a little about why you think this would help the person asking? – Cobol

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. – Evetteevey

How would you show the hamburger drawable in the toolbar, without making toolbar as actionbar ? – Angevin

Answer 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);
}

Shanna

One-liner: return actionBarDrawerToggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item) – Nil

Answer 7

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);
    }
});

Pond

remove code after mDrawerToggle.syncState(), and you good to go. – Procreate

Answer 8

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

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

Tolbooth

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. – Karakalpak

Answer 9

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.

Id

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 – Potbelly

Answer 10

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);

Gilles

Answer 11

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();
        }
    });

Devora

Answer 12

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();

    }
};

Louth

Answer 13

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);
    }

Hardily