Change the color of overflow menu icons in a material toolbar

user_9746867 0
Viewed 3433

I want to change the overflow menu icons color in my material toolbar depending on the android:theme value.

In this example my search icon is affected by the toolbar's theme via some magic related to the app:actionViewClass attribute implementation, but my info icon is not.

My toolbar:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
    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:fitsSystemWindows="true"
    app:liftOnScroll="true">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        app:title="@string/app_name"
        app:menu="@menu/menu_main"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>

</com.google.android.material.appbar.AppBarLayout>

My menu:

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search_24dp"
        app:showAsAction="always"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        android:title="TODO" />

    <item android:id="@+id/action_info"
        android:icon="@drawable/ic_info_24dp"
        app:showAsAction="always"
        android:title="TODO" />

</menu>

Does a simple solution exists?

android-toolbar material-components material-components-android android
3 Answers

You can use:

<com.google.android.material.appbar.MaterialToolbar
    style="@style/Widget.MaterialComponents.Toolbar.Primary"
    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>
user_20165620

You can head over to the Material Components documentation which has a lot of information about styling each part of views from the library.

In this case it seems like the action icon tint is set by the colorControlNormal attribute.

Documentation - Top app bars

user_100822970

Maybe this answer comes too late, but just in case other people need it, I will post my answer here.

The problem you are facing will be solved if you set the attribute theme to the AppBarLayout instead of the MaterialToolbar.

So, in your code, your toolbar should look like this:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
    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:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
    app:liftOnScroll="true">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        app:title="@string/app_name"
        app:menu="@menu/menu_main"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>

</com.google.android.material.appbar.AppBarLayout>

Hope this helps to anyone!

user_69383890
Related