Use application drawables with theme attributes to seamlessly support multiple app themes or different build variants.

使用具有主题属性的应用程序可绘制对象无缝支持多个应用程序主题或不同的构建变体。

A lot of things have changed since Android Lollipop was released in regards to how visual assets are handled in apps. In addition to vectorDrawables, which was a huge change to the platform, there are other features that make application theming and styling easier to implement and maintain. This article will focus on using theme attributes with vector drawables to show how to easily support different app branding and multiple themes, like dark mode, in a straightforward way.

自发布Android Lollipop以来，关于在应用程序中处理视觉资产的方式发生了很多变化。 除了vectorDrawables(这是对该平台的巨大更改)之外，还有其他功能使应用程序主题和样式易于实现和维护。 本文将重点讨论将主题属性与矢量可绘制对象一起使用，以展示如何以简单的方式轻松地支持不同的应用程序品牌和多个主题(如深色模式)。

The approach described in this post is what we are currently applying in Tuenti to easily maintain icons in a huge project with multiple brands.

这篇文章中描述的方法是我们目前在Tuenti中应用的方法，以轻松地维护具有多个品牌的大型项目中的图标。

一种资产来统治一切 (One asset to rule them all)

In a nutshell, what you’ll end up with after reading this post are these automagically styled icons!

简而言之，阅读这些文章后最终将得到这些自动样式化的图标！

This post assumes your minSdk is 21 or higher and you’re already using vectorDrawables in your app. If that’s not the case then consider migrating your pngs to vectorDrawables, unless for some diabolical reason you enjoy the hell of dealing with pngs in a multi-density screen world. Seriously, just migrate.

这篇文章假设您的minSdk为21或更高，并且您已经在应用程序中使用vectorDrawables 。 如果不是这种情况，那么请考虑将png迁移到vectorDrawables，除非出于某种令人讨厌的原因，您喜欢在多密度屏幕世界中处理png。 认真地，只是迁移。

给我看代码 (Show me the code)

If you want to jump straight to the code take a look at the sample app. It showcases how to use theme attributes to handle different app themes and dynamically change the appearance of your icons.

如果您想直接跳转到代码，请查看示例应用程序。 它展示了如何使用主题属性来处理不同的应用程序主题并动态更改图标的外观。

