Android Toolbar Navigation & Menu Icons (ATNMI)



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!


Post a Comment

Previous Next

نموذج الاتصال