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

Question

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

因此，我有一个工具栏

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

我编写的代码如下

//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），需要更改箭头的可见性。

- sandalone

Answer 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主题（例如使用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属性来更改溢出图标的外观：

使用Material Components主题：

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

- Gabriele Mariotti

---

我只想改变那些项目的颜色，我可以在不改变可绘制对象的情况下做到吗？ - sandalone

我已经尝试了代码中的setNavigationIcon函数，但它并没有改变图标。我需要在工具栏的XML文件中做任何引用或者参考Style吗？或者我只需要在Manifest文件中设置应用的整体样式，然后按照你建议的重新进行样式设计？ - sandalone

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

您如何在运行时更改溢出按钮的颜色？ - android developer

你怎么知道android:textColorSecondary控制菜单溢出图标？而且只控制菜单溢出图标？我真的希望有一份文档。 - flobacca

Answer 2

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

- androidmalin

---

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

Answer 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;
    }

这是结果：

（注：该内容为HTML代码，已经翻译过，无需再次翻译）

- chry

---

如果您正在使用向量图，您可以像他们在这里所做的那样使用android:tint="YOUR COLOR"。 - ArtiomLK

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

---

嗨，Sachin，这个很棒。你能提供一些在Android文档中的参考资料，以便我可以了解更多关于主题化其他小部件的内容吗？ - Hydrocat

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

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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    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"/>

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

android:fillColor="@color/Your_Color"

编辑：您不能使用来自colors.XML或其他地方的颜色，颜色必须直接在向量的XML文件中声明。因此，它将如下所示：

android:fillColor="#FFF"

- Tamim Attafi

Answer 6

如果您想更改菜单项图标、箭头图标（返回/向上）和三个点的图标，可以使用 android:tint

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

- user25

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

- Eric B.

Answer 8

将您的默认主题添加到此行；

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

- ali ozkara

Answer 9

你在Activity中使用了哪个主题，请在下面添加一行代码。

用于白色主题

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

- pruthwiraj.kadam

Answer 10

使用 Kotlin

setSupportActionBar(binding.appBarParcels.toolbar)

val drawerLayout：DrawerLayout = binding.drawerLayout val navView：NavigationView = binding.navView

    val navController = findNavController(R.id.nav_host_fragment_content_parcels)
    // Passing each menu ID as a set of Ids because each
    // menu should be considered as top level destinations.
    appBarConfiguration = AppBarConfiguration(
        setOf(
            R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow,
        ), drawerLayout
    )
    setupActionBarWithNavController(navController, appBarConfiguration)
    navView.setupWithNavController(navController)

    //close navigation drawer on navigation menu item listener
    navView.setNavigationItemSelectedListener(NavigationView.OnNavigationItemSelectedListener { item ->
        if (item.itemId == R.id.closeDrawer) {
            onNavDestinationSelected(item, navController)
            drawerLayout.closeDrawers()
        } else {
            onNavDestinationSelected(item, navController)
            drawerLayout.closeDrawers()
        }
        false
    })

更改工具栏图标

supportActionBar!!.setHomeAsUpIndicator(R.drawable.ic_navigation_drawer_icon_default)

- Muhammad Etisam Zafar