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

Question

我在使用 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_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)。

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 组件主题（例如带有 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 组件主题：

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

Answer 2

以上所有解决方案都适用于 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>

Answer 3

如果我们只需要更改 hamburger/back 图标的颜色，有一个简单、容易且更好的方法。

更好，因为它只改变所需图标的颜色，而 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>

Answer 4

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

在我的例子中，代码是：-

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

Answer 5

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

Answer 6

对于右侧菜单你可以这样做：

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

And in your activity

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

这是结果：

Answer 7

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

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

Answer 8

如果您想将图标更改为矢量，请创建一个新图标。然后在你的 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: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 或其他地方的颜色，颜色必须直接在 Vector 的 XML 文件中贴花.. 所以它看起来像这样：

android:fillColor="#FFF"

Answer 9

如果您想更改菜单项图标、箭头图标 (back/up) 和三点图标，您可以使用 android:tint

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

Answer 10

你用过哪个主题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>

Answer 11

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

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

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

    return true
}

Answer 12

在科特林中

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)

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

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

android

android-appcompat

android-layout

material-design

android-toolbar