How to change Toolbar Navigation and Overflow Menu icons (appcompat v7)?
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).
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>
mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_menu));
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:
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>
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"