在Material Design工具栏中更改溢出菜单图标的颜色。

Question

我想根据android:theme值更改我的材料工具栏中溢出菜单图标的颜色。

在此示例中，我的搜索图标受到工具栏主题的影响，这是由于与app:actionViewClass属性实现相关的某些神奇操作，但我的信息图标没有受到影响。

我的工具栏：

<?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>

我的菜单：

<?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>

有没有简单的解决方案？

- Fabio

Answer 1

您可以使用：

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

- Gabriele Mariotti

---

我在许多类似的问题中看到过这个答案但它实际上对我无效，这在你的电脑上是否表现正常？ - Fabio

@Fabio 刚在一个干净的项目中尝试了 1.1.0、1.2.0-beta01、1.3.0-alpha01，它可以正常工作。请注意你的主题叠加中的 parent="ThemeOverlay.MaterialComponents.Toolbar.Primary"。 - Gabriele Mariotti

那很奇怪，你也在使用Android Studio 4.0版本吗？ - Fabio

@GabrieleMariotti 我该如何更改未溢出的菜单项的颜色？ - VVB

@GabrieleMariotti 我注意到使用这种方法时，改变颜色的菜单项是具有 app:showAsAction="never" 属性的。其他菜单项保持 drawable 的颜色。有什么想法吗？我使用的是 material:1.9.0 版本。在 1.3.0-alpha01 版本中，您提供的解决方案可行。 - Leandro Ocampo

Answer 2

你可以前往 Material Components 文档，该文档提供了关于从库中的每个视图部分进行样式设置的大量信息。

在这种情况下，看起来操作图标的色调是由 colorControlNormal 属性设置的。

文档 - 顶部应用栏

- Henry Twist

Answer 3

也许这个答案来的有些晚了，但是以防其他人需要，我会在这里发布我的答案。

如果你把属性theme设置到AppBarLayout而不是MaterialToolbar上，你面临的问题将会得到解决。

所以，在你的代码中，你的工具栏应该像这样：

<?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>

希望这对任何人有所帮助！

- Jordi Coll

Answer 4

关于 Actionbar Toolbar MaterialToolbar 有很多答案，但是示例的方法是在代码中设置图标颜色。以下是一些代码示例，展示了如何在活动中设置图标颜色：

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu_activity_main, menu)

    val iconColor = ContextCompat.getColor(this, R.color.toolbar_action_menu_icon)
    for (index in 0 until menu.size) {
        val menuItem = menu.getItem(index)
        DrawableCompat.setTint(
            menuItem.icon,
            iconColor
        )
    }
    return true
}

menu_activity_main 是你的菜单文件，toolbar_action_menu_icon 是在 color.xml 文件中定义的菜单图标颜色。

- didikee