How to Change Toolbar Navigation and Overflow Menu Icons (Appcompat V7)

How to change Toolbar Navigation and Overflow Menu icons (appcompat v7)?

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>

How to change Toolbar home icon color

I solved it by editing styles.xml:

<style name="ToolbarColoredBackArrow" parent="AppTheme">
    <item name="android:textColorSecondary">INSERT_COLOR_HERE</item>
</style>

...then referencing the style in the Toolbar definition in the activity:

<LinearLayout
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        app:theme="@style/ToolbarColoredBackArrow"
        app:popupTheme="@style/AppTheme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>

How can I change android Toolbar home icon

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_right_select);

Change Toolbar overflow icon color

In styles:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="actionOverflowButtonStyle">@style/MyOverflowButtonStyle</item>
</style>

<style name="MyOverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:tint">#62ff00</item>
</style>

Result:

Change back icon color in toolbar

use this style

<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
        <!-- Customize color of Toolbar -->
        <item name="colorControlNormal">@color/WhiteColor</item>
    </style>

and then use it in app:theme="@style/ToolbarTheme" in your Toolbar XML :

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:textColor="#FFF"
        android:textColorPrimary="#FFF"
        app:theme="@style/ToolbarTheme"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="#FFF"
        app:title="@string/app_name"/>

How to change all ToolBar's icons color dynamically without styling toolbar

I was facing same problem here. What I did for ToolBar's elements:

1. For background color: toolbar.setBackgroundColor(Color.parseColor("#xxxxxxxx"));
2. For text color: toolbar.setTitleTextColor(Color.parseColor("#xxxxxxxx"));

3. For hamburger/drawer button:

   int color = Color.parseColor("#xxxxxxxx");
   final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);
   
   for (int i = 0; i < toolbar.getChildCount(); i++){
   
       final View v = toolbar.getChildAt(i);
   
       if(v instanceof ImageButton) {
           ((ImageButton)v).setColorFilter(colorFilter);
       }
   }
   

4. For ActionMenuItemView (toolbar's buttons including overflow button):

   private void colorizeToolBarItem(AppCompatActivity activity, final PorterDuffColorFilter colorFilter, final String description) {
   
       final ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
       final ViewTreeObserver viewTreeObserver = decorView.getViewTreeObserver();
   
       viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
           @Override
           public void onGlobalLayout() {
   
               final ArrayList<View> outViews = new ArrayList<>();
               decorView.findViewsWithText(outViews, description,
                   View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
               if (outViews.isEmpty())
                   return;
   
               ActionMenuItemView overflow = (ActionMenuItemView)outViews.get(0);
               overflow.getCompoundDrawables()[0].setColorFilter(colorFilter);
               removeOnGlobalLayoutListener(decorView,this);
           }
       });
   }
   

5. For overflow menu's items text: take a look at this link

---

Related Topics