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).
4 Comments. The overflow icon is a common UI convention that's leveraged throughout Android to hide settings and other unimportant options. Google is now replacing it in the Play Store with a “tap & hold” gesture and bottom sheet menu.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With