How to change Toolbar Navigation and Overflow Menu icons (appcompat v7)?

Question

I am having a hard time with v7 Toolbar. What was once a simple task for ActionBar, now seems overly complex. No matter what style I set, I cannot change either navigation icon (which opens a Drawer) or overflow menu icon (which opens a menu).

So I have a Toolbar

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ghex"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Light"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    >

I code it looks like this

//before in the code I do
mToolbar = (Toolbar) findViewById(R.id.toolbar);

private void initToolbar() {
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

Now, I need to change the Drawable for those two icons.

How do I do this for compat v7 Toolbar? I guess I would need to change the arrow visible when the drawer is open (Android 5.0).

Gabriele Mariotti · Accepted Answer · 2020-05-29T14:13:38.323

To change the navigation icon you can use:

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.my_icon);

To change the overflow icon you can use the method:

toolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_my_menu);

If you would like to change the color of the icons you can use:

with a Material Components Theme (with a MaterialToolbar for example):

<com.google.android.material.appbar.MaterialToolbar
    android:theme="@style/MyThemeOverlay_Toolbar"
    ...>

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- color used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/myColor</item>
  </style>

With an AppCompat Theme:

<android.support.v7.widget.Toolbar
  app:theme="@style/ThemeToolbar" />


<style name="ThemeToolbar" parent="Theme.AppCompat.Light">

   <!-- navigation icon color -->
   <item name="colorControlNormal">@color/my_color</item>

    <!-- color of the menu overflow icon -->
    <item name="android:textColorSecondary">@color/my_color</item>
</style>

You can also change the overflow icon overriding in the app theme the actionOverflowButtonStyle attribute:

With a Material Components Theme:

<style name="AppTheme.Base" parent="Theme.MaterialComponents.DayNight">
    <item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>

<style name="OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="srcCompat">@drawable/my_overflow_menu</item>
</style>

With an AppCompat theme:

<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>

<style name="OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="srcCompat">@drawable/my_overflow_menu</item>
</style>

I only what to change the color of those items. Can I do it without changing drawables? — sandalone, Mar 13 '15 at 20:10
I tried `setNavigationIcon` from the code already, but it does not change the icon. Do I have to make any reference in the toolbar XML, a reference to the Style? Or I simply set the style of the complete app in the Manifest file and the re-style it as you suggested? — sandalone, Mar 13 '15 at 20:13
@sandalone you can change the color without changing the drawables. Just updated the answer — Gabriele Mariotti, Mar 13 '15 at 20:43
Can I use the first style example somehow to change only the oveflow menu color without affecting the rest of the toolbar components? — ThanosFisherman, Sep 17 '15 at 13:33
How would you change the color of the overflow button at runtime? — android developer, Mar 24 '16 at 12:28
How do you know that android:textColorSecondary controls the menu overflow icon? And only the menu overflow icon? I'm really hoping for a document. — flobacca, May 26 '17 at 02:16
If you've added activity through Android studio, please check styles and local widget attributes as for color and theme changes first. — MobileEvangelist, Sep 01 '19 at 05:34

score 26 · Answer 2 · edited Jun 27 '19 at 16:49

26

mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_menu));

edited Jun 27 '19 at 16:49

Vadim Kotov

8,084
8
48
62

answered May 28 '16 at 04:12

androidmalin

899
1
8
12

2

I think this is the best answer. Because none of the answers related to modifying the themes and styles worked for me. – krisDrOid Aug 16 '17 at 18:48

chry · Answer 3 · 2017-08-24T23:09:35.443

For right menu you can do it:

public static Drawable setTintDrawable(Drawable drawable, @ColorInt int color) {
            drawable.clearColorFilter();
            drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
            drawable.invalidateSelf();
            Drawable wrapDrawable = DrawableCompat.wrap(drawable).mutate();
            DrawableCompat.setTint(wrapDrawable, color);
            return wrapDrawable;
        }

And in your activity

@Override
 public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_profile, menu);
        Drawable send = menu.findItem(R.id.send);
        Drawable msg = menu.findItem(R.id.message);
        DrawableUtils.setTintDrawable(send.getIcon(), Color.WHITE);
        DrawableUtils.setTintDrawable(msg.getIcon(), Color.WHITE);
        return true;
    }

This is the result:

