在應用程式中新增動態色彩

1. 事前準備

在本程式碼研究室中，您將更新範例應用程式，小費計算機應用程式使用 Material Design 3 的新功能，以便根據使用者的桌布，動態調整應用程式的使用者介面主題。以下是套用動態色彩的應用程式螢幕截圖。您也會比較其他幾種情況，藉此控制顏色套用方式。

必要條件

開發人員

• 熟悉 Android 中的基本主題設定概念
• 輕鬆修改應用程式主題

課程內容

• 如何區分現有的 Material 元件和 Material 3 主題
• 如何將主題更新為 Material 3
• 如何使用我們的工具製作及套用主題
• 主題屬性之間的關聯性

軟硬體需求

• 已安裝 Android Studio 的電腦。
• Tip Time 應用程式的程式碼。https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution

2. 範例應用程式總覽

Tip Time 應用程式是小費計算機應用程式，提供自訂小費的選項。這是 Android Kotlin 基本概念訓練課程中的範例應用程式之一。

3. 更新 Gradle 依附元件

在我們更新實際主題並套用動態色彩之前，您必須在應用程式的 build.gradle 檔案中進行一些變更。

在依附元件區段中，確認材質程式庫為 1.5.0-alpha04 以上版本：

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
}

在 Android 區段中，變更 compileSdkVersion 和 targetSdkVersion

31 以上版本：

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

這些操作說明假設應用程式含有相對較新的依附元件。如果應用程式尚未使用 Material 或較舊版本，請參閱 Android 質感設計元件入門指南中的操作說明。

無論您建立主題為何，都必須將 Theme.MaterialComponents.* 的參照變更為 Theme.Material3.*。部分樣式在 Material3 命名空間中還沒有新樣式，但當父項主題更新為 Theme.Material3.* 後，大部分元件仍會沿用新樣式。如下方所示，按鈕現在採用新的圓角設計。

在下方的主題檔案中，唯一變更的項目是父項主題。我們稍後會完全取代這個主題。部分顏色屬性已淘汰，我們建立的部分自訂樣式現在在 Material3 中為標準樣式，但我們希望您

themes.xml

<style name="Theme.TipTime" parent="Theme.Material3.Light">
   <!-- Primary brand color. -->
   <item name="colorPrimary">@color/green</item>
   <item name="colorPrimaryVariant">@color/green_dark</item>
   <item name="colorOnPrimary">@color/white</item>
   <!-- Secondary brand color. -->
   <item name="colorSecondary">@color/blue</item>
   <item name="colorSecondaryVariant">@color/blue_dark</item>
   <item name="colorOnSecondary">@color/black</item>
   <!-- Status bar color. -->
   <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
   <!-- For text input fields -->
   <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
   <!-- For radio buttons -->
   <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
   <!-- For switches -->
   <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>

4. 瞭解顏色主題設定和顏色角色

Material 3 色彩系統採用井然有序的方式，將顏色套用至 UI。Theme.AppCompat 的許多屬性仍在使用中。不過，Theme.MaterialComponents.* 中還有其他屬性，甚至在 Theme.Material3.* 中新增了更多屬性，因此請務必檢查應用程式的所有畫面，確保未實作的屬性不會從基本主題中流出。

瞭解顏色角色

Material 3 主題中的顏色共有超過二十個屬性，乍看之下可能很困難，但其實一些主要顏色會結合相同的 4 到 5 種色彩角色，進而創造衍生顏色。

這些顏色群組為：

• 主要顏色，應用程式的主要顏色
• 次要，應用程式的次要顏色
• Tertiary (第三色) 與主要及次要選項互補
• 發生錯誤，用於錯誤文字和對話方塊
• 背景
• Surface、SurfaceVariant、Surface Inverse

以下角色包括「主要」、「次要」、「第三」和「錯誤」：

<基本顏色>	基本顏色
<底色>	顯示在基本色彩上的圖示和文字的顏色
<base color>容器	從底座、顏色衍生，用於按鈕、對話方塊等
on<base color>容器	圖示和容器上的文字顏色

舉例來說，Material 3 中預設樣式的懸浮動作按鈕會使用 Primary 做為基本顏色，因此會以 primaryContainer 做為按鈕的背景顏色，並使用 onPrimaryContainer 做為內容。

手動自訂主題時，請至少檢查每個變更的基本顏色的 on<base color> 屬性是否仍清晰易讀。

最佳做法是同時調整色彩群組中的所有角色，確保從底層到應用程式不會產生任何構件。

一般來說，背景和表面基礎顏色會有兩個角色：基本顏色本身和 on<base color> 代表顯示圖示或文字。

5. 使用質感設計主題建構工具建立 Material 3 主題

Material 主題建構工具可讓您輕鬆建立自訂色彩配置，並使用內建的程式碼匯出功能遷移至 M3 色彩系統，善用動態色彩。進一步瞭解 material.io/material-theme-builder

Tip Time 應用程式主題包含元件的多種樣式，但大多數樣式都是 Material 3 主題中的預設值。我們只需要考慮主要和次要顏色。

