Android 12 中添加的动态配色功能可让用户对 让设备与个人壁纸的配色方案协调一致 或在壁纸选择器中选择特定的颜色。
您可以通过添加 DynamicColors
API 来利用此功能,
将此主题应用于您的应用或活动,让您的应用更具个性化
。
![](https://developer.android.google.cn/static/develop/ui/views/theming/images/wallpaper-differing.png?authuser=0000&hl=sr)
本页包含有关在应用中实现动态配色的说明。 也可为以下账号单独提供此功能: 微件和自适应图标,如本页后面部分所述。 您也可以尝试使用 Codelab。
Android 如何创建配色方案
Android 执行以下步骤,根据用户的 壁纸。
系统会检测所选壁纸图片中的主颜色,并 会提取 source 颜色。
系统使用该源颜色进一步推断五种主要颜色 分别称为“主要”、“次要”、“次要”、“中性”和“中性” 变体。
图 2. 从壁纸图片中提取源颜色并提取到五种主要颜色的示例 系统会将每种按键颜色解读为 13 种色调的调色板。
图 3. 生成指定色调调色板的示例 系统使用这一张壁纸生成五种不同的颜色 ,为任何浅色和深色主题提供基础。
不同颜色变体在用户设备上的显示方式
用户可以从壁纸提取的颜色和其他不同的颜色中选择颜色变体 这些主题从 Android 12 开始,并在 Android 13 中添加了更多变体。对于 例如,使用搭载 Android 13 的 Pixel 手机的用户会选择一个变体 从壁纸和style 设置,如图 4 所示。
<ph type="x-smartling-placeholder">![](https://developer.android.google.cn/static/develop/ui/views/theming/images/wallpaper-color.png?authuser=0000&hl=sr)
Android 12 添加了色调问题变体,然后添加了中性色和鲜艳色 Android 13 中的色调和富有表现力 变体。每个变体都有一个 通过生动的方案,让用户壁纸中的种子颜色发生变化 然后旋转色调。以下示例展示了一种配色方案 这四种颜色变体。
![](https://developer.android.google.cn/static/develop/ui/views/theming/images/color-variants-example.png?authuser=0000&hl=sr)
您的应用仍会使用相同的令牌来访问这些颜色。了解详情 有关令牌,请参阅本页面上的使用令牌创建主题。
Compose 使用入门
如果您使用 Compose 构建界面,请查看 Compose 中的 Material 主题设置,详细了解如何将动态配色应用于 应用。
开始使用 View
您可以在应用或 activity 级别应用动态配色。为此,请调用
applyToActivitiesIfAvailable()
,用于注册
ActivityLifeCycleCallbacks
添加到您的应用。
Kotlin
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
Java
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
接下来,为您的应用添加主题。
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
使用令牌创建主题
动态配色利用设计令牌,将颜色分配给 让不同界面元素更加简洁一致。借助设计令牌 从语义上分配颜色角色,而不是设定值, 不同的元素这样,应用的色调系统就能提供更多 灵活性、可伸缩性和一致性,尤其适合 针对浅色和深色主题以及动态配色进行设计。
以下代码段显示了浅色主题和深色主题的示例,以及 相应的颜色 XML。
浅色主题
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
深色主题
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
颜色 XML
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
更多信息:
如需详细了解动态配色、自定义颜色以及如何生成令牌, 请查看 Material 3 动态配色页面。
要生成基础调色板以及应用的颜色和主题,请选中 Material Theme Builder,可通过 Figma 插件或在浏览器中)。
详细了解如何使用配色方案提高无障碍性 请参阅 Material 3 页面,了解 颜色系统无障碍功能。
保留自定义颜色或品牌颜色
如果您不想随应用更改自定义颜色或品牌颜色 根据用户偏好,您可以在构建颜色时逐一添加各个选项 架构。例如:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
或者,您也可以使用 Material Theme Builder 导入
可扩展您的配色方案的颜色,从而形成一个统一的颜色系统。
如果选择此选项,您可以使用 HarmonizedColors
来更改自定义的语气
颜色。结合运用这两种技术,可以实现视觉平衡和易于理解的对比度
并填充颜色它在运行时发生
applyToContextIfAvailable()
。
![](https://developer.android.google.cn/static/develop/ui/views/theming/images/harmonize.png?authuser=0000&hl=sr)
请参阅 Material 3 有关协调自定义颜色的指南。
将动态配色应用于自适应图标和微件
![](https://developer.android.google.cn/static/develop/ui/views/theming/images/dynamic-color-icons-widgets.png?authuser=0000&hl=sr)
除了在应用中启用动态配色主题外,还支持 动态颜色主题设置 widgets,从 2 开始 Android 12 及更高版本 自适应图标 Android 13。