Changing Navigation drawer hamburger icon

Question

I am trying to change hamburger menu icon for NavigationView but I am unable to do so.

Here is what I have tried so far

I have a base activity where nav drawer setup is done. Here is relevant piece of code

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.setContentView(R.layout.activity_base_nav);
    setSupportActionBar(toolbar);
    setupDrawer();
}

private void setupDrawer() {
    mDrawerLayout.setDrawerListener(this);

    mDrawerToggle = new ActionBarDrawerToggle(this,
            mDrawerLayout,
            R.string.open,
            R.string.close);

    mDrawerToggle = new ActionBarDrawerToggle(mContext,
            mDrawerLayout,
            R.string.open,
            R.string.close);

    mDrawerLayout.setDrawerListener(mDrawerToggle);

    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDefaultDisplayHomeAsUpEnabled(false);
        mDrawerToggle.setDrawerIndicatorEnabled(false);
       mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_share_48pt_2x);
    }
    mDrawerToggle.syncState();

    mNavigationView.setNavigationItemSelectedListener(
            menuItem -> {
                mMenuItem = menuItem.getItemId();
                mDrawerUtil.onNavMenuItemClicked(mMenuItem);
                mDrawerLayout.closeDrawers();
                return true;
            });
}

@Override 
public void setContentView(int layoutResID) {
    getLayoutInflater().inflate(layoutResID, mContainer);
}


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

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

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

    return super.onOptionsItemSelected(item);
}

However it doesn't seem to be working for me. I have also tried calling setDrawerIndicatorEnabled(false) and setHomeAsUpIndicator(R.drawable.ic_share_48pt_2x) on SupportActionBar but that also doesn't work.

Dipietro

Answer 1

The following code works nicely for me,

protected void onCreate(Bundle savedInstanceState) {
    ...
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setDefaultDisplayHomeAsUpEnabled(false);
    toggle.setDrawerIndicatorEnabled(false);
    toggle.setHomeAsUpIndicator(R.drawable.ic_custom_drawer_icon);
    ...
}

I also had to add a toolbar navigation click listener to listen for click events on the custom drawer icon

protected void onCreate(Bundle savedInstanceState) {
    ...
    toggle.setToolbarNavigationClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
            if (drawer.isDrawerOpen(GravityCompat.START)) {
                drawer.closeDrawer(GravityCompat.START);
            } else {
                drawer.openDrawer(GravityCompat.START);
            }
        }
    });
    ...
}

Finally, I can update the icon dynamically as

toggle.setHomeAsUpIndicator(R.drawable.ic_new_icon);

Venlo

Adding @Override protected void onPostCreate(@Nullable Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); nActionBarToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); nActionBarToggle.onConfigurationChanged(newConfig); } worked for me – Carincarina

I did exactly so, but my toggle is not clickable. – Burnoose

@Burnoose Added my solution. It includes one to handle clicking. – Impostor

Answer 2

Just use this :

toolbar.post(new Runnable() {
            @Override
            public void run() {
                Drawable d = ResourcesCompat.getDrawable(getResources(), R.mipmap.ic_launcher, null);
                toolbar.setNavigationIcon(d);
            }
        });

You dont need to handle setToolbarNavigationClickListener which is in accepted answer.

Shinar

brilliant solution – Senghor

Very effective solution. but how can I turn hamburger button when it is clicked? it is not turning anywhere, just background color is highlighted – Vocabulary

WOW very nice worked for me, other methods were not working at all – Chimborazo

Answer 3

Here's what works for me:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    setSupportActionBar(toolbar)

    val toggle = ActionBarDrawerToggle(
            this, drawer_layout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
    //toggle.isDrawerSlideAnimationEnabled = false
    toggle.isDrawerIndicatorEnabled = false
    toggle.setToolbarNavigationClickListener {
        if (drawer_layout.isDrawerOpen(GravityCompat.START))
            drawer_layout.closeDrawer(GravityCompat.START)
        else
            drawer_layout.openDrawer(GravityCompat.START)
    }
    toggle.setHomeAsUpIndicator(AppCompatResources.getDrawable(this, R.drawable.ic_android_black_24dp))
    drawer_layout.addDrawerListener(toggle)
    toggle.syncState()
    nav_view.setNavigationItemSelectedListener(this)
}

override fun onBackPressed() {
    if (drawer_layout.isDrawerOpen(GravityCompat.START)) {
        drawer_layout.closeDrawer(GravityCompat.START)
    } else {
        super.onBackPressed()
    }
}

override fun onNavigationItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
        ...
    }
    drawer_layout.closeDrawer(GravityCompat.START)
    return true
}

Impostor

Answer 4

Have you try to look at the documentation ? http://developer.android.com/training/implementing-navigation/nav-drawer.html

I've found this piece of code in it :

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, 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()
             }
        };

Biparty

Thing is I need to change this Icon dynamically.. I need to show number of notifications on this Icon. – Dipietro

@AbhishekBansal I need to show the number of notifications on the hamburger icon, too. Did you manage it? – Messere

Answer 5

With custom Toolbar

1. Set your Toolbar as ActionBar.

2. Then add homeicon using actionBar.setDisplayHomeAsUpEnabled(true);

Code snippet:

    Toolbar toolbar  = findViewById(R.id.customFBToolbar);
    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeAsUpIndicator(R.drawable.myham);  // This is the line where you set the drawable
    actionBar.setDisplayShowTitleEnabled(false);

Result:

Full code:

custom_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/psyche_toolbar"
    android:layout_width="match_parent"
    android:layout_height="56sp"
    android:background="@color/colorPrimaryDark"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    tools:ignore="title"
    tools:targetApi="lollipop">
    <TextView
        android:text="Facebook"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:layout_gravity="center"
        android:textStyle="bold"
        android:textSize="20sp"
        />
    <ImageView
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_gravity="end"
        android:layout_marginEnd="20sp"
        android:elevation="4dp"
        android:src="@android:drawable/ic_dialog_email"/>
</androidx.appcompat.widget.Toolbar>

MainActivity.java

public class MainActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Toolbar toolbar  = findViewById(R.id.customFBToolbar);
       setSupportActionBar(toolbar);
       ActionBar actionBar = getSupportActionBar();
       actionBar.setDisplayHomeAsUpEnabled(true);
       actionBar.setHomeAsUpIndicator(R.drawable.myham);  // This is the line where you set the drawable
       actionBar.setDisplayShowTitleEnabled(false);

   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {

       switch (item.getItemId()) {
          case android.R.id.home:
             Toast.makeText(MainActivity.this, "Home button clicked", Toast.LENGTH_SHORT).show();
             return true;

          default:
             return super.onOptionsItemSelected(item);
       }
   }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout">
    <include layout="@layout/custom_toolbar"
       android:id="@+id/customFBToolbar"
       android:layout_alignParentTop="true"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
    />
</RelativeLayout>

Sigfried

Answer 6

You can use this method to set navigation with icons in the whole application, I am sure it will work for you.its simple method

mainActivity.java

getSupportActionBar().bar.setDisplayHomeAsUpEnabled(true);//Doing so will make the icon appear


navController.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener() {
            @Override
            public void onDestinationChanged(@NonNull NavController navController, @NonNull NavDestination navDestination, @Nullable Bundle bundle) {
                if ( mAppBarConfiguration.getTopLevelDestinations().contains(navDestination.getId())){
                    toolbar.setNavigationIcon(R.drawable.yout_drawer_icon);
                } else {
                    toolbar.setNavigationIcon(R.drawable.you_back_icon);
                }
            }
        });

Serle