AVAILABLE: 5
I was struggling with Toolbar v7. What used to be a simple task with ActionBar now feels overly complicated. I can't seem to change the navigation icon (which opens the Drawer) or the overflow menu icon (which opens the menu) regardless of the style I set.
Here’s my sample code:
In XML:
<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"
/>
In Java:
// earlier in the code
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 both icons.
How can I achieve this for Toolbar compat v7? I assume I need to change the arrow displayed when the drawer is open (on Android 5.0).
Solution
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);
For the overflow icon:
toolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_my_menu));
If you want to change the icon color, you can use the Material Components theme (e.g., with MaterialToolbar
):
<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>
Or use AppCompat:
<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 overflow menu icon -->
<item name="android:textColorSecondary">@color/my_color</item>
</style>
To customize the overflow menu icon, override the actionOverflowButtonStyle
attribute in your app theme:
Using 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>
Using AppCompat:
<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>
And that's it!