這些顏色分別對應到綠色主色 (#1B5E20) 和藍色次要顏色 (#0288D1)。

您可以在 Material Design 主題設定建構工具中輸入這些顏色，然後匯出完整主題 (假設有其他總覽的連結)。

請注意，為配合顏色生成演算法，你輸入的顏色可能會改變色調，確保色彩互補且容易閱讀。

下方是輸入自訂顏色時產生的部分值。

6. 使用質感設計主題建構工具匯出檔案

匯出封存檔包含值和 values-night/ 目錄，且它們有專屬的 theme.xml 檔案 (對應淺色和深色主題)。所有顏色都會在 values/colors.xml 定義。

您可以原樣複製檔案，但必須更改 AndroidManifest.xml 或主題檔案中的主題名稱，才能互相比對。工具的預設名稱為 AppTheme。

重新啟動應用程式，外觀幾乎完全相同。值得注意的改變是 Switch 和 RadioButtons，所選狀態現在是以主要顏色和次要顏色的色調做為主題。在較大的應用程式中，您可能必須重新檢視一些設計。

注意：如果 AndroidManifest.xml 檔案和 Android 12 應用程式需要為活動指定明確的 android:exported 值，您可能會收到關於 AndroidManifest.xml 檔案和 Android 12 應用程式的錯誤訊息。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.tiptime">

   <application ...>
       <activity android:name=".MainActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

</manifest>

7. 新增動態色彩

使用適當的 Material 3 主題後，我們可以新增幾個小元素，讓 UI 更生動。

動態色彩 API 可讓您將動態色彩套用至所有活動

無論是在應用程式中、個別活動，或個別檢視畫面或片段適用於

我們會將動態色彩套用至這個應用程式。

建立應用程式類別檔案

class TipTimeApplication: Application() {
    override fun onCreate() {
        // Apply dynamic color
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

請務必在 Android 資訊清單中參照這個新建立的檔案：

AndroidManifest.xml

< application android name=".TipTimeApplication
<!--- Other existing attributes –>

</application >

在 Android 12 以上版本中，系統會檢查使用者預設配置的壁紙，以產生多個調色盤。這些調色盤中的值可用來建立 ThemeOverlay。

DynamicColors 類別會註冊透過 ActivityPreCreated 攔截的 ActivityLifecycleCallbacks，以套用系統建立的動態主題疊加層，或由您提供。

8. 套用自訂主題疊加層

我們的工具可以匯出主題疊加層，但如果您覆寫少量屬性，也可以手動建立主題疊加層。

主題疊加層必須先與其他主題搭配使用，且只提供將在基本主題上變更的值。

假設基於某些原因，可能是品牌宣傳，我們需要主要顏色為紅色。我們可以利用下列檔案和屬性來完成這項作業。

colors.xml

<resources>
    <color name="overlay_light_primary">#9C4146</color>
    <color name="overlay_light_onPrimary">#FFFFFF</color> 
    <color name= "overlay_light_primaryContainer">#FFDADB</color>
    <color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >

themes_overlays.xml

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
    <item name="colorPrimary">@color/overlay_light_primary</item>
    <item name="colorOnPrimary">@color/overlay_light_onPrimary</item> 
    <item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item> 
    <item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>

上述程式碼的 Android 12 將套用動態淺色主題，並將您所做的變更重疊在該主題上。或者，您也可以使用任何有效的 ThemeOverlay 做為父項，包括下列任一項：

ThemeOverlay.Material3.Light

ThemeOverlay.Material3.Dark

ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark

ThemeOverlay.Material3.DynamicColors.DayNight

如要使用這個主題疊加層，而非 Material 預設，請將呼叫變更為 DynamicColors.applyToActivitiesIfAvailable：

DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)

9. 為自訂屬性新增動態色彩

截至目前為止，我們覆寫了 Material 3 主題中原有的屬性。在其他情況下，動態顏色可能會有需要分配的一或多個自訂屬性。

應用程式選擇採用動態色彩後，就能存取 5 種色調調色盤 (三種強調色，以及兩種中性調色盤，內含下列概略角色：

system_accent1	主要顏色色調
system_accent2	次色調
system_accent3	第三色色調
system_neutral1	中立的背景和表面
system_neutral2	中立的表面和輪廓

每個調色盤都有多個色調步驟，從

至黑：0、10、50、100、200、300、400、500、600、700、800、900、1000。

設計動態色彩的使用者介面時，您應該盡量不要考慮特定顏色，而是該元件的調性和設計系統中其他元件之間的關係。

假設您想使用次要調色盤將圖示化為主題，並且新增了屬性，為在 attrs.xml 中的以下項目新增圖示的色調。

attrs.xml

<resources>
    <attr name="iconColor" format="color" />
</resources>

您的主題疊加層看起來可能會像這樣：

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight"> 
<item name="iconColor">@android:color/system_accent2_600</item>
</style>

當你重新安裝應用程式並變更桌布時，應用程式會選擇次要調色盤。

這些調色盤僅適用於 Android 12 (API 31)，因此除非應用程式的最低 SDK 設為 31 以上，否則您必須將相關檔案放在加上 -v31 後置字串的資料夾。

10. 摘要

在本程式碼研究室中，您已能夠：

• 新增依附元件，將主題升級為 Material 3。
• 瞭解新的顏色群組和角色。
• 瞭解如何從靜態主題轉換成動態色彩。
• 瞭解如何使用主題疊加層，以及針對自訂主題屬性使用動態色彩。