Change ActionBarDrawer toggle icon when using v7 library

Question

I want to use a custom image in place of the default icon used to toggle the navigation drawer in android. How do I go about it? Here is an image of what I want to change.

score 6 · Accepted Answer · edited Dec 06 '15 at 21:27

6

Use below code to set your custom ActionBar toggle button.

mDrawerToggle.setDrawerIndicatorEnabled(false);

// mDrawerToggle.setHomeAsUpIndicator(R.drawable.menu_icon);
mToolbar.setNavigationIcon(R.drawable.menu_icon);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {

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

edited Dec 06 '15 at 21:27

Mike

4,550
4
33
47

answered Nov 30 '15 at 14:41

vishal jangid

2,967
16
22

Such a simple answer and yet I spent decades scratching my head. Thanks @vishal. – mungaih pk Nov 30 '15 at 15:52
1

I think it's a better practice to change it in your themes or styles, instead of programatically. Still serves the purpose though. – Alper Cem Polat Dec 04 '15 at 08:04

score 3 · Answer 2 · answered Dec 02 '15 at 11:31

you can change with style.xml

 <style
    name="BaseTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="homeAsUpIndicator">@drawable/menu</item>
    <item name="android:textColorPrimary">@android:color/white</item>
</style>

score 0 · Answer 3 · answered Dec 06 '15 at 08:33

@Arya gave a nice example using styles.xml like so:

<style name="BaseTheme" parent="Theme.AppCompat.NoActionBar">
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  <item name="homeAsUpIndicator">@drawable/menu</item>
  <item name="android:textColorPrimary">@android:color/white</item>
</style>

You can also do it programmatically:

public void setTitle(String title, int homeAsUpIndicator) {
  if (getSupportActionBar() != null) {
    getSupportActionBar().setTitle(title);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeAsUpIndicator(homeAsUpIndicator);
  }
}

Then in your onCreate() method you can call the setTitle method with the up indicator ican as a resource.

NOTE: this is using the support action bar with the new Toolbar.

score 0 · Answer 4 · answered Dec 07 '15 at 06:18

To change the icon of the navigation menu, you need to define your image in the ActionBarDrawerToggle object like the following: mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, YOUR IMAGE_SOURCE HERE, R.string.drawer_open, R.string.drawer_close)

If you find any difficulty then you can comment it.

score 0 · Answer 5 · answered Dec 07 '15 at 13:23

I have used custom action bar and handled the back action on my own. I think, its the best way. PFB the xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:layout_margin="@dimen/outer_padding" >

    <ImageView
        android:id="@+id/btnBack"
        style="@style/back_button_style"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:src="@drawable/white_arrow" />

    <com.example.widgets.CustomTextView
        android:id="@+id/tvTitleImage"
        style="@style/actionbar_text_style"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/btnBack"
        android:padding="@dimen/outer_padding"
        android:text="@string/requests_text"
        custom:typefaceAsset="@string/berlin_bold" />

    <ImageView
        android:id="@+id/btnAdd"
        style="@style/back_button_style"
        android:layout_width="@dimen/actionbar_menu_icon_dim"
        android:layout_height="@dimen/actionbar_menu_icon_dim"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/ivSearch"
        android:src="@drawable/app_icon" />

    <ImageView
        android:id="@+id/ivSearch"
        style="@style/back_button_style"
        android:layout_width="@dimen/actionbar_menu_icon_dim"
        android:layout_height="@dimen/actionbar_menu_icon_dim"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/app_icon" />

</RelativeLayout>

Change ActionBarDrawer toggle icon when using v7 library

5 Answers5