讓使用者在應用程式中自訂色彩體驗

Android 12 新增的動態色彩,可讓使用者自訂裝置,使其與個人桌布的色彩配置保持一致,或透過桌布挑選器中選取的顏色。

如要利用這項功能,請新增 DynamicColors API,以便將主題設定套用至應用程式或活動,讓應用程式更貼近使用者需求。

圖 1 從不同桌布衍生的色調色彩配置範例

本頁說明如何在應用程式中實作動態色彩。這項功能也適用於小工具和自動調整圖示,詳情請參閱本頁後續章節。您也可以參與程式碼研究室

Android 如何建立色彩配置

Android 會執行下列步驟,從使用者的桌布產生色彩配置。

  1. 系統會偵測所選桌布圖片中的主要顏色,並擷取「來源」顏色。

  2. 系統會使用這個來源顏色進一步推斷五種主要顏色,分別為「Primary」、「Secondary」、「Tertiary」、「Neutral」和「Neutral variant」

    來源色彩擷取範例
    圖 2. 範例:擷取桌布圖片和擷取至五種主要顏色的來源顏色
  3. 系統會將每個主要顏色解譯為 13 種色調的色調調色盤。

    產生特定色調調色盤的範例
    圖 3 產生特定色調調色盤的範例
  4. 系統會使用這個單一桌布產生五種不同的色彩配置,做為所有淺色和深色主題的基礎。

使用者裝置如何呈現不同顏色子類

使用者可從桌布擷取顏色和不同主題中選取顏色變化版本,自 Android 12 起,Android 13 也會加入更多變化版本。舉例來說,如果使用者的 Pixel 手機搭載 Android 13,則從「桌布和樣式」設定中選取變化版本,如圖 4 所示。

圖 4:在桌布設定中選取顏色變化版本 (顯示在 Pixel 裝置上)

Android 12 新增了「Tonal Spot」變化版本,並在 Android 13 中依序新增「Neutral」、「Vibrant Tonal」和「Expressive」變化版本。每個變化版本都有專屬的食譜,可透過鮮明且旋轉色調來轉換使用者桌布的種子顏色。以下範例顯示透過這四種顏色子類表示的單一色彩配置。

圖 5 不同顏色變化版本在單一裝置上呈現的效果範例

您的應用程式仍會使用相同的符記來存取這些顏色。如要進一步瞭解符記,請參閱本頁面的「使用符記建立主題」。

開始使用 Compose

如果您是使用 Compose 建構 UI,請參閱 Compose 中的 Material Design 主題設定,進一步瞭解如何為應用程式套用動態色彩。

開始使用檢視畫面

您可以在應用程式或活動層級套用動態色彩。如要這樣做,請呼叫 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>

使用符記建立主題

動態色彩利用設計符記,更順暢一致地將顏色指派給不同的 UI 元素。設計符記可讓您透過語意將顏色角色 (而非設定值) 指派給 UI 的不同元素。這可讓應用程式的色調系統擁有更高的彈性、擴充性和一致性,而且在設計淺色/深色主題和動態色彩時特別實用。

以下程式碼片段顯示淺色和深色主題的範例,以及套用動態顏色符記後對應的顏色 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 Design 主題設定建構工具 (可透過 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>

或者,您也可以使用質感設計主題建構工具匯入其他擴充色彩配置的色彩,進而建立統一的色彩系統。選取這個選項後,請使用 HarmonizedColors 移動自訂顏色的色調。這有助於在結合使用者生成的色彩時,達到視覺平衡且易於存取的對比。在執行階段透過 applyToContextIfAvailable() 發生。

圖 6:協調自訂顏色的範例

請參閱 Material 3 的協調自訂色彩指南。

將動態色彩套用至自動調整圖示和小工具

除了在應用程式中啟用動態色彩主題設定外,您也可以在 Android 12 開始為小工具自動調整圖示支援動態色彩主題設定。