Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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).

like image 218
sandalone Avatar asked Mar 13 '15 17:03

sandalone


People also ask

What is overflow menu icon?

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.


1 Answers

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> 
like image 179
Gabriele Mariotti Avatar answered Sep 22 '22 04:09

Gabriele Mariotti