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

The default menu drawable for the ActionBarDrawerToggle is DrawerArrowDrawable.

You can subclass this to add custom functionality, like badges, like so:

public class BadgedDrawerArrowDrawable extends DrawerArrowDrawable {

    /**
     * @param context used to get the configuration for the drawable from
     */
    public BadgedDrawerArrowDrawable(Context context) {
        super(context);

        setColor(context.getResources().getColor(R.color.colorAccent));
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        paint.setTextSize(60);
        canvas.drawText("!", canvas.getWidth() - 60, 25, paint);
    }
}

Usage:

actionBarDrawerToggle.setDrawerArrowDrawable(new BadgedDrawerArrowDrawable(activity));

Answer 2

as of Jan 2018, this is a working solution (at least for me):

    //setSupportActionBar(toolbar)

    val toggle = ActionBarDrawerToggle(this, drawer_layout, null, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
    toolbar.inflateMenu(R.menu.menu_main)
    toolbar.setNavigationIcon(R.drawable.ic_menu)
    toolbar.setNavigationOnClickListener {
        drawer_layout.openDrawer(Gravity.START)
    }

    toolbar.setOnMenuItemClickListener {
        true
    }

    drawer_layout.addDrawerListener(toggle)
    toggle.syncState()

    nav_view.setNavigationItemSelectedListener(this)

things to care:

• setSupportActionBar should be commented out
• ActionBarDrawerToggle is not taking a reference to toolbar
• We should inflate menu ourself, and handle onClicks. onCreateOptionsMenu and onOptionsItemSelected will not be functioning.
• Don't forget to call toggle.syncState()

Answer 3

the thing that worked for me is that i just needed to call toolbar.setNavigationIcon(R.drawable.ic_camera_alt_24dp); at the end of onCreate, or at least after mDrawerToggle = new ActionBarDrawerToggle...

Answer 4

I think it is recommended to put the call to syncState() in the onPostCreate(...) lifecycle method.

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

Answer 5

These two lines of code work for me:

mDrawerToggle.setDrawerIndicatorEnabled(false); //disable "hamburger to arrow" drawable
mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_drawer); //set your own

And then call this:

mDrawerToggle.syncState();

Answer 6

My solution is by subclassing ActionBarDrawerToggle.

public class MyActionBarDrawerToggle extends android.support.v7.app.ActionBarDrawerToggle {

    public MyActionBarDrawerToggle(Activity activity, final DrawerLayout drawerLayout, Toolbar toolbar, int openDrawerContentDescRes, int closeDrawerContentDescRes) {
        super(activity, drawerLayout, toolbar, openDrawerContentDescRes, closeDrawerContentDescRes);

        setHomeAsUpIndicator(R.drawable.drawer_toggle);
        setDrawerIndicatorEnabled(false);

        setToolbarNavigationClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        });
     }
}