Changing Navigation drawer icon on action bar android

Question

I have created a NavigationDrawer in my app using the ActionBar. enter image description here

As showed in the picture above I want to change the NavigationDrawer toggle button icon to something I want. How can I change it?

Here is my code:-

mDrawerList.setOnItemClickListener(new SlideMenuClickListener());


    // enabling action bar app icon and behaving it as toggle button
    getActionBar().setDisplayHomeAsUpEnabled(true);
    getActionBar().setHomeButtonEnabled(true);

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
            R.drawable.hamburger_button, //nav menu toggle icon
            R.string.app_name, // nav drawer open - description for accessibility
            R.string.app_name // nav drawer close - description for accessibility
            ) {
        public void onDrawerClosed(View view) 
        {

            getActionBar().setTitle(mTitle);
            // calling onPrepareOptionsMenu() to show action bar icons
            invalidateOptionsMenu();
        }

        public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle("Settings");
            // calling onPrepareOptionsMenu() to hide action bar icons
            invalidateOptionsMenu();
        }
    };
    mDrawerLayout.setDrawerListener(mDrawerToggle);
@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);
}

If I try changing it to R.drawable.hamburger_button It still shows the default icon

R.drawable.hamburger_button is your own custom image and not the same as the one provided by android ? — Shivam Verma, Jun 30 '14 at 04:17
http://stackoverflow.com/questions/9252354/how-to-customize-the-back-button-on-actionbar please take a loot at this link — Giant, Jun 30 '14 at 04:57
@HakHak this works. Thanks a lot. Please post a answer so that I accept it. Also any idea how I can I place the app title in the center of the action bar? — user3713706, Jun 30 '14 at 05:09
@user3713706 no need mate.. because im doing that thing as well and was able to make it work i was just hoping it can help you as well happy coding :) — Giant, Jun 30 '14 at 05:11

score 61 · Answer 1 · answered Aug 20 '15 at 11:46

61

To replace the drawer indicator icon with your own drawable(non animated) using the v7 ActionBarDrawerToggle, you can do the following:

//After instantiating your ActionBarDrawerToggle
mDrawerToggle.setDrawerIndicatorEnabled(false);
Drawable drawable = ResourcesCompat.getDrawable(getResources(), R.drawable.your_custom_icon, getActivity().getTheme());
mDrawerToggle.setHomeAsUpIndicator(drawable);
mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) {
            mDrawerLayout.closeDrawer(GravityCompat.START);
        } else {
            mDrawerLayout.openDrawer(GravityCompat.START);
        }
    }
});

answered Aug 20 '15 at 11:46

Mateus Gondim

5,362
6
31
51

what should be the size of custom icon? – TapanHP Mar 15 '17 at 12:19
perfect answer which includes the navigation listener which is important, otherwise the icon click is handled as going back. – Simon Ninon Jan 30 '18 at 01:22
Not Perfect. Why doesn't this support dynamic size? – grantespo Mar 02 '19 at 01:10
This fixed my issue – Naveed Ahmad Dec 20 '20 at 07:43

score 10 · Answer 2 · answered Aug 09 '15 at 18:43

Try changing the icon manually by using setHomeAsUpIndicator() .

Like,

ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer);

and

ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(...){};
mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_drawer_toggle);

score 4 · Answer 3 · answered Jun 30 '14 at 04:21

Please make sure you include these to sync the states of the icon properly.

@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);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

Ahmed Raafat · Answer 4 · 2016-10-04T04:13:59.797

3

Under the initialization of ActionBarDrawerToggle write the following code:

toolbar.setNavigationIcon(R.drawable.ic_menu_camera);

edited Oct 04 '16 at 04:13

answered Oct 04 '16 at 01:42

Ahmed Raafat

162
4
6

The best answer, for my opinion – Skullper Jul 05 '23 at 06:43

score 2 · Answer 5 · edited Mar 10 '22 at 17:41

Here is a working solution:

    setSupportActionBar(toolbar2);
    toggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar2, R.string.navigation_drawer_open,R.string.navigation_drawer_close);

    bottomNavigationView.setOnNavigationItemSelectedListener(this);
    navigationView=findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);

    toggle.syncState();

    //------------To change Navigation drawer icon ---------------//
    getSupportActionBar().setHomeButtonEnabled(true);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

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

this Youtube video helped https://www.youtube.com/watch?v=biUaIO-N7Ew

score 1 · Answer 6 · answered Jan 09 '15 at 13:47

1

 mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
            R.drawable.hamburger_button(This you the icon), //nav menu toggle icon
            R.string.app_name, // nav drawer open - description for accessibility
            R.string.app_name // nav drawer close - description for accessibility
            )

answered Jan 09 '15 at 13:47

Kaio Cezar Pereira de Oliveira

7
1

8

this is deprecated in favor of the v7 one and the v7ActionBarToggle doesn't have a constructor to change the icon. – user2968401 Apr 17 '15 at 22:49
1

To change the icon using v7 ActionBarDrawerToggle: http://stackoverflow.com/a/32117399/3752244 – Mateus Gondim Aug 20 '15 at 11:47

score 1 · Answer 7 · answered Feb 25 '15 at 13:07

call super class methods of ActionBarDrawerToggle super.onDrawerClosed(view) and super.onDrawerOpened(drawerView) like

mDrawerToggle = new ActionBarDrawerToggle(...){
        public void onDrawerClosed(View view) 
         {
           super.onDrawerClosed(view);
           //---your code
         }

        public void onDrawerOpened(View drawerView) 
         {
           super.onDrawerOpened(drawerView);
           //---your code
         }
 }

score 1 · Answer 8 · answered Jul 18 '16 at 11:46

For me adding the setHomeAsUpIndicator worked.

mDrawerToggle = new ActionBarDrawerToggle(
            this,                  /* host Activity */
            mDrawerLayout,         /* DrawerLayout object */
            R.drawable.custom_icon,  /* nav drawer image to replace 'Up' caret */
            R.string.drawer_open,  /* "open drawer" description for accessibility */
            R.string.drawer_close  /* "close drawer" description for accessibility */
    ) {
        public void onDrawerClosed(View view) {
            getSupportActionBar().setTitle(mTitle);
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }

        public void onDrawerOpened(View drawerView) {
            getSupportActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }
    };
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    getSupportActionBar().setHomeAsUpIndicator(R.drawable.custom_icon);

shiva yekta · Answer 9 · 2016-04-11T09:56:23.857

0

First of all you should in manifest try this code :

android:icon="@drawable/ic_icon1"

This is image for total logo of your app

android:logo="@drawable/ic_drower"

This is image for action bar

After that in main-activity try this code :

actionBar.setDisplayUseLogoEnabled(true);

edited Apr 11 '16 at 09:56

answered Apr 11 '16 at 07:32

shiva yekta

1
3

score 0 · Answer 10 · answered Aug 01 '21 at 10:45

0

setSupportActionBar(yourToolbar);
yourToolbar.setNavigationIcon({yourDrawable});

Don't set Navigation Icon before setSupportActionBar()

answered Aug 01 '21 at 10:45

Mubarrat Hasan

156
13

Changing Navigation drawer icon on action bar android

10 Answers10

Linked