更改工具栏溢出图标颜色
Change Toolbar overflow icon color
我的 Android 应用程序中有一个 android.support.v7.widget 工具栏。它的背景颜色是亮橙色，最好看的颜色是白色而不是黑色。
我的默认颜色是黑色而不是白色。由于它会与其他东西发生冲突，因此几乎无法覆盖。 我无法将主要文本颜色更改为白色！
我已经成功更改了标题颜色。
我现在正在寻找的是如何将操作按钮的颜色也更改为白色。
我的代码：
主要activity:
<?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>
解决方法是更换图标本身。
第一
转到 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>
第二
然后转到 drawable 文件夹。单击鼠标右键 -> 新建 -> 矢量资产。
然后按图标图像并从名为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 颜色的结果）。
样式：
<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>
结果：
另一种方法，用代码代替 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;
}
如果成功为溢出图标着色，该函数将 return 为真。
如果您不想使用有色可绘制对象，还有另一种选择：
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;
}
此外，如果你想给操作项和导航项的图标着色，你可以试试这个（基于here）：
/**
* 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
}
对于 AndroidX 用户（真的不知道它是否可以使用旧的支持库）：[=21=]
长话短说：
<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。
在此可绘制对象的实现中，您可以看到以下内容：
android:tint="?attr/colorControlNormal"
如果您想更改工具栏中图标（导航图标、菜单项图标）的颜色，只需使用以下代码即可。我已经保存了问题并使用它解决了问题。
<!--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>
如果有人想以编程方式更改它，但以下方法不起作用：
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)
我的 Android 应用程序中有一个 android.support.v7.widget 工具栏。它的背景颜色是亮橙色，最好看的颜色是白色而不是黑色。
我的默认颜色是黑色而不是白色。由于它会与其他东西发生冲突，因此几乎无法覆盖。 我无法将主要文本颜色更改为白色！
我已经成功更改了标题颜色。 我现在正在寻找的是如何将操作按钮的颜色也更改为白色。
我的代码：
主要activity:
<?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>
解决方法是更换图标本身。
第一
转到 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>
第二
然后转到 drawable 文件夹。单击鼠标右键 -> 新建 -> 矢量资产。 然后按图标图像并从名为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 颜色的结果）。
样式：
<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>
结果：
另一种方法，用代码代替 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;
}
如果成功为溢出图标着色，该函数将 return 为真。
如果您不想使用有色可绘制对象，还有另一种选择：
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;
}
此外，如果你想给操作项和导航项的图标着色，你可以试试这个（基于here）：
/**
* 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
}
对于 AndroidX 用户（真的不知道它是否可以使用旧的支持库）：[=21=]
长话短说：
<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。
在此可绘制对象的实现中，您可以看到以下内容：
android:tint="?attr/colorControlNormal"
如果您想更改工具栏中图标（导航图标、菜单项图标）的颜色，只需使用以下代码即可。我已经保存了问题并使用它解决了问题。
<!--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>
如果有人想以编程方式更改它，但以下方法不起作用：
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)