如何更改工具栏导航和溢出菜单图标（appcompat v7）？

Posted 2023-02-22

【中文标题】如何更改工具栏导航和溢出菜单图标（appcompat v7）？

【英文标题】：How to change Toolbar Navigation and Overflow Menu icons (appcompat v7)?

【发布时间】：2015-05-16 07:49:59

【问题描述】：

我很难使用 v7 工具栏。对于ActionBar 来说，曾经是一项简单的任务，现在似乎过于复杂了。无论我设置什么样式，我都无法更改导航图标（打开抽屉）或溢出菜单图标（打开菜单）。

所以我有一个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_
    android:layout_
    android:background="@color/ghex"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Light"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    >

我的代码看起来像这样

//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);

现在，我需要更改这两个图标的Drawable。

如何为 compat v7 Toolbar 执行此操作？我想我需要更改抽屉打开时可见的箭头（Android 5.0）。

【参考方案1】：

要更改导航图标，您可以使用：

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

要改变溢出图标可以使用方法：

toolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_my_menu);

如果您想更改您可以使用的图标的颜色：

带有Material Components Theme（例如带有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>

---

使用 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 menu overflow icon -->
    <item name="android:textColorSecondary">@color/my_color</item>
</style>

---

您还可以更改应用主题中覆盖 actionOverflowButtonStyle 属性的溢出图标：

使用材质组件主题：

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

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

【讨论】：

我只改变那些项目的颜色。我可以在不更改可绘制对象的情况下做到这一点吗？

我已经从代码中尝试了setNavigationIcon，但它并没有改变图标。我是否必须在工具栏 XML 中进行任何引用，对样式的引用？或者我只是在 Manifest 文件中设置完整应用程序的样式，然后按照您的建议重新设置样式？

@sandalone 您可以在不更改可绘制对象的情况下更改颜色。刚刚更新了答案

我可以使用第一个样式示例以某种方式仅更改 oveflow 菜单颜色而不影响其余工具栏组件吗？

在运行时如何改变溢出按钮的颜色？

【参考方案2】：

mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_menu));

【讨论】：

我认为这是最好的答案。因为没有一个与修改主题和样式相关的答案对我有用。

【参考方案3】：

右菜单你可以这样做：

public static Drawable setTintDrawable(Drawable drawable, @ColorInt int color) 
            drawable.clearColorFilter();
            drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
            drawable.invalidateSelf();
            Drawable wrapDrawable = DrawableCompat.wrap(drawable).mutate();
            DrawableCompat.setTint(wrapDrawable, color);
            return wrapDrawable;
        

在你的活动中

@Override
 public boolean onCreateOptionsMenu(Menu menu) 
        getMenuInflater().inflate(R.menu.menu_profile, menu);
        Drawable send = menu.findItem(R.id.send);
        Drawable msg = menu.findItem(R.id.message);
        DrawableUtils.setTintDrawable(send.getIcon(), Color.WHITE);
        DrawableUtils.setTintDrawable(msg.getIcon(), Color.WHITE);
        return true;
    

这是结果：

【讨论】：

如果您使用矢量，您可以像 here 那样做android:tint="YOUR COLOR"

【参考方案4】：

如果我们只需要改变汉堡包/后退图标的颜色，有一个简单、容易和更好的方法。

最好只改变所需图标的颜色，而colorControlNormal 和android:textColorSecondary 可能也会影响工具栏的其他子视图。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

【讨论】：

嘿，Sachin，这非常有效。您能否在 android 文档中提供一些参考资料，以便我了解更多关于主题化其他小部件的信息？

【参考方案5】：

如果您想将图标更改为 矢量 ，请创建一个新图标。 然后在您的 Activity.java 中：

Toolbar toolbar = findViewById(R.id.your_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.your_icon);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.your_icon2));

要更改 Vector 图标颜色，请转到您的 Vector XML 文件。在这种情况下，它将是 your_icon.xml，它看起来像这样：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="@color/Your_Color"
    android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>

请注意，我们使用这些属性来设置 Vector 的颜色：

android:fillColor="@color/Your_Color"

编辑：你不能使用你的colors.XML或其他地方的颜色，颜色必须直接在Vector的XML文件中贴花..所以它看起来像这样：

android:fillColor="#FFF"

【参考方案6】：

如果您想更改菜单项图标、箭头图标（后退/向上）和 3 点图标，您可以使用 android:tint

  <style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:tint">@color/your_color</item>
  </style>

【参考方案7】：

以上所有解决方案都适用于 API 21 或更高版本，但不适用于 API 19 (KitKat)。在早期版本中，做一个小的改变对我有用。注意Widget.Holo 而不是Widget.AppCompat

<style name="OverFlowStyle"    parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_overflow</item>
</style>

【参考方案8】：

在这一行添加您的默认主题；

   <item name="colorControlNormal">@color/my_color</item>

【参考方案9】：

你在活动中使用过的主题在一行代码下面添加

白色

<style name="AppTheme.NoActionBar">
      <item name="android:tint">#ffffff</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:tint">#ffffff</item>
</style>

黑色

   <style name="AppTheme.NoActionBar">
      <item name="android:tint">#000000</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:tint">#000000</item>
</style>

【参考方案10】：

要更改选项菜单项的颜色，您可以

override fun onCreateOptionsMenu(menu: Menu?): Boolean 
    menuInflater.inflate(R.menu.your_menu, menu)

    menu?.forEach 
        it.icon.setTint(Color.your_color)
    

    return true

【参考方案11】：

为了显示图标，使用getSupportActionBar().setIcon(R.xxx.xxx)

就我而言，代码是：-

getSupportActionBar().setIcon (R.mipmap.ic_launcher);