java 更改工具栏溢出图标颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43537958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-11-03 07:31:20  来源:igfitidea点击:

Change Toolbar overflow icon color

javaandroidandroid-layoutandroid-viewandroid-toolbar

提问by Dennis van der Veeke

I have an android.support.v7.widgetToolbar in my Android app. The background color of this is bright orange and the best looking color on top of this would be white instead of black.

我的android.support.v7.widgetAndroid 应用中有一个工具栏。它的背景颜色是亮橙色,在它上面最好看的颜色是白色而不是黑色。

I have the default color on black and not white. Since it would conflict with other stuff, that is almost impossible to override. I cannot change the primary text color to white!

我的默认颜色是黑色而不是白色。由于它会与其他东西发生冲突,因此几乎不可能覆盖。我无法将主要文本颜色更改为白色!

I've managed to change the title color. What I'm looking for right now is how I can change the action button color as well (to white).

我设法更改了标题颜色。 我现在正在寻找的是如何更改操作按钮颜色(为白色)。

enter image description here

在此处输入图片说明

My code:

我的代码:

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

Menu bar:

菜单栏:

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

Styles:

款式:

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

回答by azizbekian

In styles:

在样式中:

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

Result:

结果:

enter image description here

在此处输入图片说明

回答by Dmitry Smolyaninov

The solution is to replace icon itself.

解决方案是更换图标本身。

1st

第一

Go to values/stylesand in your styles.xmlfile add:

转到值/样式并在您的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>

2nd

第二

Then go to drawablefolder. Right mouse click -> new -> vector asset. Then press on Iconimage and choose from suggested icon named ic_more_vert_black_24dp.

然后转到可绘制文件夹。鼠标右键单击 -> 新建 -> 矢量资产。然后按图标图像并从名为ic_more_vert_black_24dp 的建议图标中进行选择。

Customize it -> press next -> finish.

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

Then open newly created icon file. Code looks like this.

然后打开新创建的图标文件。代码看起来像这样。

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

Change fillColorattribute to the color you need. Put this file to the styles how described in 1st step.

fillColor将属性更改为您需要的颜色。将此文件放入第一步中描述的样式。

Voila! Color of our three dotschanged not depending on base app styles (result for #FF2012 color).

瞧!我们三个点的颜色不取决于基本应用程序样式(#FF2012 颜色的结果)。

enter image description here

在此处输入图片说明

回答by android developer

An alternative way, in code instead of XML:

另一种方法,用代码代替 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;
}

The function will return true if succeeded to colorize the overflow icon.

如果成功为溢出图标着色,该函数将返回 true。

And another alternative, in case you prefer not to use a tinted drawable:

还有另一种选择,以防您不想使用有色可绘制对象:

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

In addition, if you wish to colorize the icons of the action items and the nav item, you can try this (based on 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 }
                        }
                    }
                }
            }
        }
    }
}

Usage:

用法:

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

回答by Seza

For AndroidX users (really don't know if it works using old Support Library):

对于 AndroidX 用户(真的不知道它是否可以使用旧的支持库):

TL;DR:

特尔;博士:

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

Apply MyToolbarThemeto your Toolbarview.

应用于MyToolbarTheme您的Toolbar视图。



Long explanation:

长解释:

Widget.AppCompat.ActionButton.Overflowextends Base.Widget.AppCompat.ActionButton.Overflow. We'll be talking about the latter:

Widget.AppCompat.ActionButton.Overflow延伸Base.Widget.AppCompat.ActionButton.Overflow。我们将讨论后者:

On the default implementation:

在默认实现上:

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

On API 21 implementation:

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

On API 23 and higher implementation:

在 API 23 和更高版本的实现上:

It extends android:Widget.Material.ActionButton.Overflow.

它延伸android:Widget.Material.ActionButton.Overflow

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

We can notice that every implementation uses @drawable/ic_menu_moreoverflow_material.

我们可以注意到每个实现都使用@drawable/ic_menu_moreoverflow_material.

Inside this drawable's implementation you can see the following:

在此 drawable 的实现中,您可以看到以下内容:

android:tint="?attr/colorControlNormal"