Android上的工具栏图标着色

时间:2015-01-29 16:02:52

标签: android android-5.0-lollipop android-toolbar android-icons

我注意到使用AppCompat主题时,默认工具栏图标会以我的风格中的属性colorControlNormal着色。

<style name="MyTheme" parent="Theme.AppCompat">
    <item name="colorControlNormal">@color/yellow</item>
</style>

enter image description here

然而,正如您在上面所看到的,所有图标都不会发生这种情况。我提供了&#34; plus&#34;我从官方图标中得到的标志,它没有着色(我使用了&#34;白色&#34;版本的png)。根据我对此question的理解,系统仅显示带有alpha通道的图标。这是真的吗?

如果是这样:是否有可以找到alpha定义的官方素材图标的地方?如果不是 - 并且如果工具栏图标需要仅为alpha设色 - Google如何期望我们在工具栏中使用提供的图标?

在SDK的某个地方,我发现了一些以_alpha.png结尾的图标,它们实际上得到了很好的印记。但是我需要全套材料图标,而且从官方来源我只能找到whitegrey600black个图标。

在运行时应用ColorFilter会有点痛苦,我的实际工具栏 - 有些图标着色,有些则没有 - 看起来很糟糕。

12 个答案:

答案 0 :(得分:25)

另一种选择是在支持库中使用对矢量drawable的新支持。

请参阅博文AppCompat — Age of the vectors

中的res/xml/ic_search.xml

请注意对?attr/colorControlNormal

的引用
<vector xmlns:android="..."
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0"
    android:tint="?attr/colorControlNormal">
    <path
        android:pathData="..."
        android:fillColor="@android:color/white"/>
</vector>

答案 1 :(得分:20)

这是我使用的解决方案。在onPrepareOptionsMenu或等效位置后调用tintAllIcons。 mutate()的原因是你碰巧在多个位置使用图标;没有变异,他们都将采取相同的色彩。

public class MenuTintUtils {
    public static void tintAllIcons(Menu menu, final int color) {
        for (int i = 0; i < menu.size(); ++i) {
            final MenuItem item = menu.getItem(i);
            tintMenuItemIcon(color, item);
            tintShareIconIfPresent(color, item);
        }
    }

    private static void tintMenuItemIcon(int color, MenuItem item) {
        final Drawable drawable = item.getIcon();
        if (drawable != null) {
            final Drawable wrapped = DrawableCompat.wrap(drawable);
            drawable.mutate();
            DrawableCompat.setTint(wrapped, color);
            item.setIcon(drawable);
        }
    }

    private static void tintShareIconIfPresent(int color, MenuItem item) {
        if (item.getActionView() != null) {
            final View actionView = item.getActionView();
            final View expandActivitiesButton = actionView.findViewById(R.id.expand_activities_button);
            if (expandActivitiesButton != null) {
                final ImageView image = (ImageView) expandActivitiesButton.findViewById(R.id.image);
                if (image != null) {
                    final Drawable drawable = image.getDrawable();
                    final Drawable wrapped = DrawableCompat.wrap(drawable);
                    drawable.mutate();
                    DrawableCompat.setTint(wrapped, color);
                    image.setImageDrawable(drawable);
                }
            }
        }
    }
}

这不会照顾溢出,但为此,你可以这样做:

布局:

<android.support.v7.widget.Toolbar
    ...
    android:theme="@style/myToolbarTheme" />

样式:

<style name="myToolbarTheme">
        <item name="colorControlNormal">#FF0000</item>
</style>

这适用于appcompat v23.1.0。

答案 2 :(得分:16)

我实际上能够在API 10(Gingerbread)上做到这一点并且效果非常好。

修改:它也适用于API 22 ......

这是最终的结果。

enter image description here

注意:图标是可绘制文件夹中的可绘制资源。

现在这里是如何完成的:

@Override
public void onPrepareOptionsMenu(Menu menu) {
    super.onPrepareOptionsMenu(menu);

    MenuItem item = menu.findItem(R.id.action_refresh);
    Drawable icon = getResources().getDrawable(R.drawable.ic_refresh_white_24dp);
    icon.setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_IN);

    item.setIcon(icon);
}

此时您可以将其更改为您想要的任何颜色!

答案 3 :(得分:6)

我看到这个问题正在得到一些观点,所以我将为那些没有阅读评论的人发布答案。