If you are using a vector you can do `android:tint="YOUR COLOR"` as they did [here](https://medium.com/@chrisbanes/appcompat-v23-2-age-of-the-vectors-91cbafa87c88) — ArtiomLK, Sep 17 '17 at 23:43

score 4 · Answer 4 · answered Apr 08 '16 at 12:08

There is a simple, easy and better approach, if we need to change only the color of hamburger/back icon.

It is better as it changes color only of desired icon, whereas colorControlNormal and android:textColorSecondary might affect other childviews of toolbar as well.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

Hey Sachin, this worked wonderfully. Could you provide some references in the android documentation so that I can learn more about theming other widgets ? — Hydrocat, Jul 28 '20 at 11:59

Tamim Attafi · Answer 5 · 2018-02-05T16:13:21.523

if you want to change your icons to a Vector , create a new one. and then in your Activity.java :

Toolbar toolbar = findViewById(R.id.your_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.your_icon);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.your_icon2));

To change Vector icon Color, go to your Vector XML file.. in this case it will be your_icon.xml, it will look like this :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="@color/Your_Color"
    android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>

Note that we used these attributes to set the Vector's color :

android:fillColor="@color/Your_Color"

Edit : You can't use a color from your colors.XML or somewhere else , the color must be decalred directly in the Vector's XML file.. so it will look like this :

android:fillColor="#FFF"

score 2 · Answer 6 · answered May 01 '18 at 09:52

2

if you want to change menu item icons, arrow icon (back/up), and 3 dots icon you can use android:tint

  <style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:tint">@color/your_color</item>
  </style>

answered May 01 '18 at 09:52

user25

2,873
2
30
66

score 1 · Answer 7 · answered Mar 15 '16 at 21:32

All the above solutions worked for me in API 21 or greater, but did not in API 19 (KitKat). Making a small change did the trick for me in the earlier versions. Notice Widget.Holo instead of Widget.AppCompat

<style name="OverFlowStyle"    parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_overflow</item>
</style>

score 1 · Answer 8 · answered Sep 22 '17 at 07:41

1

add your default theme this line;

   <item name="colorControlNormal">@color/my_color</item>

answered Sep 22 '17 at 07:41

ali ozkara

5,425
2
27
24

score 0 · Answer 9 · answered May 02 '18 at 13:05

which theme you have used in activity add below one line code

for white

<style name="AppTheme.NoActionBar">
      <item name="android:tint">#ffffff</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:tint">#ffffff</item>
</style>

for black

   <style name="AppTheme.NoActionBar">
      <item name="android:tint">#000000</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:tint">#000000</item>
</style>

score 0 · Answer 10 · answered Aug 08 '19 at 14:00

0

To change color for options menu items you can

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.your_menu, menu)

    menu?.forEach {
        it.icon.setTint(Color.your_color)
    }

    return true
}

answered Aug 08 '19 at 14:00

Belogurow

23
1
8

score 0 · Answer 11 · answered Apr 06 '22 at 11:26

In kotlin

setSupportActionBar(binding.appBarParcels.toolbar)

val drawerLayout: DrawerLayout = binding.drawerLayout val navView: NavigationView = binding.navView

    val navController = findNavController(R.id.nav_host_fragment_content_parcels)
    // Passing each menu ID as a set of Ids because each
    // menu should be considered as top level destinations.
    appBarConfiguration = AppBarConfiguration(
        setOf(
            R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow,
        ), drawerLayout
    )
    setupActionBarWithNavController(navController, appBarConfiguration)
    navView.setupWithNavController(navController)

    //close navigation drawer on navigation menu item listener
    navView.setNavigationItemSelectedListener(NavigationView.OnNavigationItemSelectedListener { item ->
        if (item.itemId == R.id.closeDrawer) {
            onNavDestinationSelected(item, navController)
            drawerLayout.closeDrawers()
        } else {
            onNavDestinationSelected(item, navController)
            drawerLayout.closeDrawers()
        }
        false
    })

TO change the tool bar icon

supportActionBar!!.setHomeAsUpIndicator(R.drawable.ic_navigation_drawer_icon_default)

score -1 · Answer 12 · edited Apr 17 '16 at 06:16

-1

In order to show the icon, use getSupportActionBar().setIcon(R.xxx.xxx)

In my case the code is:-

getSupportActionBar().setIcon (R.mipmap.ic_launcher);

edited Apr 17 '16 at 06:16

MikeT

51,415
16
49
68

answered Apr 17 '16 at 05:07

Alvaro de Lucas

169
1
4

How to change Toolbar Navigation and Overflow Menu icons (appcompat v7)?

12 Answers12

Linked

Related