How to replace the hamburger icon used for ActionB

Question

I have implemented a basic ActionBarDrawerToggle using the new Toolbar in Android 5.0.

However, I am unable to figure out how to change the default hamburger icon that is supplied. From the android documentation it says that "the given Activity will be linked to the specified DrawerLayout and the Toolbar's navigation icon will be set to a custom drawable... This drawable shows a Hamburger icon when drawer is closed and an arrow when drawer is open. It animates between these two states as the drawer opens."

I currently have this all working correctly with the following code, however I want to replace the default supplied hamburger with my own drawable.

Here is my current code:

MainActivity.java

@InjectView(R.id.main_activity_toolbar)
Toolbar mToolbar;

@InjectView(R.id.main_activity_drawer_layout)
DrawerLayout mDrawerLayout;

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

    setSupportActionBar(mToolbar);
    mToolbar.setNavigationIcon(R.drawable.navigation);

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
            invalidateOptionsMenu();
        }

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

    mDrawerLayout.setDrawerListener(mDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

This line:

mToolbar.setNavigationIcon(R.drawable.navigation);

doesn't seem to work.

Is this possible to do? Thanks!

ActionBarToggle Documentation - https://developer.android.com/reference/android/support/v7/app/ActionBarDrawerToggle.html

Answer 1

You can use the toolbar as Stand Alone mode, that means you should not use your toolbar as part of your ActionBarDrawerToggle constructor, you can achieve that using the below code:

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, null,
                       R.drawable.appbar, R.drawable.appbar)

(Note how the toolbar instance is not being sent to the ActionBarDrawerToggle constructor)

Also, you should inflate your menu manually

mToolbar = (Toolbar) findViewById(R.id.nav_toolbar);
mToolbar.inflateMenu(R.menu.base);

And remove the setSupportActionBar(mToolbar); line of code.

Of course, you will have to handle the navigation click by yourself:

mToolbar.setOnMenuItemClickListener(new OnMenuItemClickListener() ...

Then, you can open your drawer like this:

drawerButton = (BadgeDrawerButton) findViewById(R.id.badge_drawer_button);
drawerButton.setOnClickListener(
                       new View.OnClickListener() {

                              @Override
                              public void onClick(View v) {
                                     mDrawerLayout.openDrawer(Gravity.LEFT);
                              }
                       });

Hope this may help.

Answer 2

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
final ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawer,toolbar,R.string.navigation_drawer_open,R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);

toggle.syncState();
toolbar.setNavigationIcon(R.drawable.ic_action_name);

Answer 3

As for v7 support library - you can create your own representation of DrawerArrowDrawable.

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {

            public void onDrawerClosed(View view) {
                supportInvalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                supportInvalidateOptionsMenu();
            }
        };
        mDrawerToggle.setDrawerIndicatorEnabled(true);

        DrawerArrowDrawable drawerArrowDrawable = new DrawerArrowDrawable(this);
        drawerArrowDrawable.setAlpha(1);
        drawerArrowDrawable.setSpinEnabled(false);
        drawerArrowDrawable.setDirection(DrawerArrowDrawable.ARROW_DIRECTION_LEFT);
        drawerArrowDrawable.setColor(Color.BLACK);

        mDrawerToggle.setDrawerArrowDrawable(drawerArrowDrawable);

Answer 4

Here's how I was able to finally get mine to work.

private Toolbar toolbar;
toolbar = (Toolbar) findViewById(R.id.toolbar);

if (toolbar != null) {
    setSupportActionBar(toolbar);
    toolbar.setNavigationIcon(R.drawable.ic_drawer);

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

        /** Called when a drawer has settled in a completely open state. */
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }
    };

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

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

It turned out to be the

mDrawerToggle.syncState();

That finally got everything to work.