動態色彩已加至 Android 12,可讓使用者提供個人化體驗 配合個人桌布的色彩配置,調整裝置色彩 或桌布挑選器中選取的顏色。
新增 DynamicColors
API 即可使用這項功能,
將這個主題設定套用至應用程式或活動,讓應用程式更貼近個人需求
以便傳達給使用者
![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-differing.png?authuser=0000&hl=zh-tw)
本頁說明如何在應用程式中實作動態色彩。 這項功能也適用於 小工具和自動調整圖示,詳情請參閱本頁後續章節。 您也可以參與程式碼研究室。
Android 如何建立色彩配置
Android 會執行下列步驟,根據使用者的 桌布。
系統會偵測所選桌布圖片中的主要顏色,然後 會擷取「來源」顏色。
系統就會使用該來源顏色,進一步推斷五種主要顏色 稱為主要、次要、第三、中等和中等 子類。
圖 2. 範例:擷取桌布圖片、擷取至五種主要顏色的來源顏色 系統會將每個主要顏色解譯為 13 種色調的色調調色盤。
圖 3 產生特定色調調色盤的範例 系統會使用這張單一桌布產生五種不同顏色 配置,為任何淺色和深色主題提供基礎。
使用者裝置如何呈現不同顏色子類
使用者可以從擷取桌布的顏色和不同顏色中選取變化版本 以 Android 12 開始的主題,並在 Android 13 中新增更多變化版本。適用對象 舉例來說,搭載 Android 13 的 Pixel 手機使用者會選擇 使用桌布和樣式設定,如圖 4 所示。
![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-color.png?authuser=0000&hl=zh-tw)
Android 12 新增了 Tonal Spot 變化版本,後面接著中性、鮮明 Android 13 中的「Tonal」和優異的變化版本。每個變化版本都有專屬的 食譜讓使用者透過鮮明的色彩改變使用者桌布的種子顏色 旋轉色調以下範例說明單一色彩配置 透過這四種顏色子類來表達
![](https://developer.android.com/static/develop/ui/views/theming/images/color-variants-example.png?authuser=0000&hl=zh-tw)
您的應用程式仍會使用相同的符記來存取這些顏色。瞭解詳情 如要進一步瞭解符記,請參閱本頁面的「使用符記建立主題」。
開始使用 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 元素更加精簡且一致設計符記 依語意指派顏色角色,而非一組設定值 使用者介面的不同元素這可讓應用程式的色調系統 彈性、擴充性和一致性。 以及針對淺色/深色主題和動態色彩設計。
以下程式碼片段為淺色和深色主題的範例,以及 套用動態色彩符記後,產生對應的色彩 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>
或者,您也可以使用 Material Design 主題設定建構工具,匯入其他
色彩延伸,有助於延伸色彩配置,進而創造出一致的色彩系統。
選取這個選項後,請使用 HarmonizedColors
移動自訂語氣
色彩。如此一來,當圖片結合在一起時,就能兼顧視覺平衡和明顯的對比
搭配使用者產生的色彩這個指令碼是在內含
applyToContextIfAvailable()
。
![](https://developer.android.com/static/develop/ui/views/theming/images/harmonize.png?authuser=0000&hl=zh-tw)
請參閱 Material 3 的協調自訂色彩指南。
將動態色彩套用至自動調整圖示和小工具
![](https://developer.android.com/static/develop/ui/views/theming/images/dynamic-color-icons-widgets.png?authuser=0000&hl=zh-tw)
除了在應用程式中啟用動態色彩主題設定外, 動態色彩主題設定 小工具開始於 Android 12 以上版本 自動調整圖示一開始 Android 13。