Android 12 中添加的动态配色功能可让用户对设备进行个性化设置,使其与个人壁纸的配色方案保持一致,或通过壁纸选择器中选定的颜色进行个性化。
您可以通过添加 DynamicColors
API 来利用此功能,此 API 会将此主题应用于您的应用或 activity,使您的应用为用户提供更加个性化的体验。
本页包含有关在应用中实现动态配色的说明。您也可以单独为 widget 和自适应图标提供此功能,如本页后面部分所述。您也可以试用 Codelab。
Android 如何创建配色方案
Android 会执行以下步骤,根据用户的壁纸生成配色方案。
系统会检测所选壁纸图片中的主颜色,并提取源颜色。
系统使用该源颜色进一步推断五种关键颜色,分别是主色、辅色、三级、中性和中性变体。
系统会将每种关键颜色解读为 13 种色调的调色板。
系统会使用这一张壁纸派生五种不同的配色方案,从而为任何浅色和深色主题提供基础。
颜色变体在用户设备上如何显示
从 Android 12 开始,用户可以从从壁纸中提取的颜色和不同的主题中选择颜色变体;Android 13 中还会添加更多变体。例如,如果用户使用的是搭载 Android 13 的 Pixel 手机,则会从壁纸与样式设置中选择一个变体,如图 4 所示。
Android 12 添加了 Tonal Spot 变体,在 Android 13 中随后又添加了 Neutral、Vibrant Tonal 和 Expressive 变体。每个变体都有一个独特的配方,可以通过鲜明的色彩和旋转色调来改变用户壁纸的种子颜色。以下示例展示了通过这四种颜色变体表示的单一配色方案。
您的应用仍使用相同的令牌来访问这些颜色。如需详细了解令牌,请参阅本页面中的使用令牌创建主题。
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()
发生。
请参阅 Material 3 的协调自定义颜色指南。
将动态配色应用于自适应图标和 widget
除了在应用中启用动态配色主题之外,从 Android 12 开始,您还可以为微件以及从 Android 13 开始的自适应图标支持动态配色主题。