我对这个问题的推测都是错误的,这不是alpha通道的问题,至少不是外部的。事实很简单,引用@alanv,

  

AppCompat仅为自己的图标着色。目前,您需要手动操作   为您提供与AppCompat分开提供的任何图标。

这可能在未来发生变化,但也可能不会发生变化。从this answer您还可以看到自动着色和使用哪种颜色的图标列表(它们都属于appcompat的内部资源文件夹,因此无法更改)。

我个人使用黑色或白色(或类似色调)的colorControlNormal,并导入具有该特定颜色的图标。在色的背景的色的象看起来有点坏。但是,我发现另一个令人愉快的解决方案是github上的this class。您只需在创建菜单时致电MenuColorizer.colorMenu()

答案 4 :(得分:4)

您可以在充气菜单时创建一个使用色调颜色的自定义工具栏。

public class MyToolbar extends Toolbar {
    ... some constructors, extracting mAccentColor from AttrSet, etc

    @Override
    public void inflateMenu(@MenuRes int resId) {
        super.inflateMenu(resId);
        Menu menu = getMenu();
        for (int i = 0; i < menu.size(); i++) {
            MenuItem item = menu.getItem(i);
            Drawable icon = item.getIcon();
            if (icon != null) {
                item.setIcon(applyTint(icon));
            }
        }
    }
    void applyTint(Drawable icon){
        icon.setColorFilter(
           new PorterDuffColorFilter(mAccentColor, PorterDuff.Mode.SRC_IN)
        );
    }

}

请确保调用您的活动/片段代码:

toolbar.inflateMenu(R.menu.some_menu);
toolbar.setOnMenuItemClickListener(someListener);

没有反射,没有查看视图,也没有那么多代码,呵呵?

如果您使用此方法,请不要使用onCreateOptionsMenu/onOptionsItemSelected

答案 5 :(得分:4)

这是最终的,正确的答案 首先为工具栏创建样式,如下所示:

  <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" >
     <item name="iconTint">@color/primaryTextColor</item>
    <!--choice your favorite color-->
  </style>

然后在您的主应用程序或活动主题中添加此行

  <item name="actionBarPopupTheme">@style/AppTheme.PopupOverlay</item>

最后在布局文件中将此行添加到工具栏

 android:theme="?attr/actionBarPopupTheme"

然后您将看到工具栏图标以您喜欢的颜色着色

答案 6 :(得分:3)

对于sdk 23或更高版本:

<style name="AppThemeToolbar" parent="MyAppTheme">
        ....
        <item name="android:drawableTint">@color/secondaryLightColor</item>
    </style>
我的工具栏

    <com.google.android.material.appbar.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <androidx.appcompat.widget.Toolbar
          android:theme="@style/AppThemeToolbar"
          android:layout_width="match_parent"
          android:layout_height="attr/actionBarSize">
      </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

答案 7 :(得分:1)

尝试一下...?

  menu.getItem(0).getIcon().setTint(Color.parseColor("#22CC34"));

答案 8 :(得分:0)

@NonNull
public static Drawable setTintDrawable(@NonNull 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;
 }
  

并以这种方式打电话:

MenuItem location = menu.findItem(R.id.action_location);
DrawableUtils.setTintDrawable(location.getIcon(), Color.WHITE);

enter image description here

答案 9 :(得分:0)

使用androidX,您可以像这样定义工具栏

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/Toolbar" />

然后,扩展AppCompat主题并根据需要设置colorControlNormal属性:

<style name="Toolbar" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/colorBaseWhite</item>
    <item name="android:background">@color/colorPrimary</item>
</style>

答案 10 :(得分:0)

这可以在Kotlin中使用:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    menu.getItem(0)?.icon?.setTint(Color.WHITE)
}
else {
    @Suppress("DEPRECATION")
    menu.getItem(0)?.icon?.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN)
}

它应该在所有现代版本的Android上都可以使用,并且如果getItemicon返回null,则不会崩溃而不会崩溃。

答案 11 :(得分:0)

基本上,当您设置菜单时,三点图标占据了AppTheme中 android:textColorSecondary 的颜色,默认情况下设置为“黑色”。

因此,如果您不在项目中的任何位置使用textColorSecondary,则只需添加以下行

<item name="android:textColorSecondary">@color/White</item>

添加后,它可能看起来像这样。

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorSecondary">@color/White</item>
</style>