更改工具欄溢出圖標顏色

Question

我的 Android 應用中有一個android.support.v7.widget工具欄。 它的背景顏色是亮橙色，在它上面最好看的顏色是白色而不是黑色。

我的默認顏色是黑色而不是白色。 由於它會與其他東西發生沖突，因此幾乎不可能覆蓋。 我無法將主要文本顏色更改為白色！

我設法更改了標題顏色。 我現在正在尋找的是如何更改操作按鈕顏色（為白色）。

我的代碼：

主要活動：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".UI.activities.MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/r2_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:titleTextColor="@color/primary_text_material_light"
    app:subtitleTextColor="@color/primary_text_material_light"
    android:theme="@style/R2Theme.Toolbar"/>

<fragment android:name="com.r2retail.r2retailapp.UI.fragments.SetupFragment"
    android:layout_below="@+id/r2_toolbar"
    android:id="@+id/list"
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />


</RelativeLayout>

菜單欄：

<?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/about"
    android:icon="@drawable/ic_menu"
    android:title="About"
    app:showAsAction="never"/>

</menu>

款式：

<resources>

<style name="R2Theme" parent="Theme.AppCompat.Light.NoActionBar">=
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimary</item>
    <item name="android:textColorPrimary">@color/secondary_text_material_dark</item>
    <item name="android:textColorSecondaryInverse">@color/primary_text_material_light</item>
</style>

<style name="R2Theme.Toolbar" parent="R2Theme">
    <item name="actionMenuTextColor">@color/primary_text_material_light</item>
</style>

</resources>

Answer 1

在樣式中：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="actionOverflowButtonStyle">@style/MyOverflowButtonStyle</item>
</style>

<style name="MyOverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:tint">#62ff00</item>
</style>

結果：

Answer 2

解決方案是更換圖標本身。

第一

轉到values/styles並在您的styles.xml文件中添加：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
</style>

<style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
    <!--Here you need to put name of drawable you will create during the next step-->
    <item name="android:src">@drawable/your_white_icon</item> 
</style>

第二

然后轉到可繪制文件夾。 鼠標右鍵單擊 -> 新建 -> 矢量資產。 然后按圖標圖像並從名為ic_more_vert_black_24dp 的建議圖標中進行選擇。

自定義 -> 按下一步 -> 完成。

然后打開新創建的圖標文件。 代碼看起來像這樣。

<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="#FFFFFFFF" <!-- Here u can change color-->
        android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</vector>

將fillColor屬性更改為您需要的顏色。 將此文件放入第一步中描述的樣式。

瞧！ 我們三個點的顏色不根據基本應用程序樣式而改變（#FF2012 顏色的結果）。

Answer 3

另一種方法，用代碼代替 XML：

public static boolean colorizeToolbarOverflowButton(@NonNull Toolbar toolbar, @ColorInt int color) {
    final Drawable overflowIcon = toolbar.getOverflowIcon();
    if (overflowIcon == null)
        return false;
    toolbar.setOverflowIcon(getTintedDrawable(toolbar.getContext(), overflowIcon, toolbarIconsColor));
    return true;
}

public static Drawable getTintedDrawable(@NonNull Context context, @NonNull Drawable inputDrawable, @ColorInt int color) {
    Drawable wrapDrawable = DrawableCompat.wrap(inputDrawable);
    DrawableCompat.setTint(wrapDrawable, color);
    DrawableCompat.setTintMode(wrapDrawable, Mode.SRC_IN);
    return wrapDrawable;
}

如果成功為溢出圖標着色，該函數將返回 true。

還有另一種選擇，以防您不想使用有色可繪制對象：

public static boolean colorizeToolbarOverflowButton(@NonNull Toolbar toolbar, @ColorInt Integer color) {
    final Drawable overflowIcon = toolbar.getOverflowIcon();
    if (overflowIcon == null)
        return false;
    final PorterDuffColorFilter colorFilter = toolbarIconsColor == null ? null : new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.MULTIPLY);
    overflowIcon.setColorFilter(colorFilter);
    return true;
}

此外，如果您希望為操作項和導航項的圖標着色，可以嘗試此操作（基於此處）：

/**
 * Use this method to colorize toolbar icons to the desired target color
 *
 * @param toolbarView       toolbar view being colored
 * @param toolbarIconsColor the target color of toolbar icons
 */