什么是主题？ (What's a Theme?)

First of all, it’s important to be very clear about the difference between a theme and a style in Android. I highly recommend checking out this awesome series of posts on Android styling by Nick Butcher to learn more. But, in a nutshell, a theme is a collection of named resources that can be referenced later by styles, layouts, views, etc.

首先，很重要的一点是要清楚Android中主题和样式之间的区别。 我强烈建议您查看有关Android样式的一系列精彩文章 通过尼克·巴彻 ( Nick Butcher)了解更多 简而言之， 主题是命名资源的集合，以后可以通过样式，布局，视图等进行引用。

救援的主题属性 (Theme attributes to the rescue)

The named resources mentioned earlier are the properties that define a theme in Android and they’re called theme attributes. Many of the properties are already in the Android platform or Appcompat libraries. You can see the most common ones in this great article. But, if you can’t find a theme attribute that suits your design, you can always define custom ones in your project res/values/attrs.xml file. For example:

前面提到的命名资源是在Android中定义主题的属性，它们称为主题属性 。 许多属性已经在Android平台或Appcompat库中。 您可以在这篇很棒的文章中看到最常见的文章 。 但是，如果找不到适合您设计的主题属性，则始终可以在项目res / values / attrs.xml文件中定义自定义属性。 例如：

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="BrandColors"><!-- General --><attr name="colorIconPrimaryAlpha" format="color|reference" /></declare-styleable>
</resources>

And then in your res/values/styles.xml file you can reference this new created theme attribute and assign a color value:

然后在res / values / styles.xml文件中，您可以引用此新创建的主题属性并分配颜色值：

<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"><item name="colorAccent">@color/dark_blue</item><item name="colorPrimary">@color/blue</item><item name="colorIconPrimaryAlpha">@color/blue_transparent</item>...</style><resources>

Now, how can theme attributes be used with vectorDrawables so your icons automatically change appearance when the app theme is changed or a different app build variant is compiled?

现在，如何将主题属性与vectorDrawables一起使用，以便在更改应用程序主题或编译其他应用程序构建变体时，图标自动更改外观？

This is frequently how you’ll find most of the vector XML files in an app.

这通常是您在应用程序中找到大多数矢量XML文件的方式。

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="24dp"android:height="24dp"android:viewportWidth="24"android:viewportHeight="24"><pathandroid:fillColor="#3282b8"android:pathData="M5,8h14V6H5z"android:strokeAlpha="0.3"android:fillAlpha="0.3"/><pathandroid:fillColor="#3282b8"android:pathData="M19,4h-1L18,2h-2v2L8,4L8,2L6,2v2L5,4c-1.11,0 -1.99,0.9 -1.99,2L3,20c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2L21,6c0,-1.1 -0.9,-2 -2,-2zM19,20L5,20L5,10h14v10zM19,8L5,8L5,6h14v2zM12,13h5v5h-5z"/>
</vector>

Notice how the color for each vector <path> is hardcoded with a specific color like, android:fillColor=”#3282b8". This kind of code should be removed from the vector assets and a semantic color should be used instead. Semantic colors are just theme attributes that represent reusable colors with specific meaning.

请注意，每个向量<path>的颜色是如何使用特定颜色(例如android：fillColor =”＃3282b8”)进行硬编码的， 应从向量资源中删除此类代码，而应使用语义颜色。只是代表具有特定含义的可重用颜色的主题属性。

The end goal is to define a set of semantic colors that can be referenced from the app’s vector assets, as shown here.

最终目标是定义一组语义颜色，可以从应用程序的矢量资产中引用这些颜色，如下所示。

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="24dp"android:height="24dp"android:viewportWidth="24"android:viewportHeight="24"><pathandroid:fillColor="?attr/colorIconPrimaryAlpha"android:pathData="M13.17,6l-0.59,-0.59L11.17,4L6,4v12h16L22,6h-8.83zM17.5,10.5L21,15L7,15l4.5,-6 3.5,4.51 2.5,-3.01z" /><pathandroid:fillColor="?attr/colorPrimary"android:pathData="M2,6L0,6v5h0.01L0,20c0,1.1 0.9,2 2,2h18v-2L2,20L2,6zM7,15h14l-3.5,-4.5 -2.5,3.01L11.5,9zM22,4h-8l-2,-2L6,2c-1.1,0 -1.99,0.9 -1.99,2L4,16c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L24,6c0,-1.1 -0.9,-2 -2,-2zM22,16L6,16L6,4h5.17l1.41,1.41 0.59,0.59L22,6v10z" />
</vector>

With the semantic colors defined, the vector assets will automatically change color whenever the app’s theme is changed to a different primaryColor or another build variant is compiled with a different colors.xml palette.

使用定义的语义颜色，只要将应用程序的主题更改为其他primaryColor或使用不同的colors.xml调色板编译另一个构建变体，矢量资产就会自动更改颜色。

You might be thinking you can achieve the same results by defining colors for your drawables in your layouts or dynamically with code. You wouldn’t be wrong. But that approach has some limitations. Say your code looks like this:

您可能会认为，可以通过在布局中为可绘制对象定义颜色或使用代码动态地获得相同的结果。 你不会错的。 但是这种方法有一些局限性。 假设您的代码如下所示：

<android.support.v7.widget.AppCompatImageView        android:id="@+id/my_appcompat_imageview"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/my_image"        android:tint="@color/blue"/>

or this:

或这个：

val drawable = getResources().getDrawable(R.drawable.my_image)val wrapDrawable = DrawableCompat.wrap(normalDrawable)DrawableCompat.setTint(wrapDrawable, getResources().getColor(R.color.colorPrimaryLight))

• First of all, coloring assets that way doesn’t’ change the color of the icon. All it does is paint a color on top. That means if you use a color with transparency for the asset you won’t get the results you expect. There are workarounds, of course. But, the point is to keep things as simple as possible.首先，以这种方式为资产着色不会改变图标的​​颜色。 它所做的只是在顶部涂上颜色。 这意味着，如果对资产使用具有透明性的颜色，则不会获得预期的结果。 当然，有解决方法。 但是，关键是要使事情尽可能简单。
• Secondly, when you color drawables that way you can only use one color. So, if your vectorDrawable has several paths with different colors you won’t be able to change the color for each vector path.其次，当您以这种方式为可绘制对象着色时，只能使用一种颜色。 因此，如果您的vectorDrawable具有多个具有不同颜色的路径，则将无法更改每个向量路径的颜色。

定义一组语义颜色 (Define a set of semantic colors)

The goal is to have a nice set of semantic colors that can be reused in all your app build variants/brands and themes. Something like this:

我们的目标是拥有一套不错的语义颜色，可以在您所有应用程序构建变体/品牌和主题中重复使用。 像这样：

This is also great if you work with a design team, because you can define your semantic colors along with them. You can then make your design directly using the semantic palette. Consequently, when your drawable is imported you won’t have to worry if it’s going to be used in dark mode or any other brand variant of your app. Restyling your app becomes a piece of cake.

如果您与设计团队合作，这也很棒，因为您可以定义语义颜色以及它们。 然后，您可以直接使用语义调色板进行设计。 因此，在导入可绘制对象时，您无需担心它是否将在深色模式或应用程序的任何其他品牌变体中使用。 重新设计您的应用程序变得轻而易举。

让我们充满活力！ (Let's get dynamic!)

With the semantic colors in place, the vectorDrawables are defined using references to theme attributes. But, what happens when you suddenly need to change the color of an icon at runtime? Let’s say, when an item is clicked. It’s a piece of cake! Just define a theme for the state of your clicked icon and change it dynamically.

保留语义颜色后，使用对主题属性的引用来定义vectorDrawables。 但是，当您突然需要在运行时更改图标的颜色时，会发生什么？ 假设点击了某个项目。 很简单的！ 只需为单击的图标的状态定义一个主题并动态更改即​​可。

<resources><!-- Put your app themes here --><style name="IconHighlightedTheme" parent="MyAppTheme"><item name="colorPrimary">@color/green</item><item name="colorIconPrimaryAlpha">@color/green_transparent</item></style></resources>

Now from your view, lets say MainActivity.kt:

现在，从您的角度来看，假设MainActivity.kt：

private fun changeSingleIconTheme(imageView: ImageView, @DrawableRes drawableId: Int) {val wrapper = ContextThemeWrapper(this, R.style.IconHighlightedTheme)val drawable = ResourcesCompat.getDrawable(resources, drawableId, wrapper.theme)imageView.setImageDrawable(drawable)
}

And that's it. You can reuse your themes and easily apply them dynamically for specific views on your layout.

就是这样。 您可以重复使用主题，并轻松地将它们动态地应用于布局上的特定视图。

多种口味的应用程序？ 没问题 (Multi-flavored app? No problem)

Last but not least. Say you have an app with multiple build variants/brands and they all have different color palettes. When you use this approach you can still have a single instance of your visual assets and you won’t have to add a new one for every new brand.

最后但并非最不重要的。 假设您有一个具有多个构建变体/品牌的应用，并且它们都有不同的调色板。 使用这种方法时，您仍然可以拥有视觉资产的单个实例，而不必为每个新品牌添加一个新实例。

Let’s say there are a couple brands defined as product flavors for the project in your app’s build.gradle.

假设您的应用程序的build.gradle中有几个品牌定义为该项目的产品口味。

flavorDimensions "brand"productFlavors {mike {dimension "brand"applicationIdSuffix ".mike"versionNameSuffix "-mike"}odidas {dimension "brand"applicationIdSuffix ".odidas"versionNameSuffix "-odidas"}}

Each brand has a different color palette in the colors.xml file.

每个品牌在colors.xml文件中都有不同的调色板。

When you have the color palettes defined, you just have to redefine the app themes to reference the new colors. So, in each newly created brand folder you just need to add a new file, that can be called something like brand_themes.xml. Then set the app themes to use it for coloring the icons in the different app variants.

定义了调色板后，只需重新定义应用程序主题即可引用新颜色。 因此，在每个新创建的品牌文件夹中，您只需要添加一个新文件即可，该文件可以称为brand_ themes.xml。 然后设置应用程序主题以将其用于为不同应用程序变体中的图标着色。

With everything in place, you can now compile your different app variants and see the results.

一切就绪后，您现在可以编译不同的应用程序变体并查看结果。

Android Lint是您的朋友 (Android Lint is your friend)

If you’re convinced this approach is valuable and you’ve realized you don’t need to replicate all your icons for every app theme or brand variant. There are two options for enforcing this new approach through your entire Android project.

如果您确信这种方法很有价值，并且已经意识到不需要为每个应用程序主题或品牌变体复制所有图标。 有两种方法可以在整个Android项目中强制采用这种新方法。

• Rely on yourself or your teammates to never use hardcoded color values in your assets, layouts, or views. And be hyper vigilant about hardcoded values during code reviews (not the best option).依靠您自己或您的队友，永远不要在资产，布局或视图中使用硬编码的颜色值。 并在代码检查期间对硬编码值保持高度警惕(不是最佳选择)。

or

要么

• You can use android tooling to detect issues automatically with linting. Check out this great post about using custom linting rules to warn about hardcoded colors in your project. What’s more, you can also detect if you’re using colors like white, blue, red, etc, across your app instead of the semantic colors defined such as colorPrimary, colorDanger, colorWarning, etc.

  您可以使用android工具来自动检测棉绒问题。 查阅有关使用自定义毛刺规则来警告项目中硬编码颜色的精彩文章。 此外，您还可以检测应用中是否使用了白色，蓝色，红色等颜色，而不是使用诸如colorPrimary ， colorDanger ， colorWarning等定义的语义颜色。

还有一件事：VectorCompat！ (One more thing: VectorCompat!)

One very important thing when using this approach is to use VectorCompat. For some reason, theme attributes in vectorDrawables don't always work in Android versions 21, 22 and 23. So use VectorCompat and everything will work fine in API 21 and later. Just add the following lines to your apps’s build.gradle file.

使用此方法时，一件非常重要的事情是使用VectorCompat 。 出于某种原因，vectorDrawables中的主题属性在Android 21、22和23版本中并不总是起作用。因此，使用VectorCompat可以在API 21及更高版本中正常工作。 只需将以下行添加到应用程序的build.gradle文件中。

android {    defaultConfig {        vectorDrawables.useSupportLibrary = true}}

And when setting your drawables directly from a layout.xml file use app:srcCompat=”@drawable/yourVector”

当直接从layout.xml文件设置可绘制对象时，请使用app：srcCompat =“ @ drawable / yourVector”

PRO TIP: Bulk drawable import in Android Studio. When a lot of assets are being added to an Android project, having to select the .svg files one by one and import them with the “vector asset” option in Android Studio can get pretty tedious. Recent versions of AS, however, have a new resource manager section with a great feature that went by almost unnoticed: bulk import for vector assets. Check it out!

专业提示： Android Studio中的批量可绘制导入 。 将大量资产添加到Android项目时，必须选择。 svg文件一个接一个地导入，并在Android Studio中使用“矢量资产”选项导入它们会变得非常乏味。 但是，AS的最新版本具有一个新的资源管理器部分，它具有一个几乎未被注意到的强大功能：矢量资产的批量导入。 看看这个！