@JvmStatic
@UiThread
fun colorizeToolbarActionItemsAndNavButton(toolbarView: Toolbar, @ColorInt toolbarIconsColor: Int?) {
    //https://snow.dog/blog/how-to-dynamicaly-change-android-toolbar-icons-color/
    val colorFilter = if (toolbarIconsColor == null) null else PorterDuffColorFilter(toolbarIconsColor, Mode.MULTIPLY)
    for (i in 0 until toolbarView.childCount) {
        val v = toolbarView.getChildAt(i)
        //Step 1 : Changing the color of back button (or open drawer button).
        if (v is ImageButton) {
            //Action Bar back button
            v.drawable.mutate().colorFilter = colorFilter
        }
        if (v is ActionMenuView) {
            for (j in 0 until v.childCount) {
                //Step 2: Changing the color of any ActionMenuViews - icons that
                //are not back button, nor text, nor overflow menu icon.
                val innerView = v.getChildAt(j)
                if (innerView is ActionMenuItemView) {
                    val drawablesCount = innerView.compoundDrawables.size
                    for (k in 0 until drawablesCount) {
                        if (innerView.compoundDrawables[k] != null) {
                            innerView.post { innerView.compoundDrawables[k].mutate().colorFilter = colorFilter }
                        }
                    }
                }
            }
        }
    }
}

用法：

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu_main, menu)
    toolbar.doOnPreDraw {
        colorizeToolbarActionItemsAndNavButton(toolbar,0xffff0000.toInt())
    }
    return true
}

Answer 4

對於 AndroidX 用戶（真的不知道它是否可以使用舊的支持庫）：

特爾；博士：

<style name="MyToolbarTheme">
  <item name="colorControlNormal">@color/white</item>
</style>

將MyToolbarTheme應用到您的Toolbar視圖。

---

長解釋：

Widget.AppCompat.ActionButton.Overflow擴展了Base.Widget.AppCompat.ActionButton.Overflow 。 我們將討論后者：

在默認實現上：

<style name="Base.Widget.AppCompat.ActionButton.Overflow" parent="RtlUnderlay.Widget.AppCompat.ActionButton.Overflow">
  <item name="srcCompat">@drawable/abc_ic_menu_overflow_material</item>
  ...
</style>

在 API 21 實現上：

<style name="Base.Widget.AppCompat.ActionButton.Overflow" parent="android:Widget.Material.ActionButton.Overflow">
  <item name="android:src">@null</item>
  <item name="srcCompat">@drawable/abc_ic_menu_overflow_material</item>
</style>

在 API 23 和更高版本的實現上：

它擴展了android:Widget.Material.ActionButton.Overflow 。

<style name="Widget.Material.ActionButton.Overflow">
  <item name="src">@drawable/ic_menu_moreoverflow_material</item>
  ...
</style>

我們可以注意到每個實現都使用@drawable/ic_menu_moreoverflow_material 。

在此 drawable 的實現中，您可以看到以下內容：

android:tint="?attr/colorControlNormal"

Answer 5

如果要更改工具欄中圖標（導航圖標、菜單項圖標）的顏色，只需使用以下代碼即可。 我已經保存了問題並使用它解決了。

<!--Light Theme-->
<style name="AppThemeLight" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!--other colors and properties-->
    <item name="iconTint">@color/colorBlack</item>
</style>

<!-- Dark/Night theme. -->
<style name="AppThemeDark" parent="Theme.MaterialComponents.NoActionBar">
    <!--other colors and properties-->
    <item name="iconTint">@color/colorWhite</item>
</style>

Answer 6

如果有人希望以編程方式更改它，並且以下內容不起作用：

mBinding.toolbar.overflowIcon?.setTint(Color.WHITE)

或者

mBinding.toolbar.overflowIcon?.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP)

或者

mBinding.toolbar.overflowIcon?.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(Color.WHITE, BlendModeCompat.SRC_ATOP)

或者

val overflowIcon = ContextCompat.getDrawable(this, R.drawable.dots_vertical_black)
overflowIcon?.setTint(Color.WHITE)
mBinding.toolbar.overflowIcon = overflowIcon

嘗試這個。

最后，下面的行對我有用（經過 2 天的反復試驗-_-）

mBinding.toolbar.menu?.findItem(R.id.menu)?.icon?.setTint(Color.WHITE)