材料你設計

從 Android 12 開始，Material You 設計專注於 Android 作業系統的表達和流暢性，目標是幫助用戶創建和擁有滿足其需求的單一、有凝聚力的體驗。作為 Android 合作夥伴，我們鼓勵您在以下方面將您設計的 Material 融入您的 Android 裝置：

  • 動態色彩
  • 運動
  • 小部件

動態色彩

動態顏色是 Material You 設計的核心，也是 Android 多年策略的關鍵部分，旨在以其他裝置無法做到的方式為用戶帶來更簡單、更深入的客製化。您提供的材料：

  • 使用者和開發者可以在任何 Android 裝置上獲得一致、豐富的個人化體驗。

  • Android OEM 有機會以符合其硬體和品牌顏色、品牌和形式的方式繼續創新系統 UI 和第一方應用程式。

要利用動態顏色，請使用 Android 12 Material You 顏色提取故事作為向用戶提供的軟體的關鍵部分。在裝置上，使用 AOSP 中的顏色提取邏輯，特別是接收單一壁紙或主題來源顏色並透過 65 種顏色 API 輸出它的邏輯。有關動態色彩需求，請參閱使用動態色彩。

完整的動態色彩流程包括四個步驟，如下圖所示：

材質你的顏色流

圖 1. Material You 動態色彩流程

  1. 使用者透過 OEM 選擇器變更桌布或主題。

  2. 使用者選擇以下選項之一：

    • 設備主題。選擇後，Android 會自動選擇符合要求的單一來源顏色。

    • 新壁紙+主題。選擇後，AOSP 邏輯會自動從所選壁紙中選取單一來源顏色。

  3. 根據 AOSP 邏輯，AOSP 將單一來源顏色擴展為 5 個色調調色板，每個調色板有 13 種色調顏色變體，然後填充 65 個顏色屬性。

  4. 應用程式 UI 以在整個 Android 應用程式生態系統中保持一致的方式使用 65 種顏色屬性。我們鼓勵您對裝置系統 UI 和 OEM 特定應用程式使用相同的調色板。

安卓12補丁

若要取得桌布顏色擷取的端對端邏輯並使裝置能夠以與生態系統一致的方式填入 65 色 API，請在 Android 12 實作中包含下列修補程式：

在 ThemePicker 上指定自訂顏色

如果您使用 AOSP ThemePicker 應用程序，並且滿足以下兩個條件，則 WallpaperPicker 應用程式將顯示顏色部分：

  • frameworks/base/packages/SystemUI/res/values/flags.xml上的flag_monet為true 。
  • 具有套件名稱的系統存根APK 在packages/apps/ThemePicker/res/values/override.xml檔案中的themes_stub_package中定義。

存根 APK 格式

該APK的範例版本可以在packages/apps/ThemePicker/themes中找到。

此 APK 應僅包含資源，詳細說明可用的基本顏色及其名稱。

存根應在res/xml下包含一個 XML 文件，格式如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

在此檔案中， color_bundles中的每個item都有一個不同的名稱，只要下面的字串被命名為bundle_name_ item 。

每種顏色應該有一個bundle_name_ item字串，以及每種顏色的描述性名稱。可以透過將對應的翻譯字串新增至res/values- language code目錄中來翻譯這些內容。

實際顏色值可以位於相同 XML 中，也可以位於具有以下格式的單獨資源 XML 檔案中：

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

對於顏色束數組中的每個項目，應該有一個color_primary_ item和一個color_secondary_ item條目（並且兩種顏色應該是相同的顏色）。這些color條目的值是基本顏色部分中顯示的每種顏色的實際顏色代碼。

第 1 步：建立使用者主題體驗

主題選擇器是使用者使用新的 Material You 個人化功能的地方，並可能在顏色選項或預設之間進行選擇。由於它適合您的產品和用戶群體，您可以透過使用主題選擇器或桌布選擇器為用戶提供更豐富的個人化和色彩體驗。

  • 使用壁紙選擇器時，壁紙顏色提取預設為啟用狀態。但是，您可以對選擇器進行一些自訂，以便為使用者提供更多選項。

步驟 2：將壁紙顏色提取為來源顏色

要啟用壁紙顏色提取，請挑選上面列出的 Android 12 補丁（此功能將在未來的 AOSP 版本中預設為啟用）。觸發壁紙提取的 AOSP 邏輯從frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java開始，在ThemeOverlayController#mOnColorsChangedListener上，透過WallpaperManager#onWallpaperColorsChanged 。我們建議使用未修改的 AOSP 邏輯，以確保一致的開發體驗。

預設情況下，邏輯會選擇適合使用的最高頻率顏色。若要利用演算法傳回的其他來源顏色並將這些顏色在主題選擇器中呈現給用戶，請使用ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) 。

為了適合使用，來源顏色（無論是從壁紙中提取還是從使用者選擇的預設中提取）必須具有最小CAM16色度值為 5；這可以確保來源顏色在從單一顏色轉換為 65 種色調時不會受到細微暗色調的影響，並且仍然代表使用者的選擇。若要讀取和修改 CAM16 中的顏色，請使用Cam#fromInt或Cam#getInt 。

使用非動態調色板對於不支援壁紙顏色提取的設備，您仍然可以透過執行以下操作來確保支援動態顏色的 Google 應用程式和第三方應用程式看起來很棒：

  • 透過在frameworks/base/packages/SystemUI/res/values/flags.xml上停用flag_monet來使用預設材質調色盤。
  • 確保使用者仍然可以使用預設主題選擇器來個性化他們的作業系統。

步驟 3：將來源色彩擴充為色彩 API

使用從上一步導出的單一來源顏色，Android 產生5 個獨特的色調調色板（強調1-3、中性1-2），每個調色板包括13 種顏色，每種顏色包括不同的亮度值（0 到1000），用於共有65種顏色。 Android 12補丁中提供的邏輯正確實現了這種顏色擴展；下面提供的詳細資訊描述了實作。

為了保持開發人員的一致性，5 個色調調色板（accent1、accent2、accent3、neutral1、neutral2）及其相應的 13 種顏色必須基於單一來源顏色，並分別對CAM16色度和色調值進行更改，如下圖所示：

CTS 包括驗證亮度和色調 API 呼叫的測試。要運行，請使用atest SystemPalette 。

第 4 步：在應用程式和系統 UI 中使用動態顏色

在裝置上設定動態顏色後，應用程式將遵循 Material 指南來使用顏色。 Material 指南將於 2021 年 10 月 26 日在Material.io上發布，供第三方應用程式採用。對於系統 UI 和第一方應用程序，我們強烈建議在整個用戶體驗中以適合您的硬體和品牌的方式整合動態顏色，並幫助您使您的設備脫穎而出。

有關一般動態顏色指導，請參閱以下內容：

  • 對應用程式和系統 UI 中的前景元素使用強調色：

    @android:color/system_accent1_0 … 1000 // most-used foreground color group
@android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
@android:color/system_accent3_0 … 1000 // playful, analogous color

  • 對應用程式和系統 UI 中的背景元素使用中性顏色：

    @android:color/system_neutral1_0 … 1000 // most-used background color group
@android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces

有關 Material You 如何映射顏色以及如何在 SysUI 中使用 API 的更多信息，請參閱其他資源。

第 5 步：在 AOSP WallpaperPicker 實作中新增動態顏色選項

專為 Android 13 及更高版本構建

從 Android 13 開始， android.theme.customization.accent_color已棄用。新增了新屬性android.theme.customization.theme_style以支援不同的顏色變體。目前，我們的程式碼庫中有四種變體，如下所示：

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

這些將發送到Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES ，如下面的 JSON 所示：

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

專為 Android 12 及更低版本而建

使用自訂主題選擇器時，裝置必須透過提供以下格式的 JSON 檔案將有效來源顏色傳送至Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES （其中746BC1是有效來源色彩範例）：

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

這樣做會跳過壁紙顏色提取（步驟 2）並直接將提供的來源顏色擴展為 65 個顏色屬性（步驟 3）。

第 6 步：提交票據

除了系統整合之外，您還需要提交票據並讓我們知道您的品牌名稱（ Build.MANUFACTURER ）。由於大多數 3rd 方應用程式都使用Android 的 Material 元件來顯示動態顏色，因此我們使用硬編碼的白名單來告知哪些裝置整合了動態色調調色板功能。

運動

流暢的運動讓設備感覺現代且優質。為了建立和維持開發人員的信任和快樂，過度滾動和波紋是流暢運動的兩個關鍵部分，需要外觀和感覺一致。

在作業系統中使用 overscroll

Android 12 以視圖拉伸的形式提供了響應速度更快的動態過度滾動運動，當用戶嘗試滾動越過列表邊緣時會顯示該運動。一個例子如下所示：

您過度滾動的材料

圖2. Android 12過度滾動效果，如設定所示

為了開發人員的一致性，請確保裝置上的整體過度滾動效果類似於以下內容：

  • 在ActivityManager.isHighEndGfx()傳回 true 的裝置上，過度滾動效果是螢幕的非線性拉伸（如上所示）。

  • 在性能較低的設備上，拉伸效果被簡化為線性拉伸（以減少系統負載）。

在第一方應用程式中使用滾動

使用自訂視圖時，您可能需要調整一些使用拉伸效果的應用程式和系統 UI。

  • 要支援拉伸過度滾動，請升級到最新的庫：

    • androidx.recyclerview:recyclerview:1.3.0-alpha01用於RecyclerView
    • androidx.core:core:1.7.0-alpha01用於NestedScrollView和EdgeEffectCompat
    • androidx.viewpager:viewpager:1.1-alpha01 for ViewPager

  • 對於使用EdgeEffect自訂佈局，請考慮以下 UX 變更：

    • 使用拉伸過度滾動，使用者不應在拉伸時與佈局的內容進行互動。使用者應該只操作拉伸本身，而不能按下內容中的按鈕等。

    • 當使用者在EdgeEffect動畫發生時觸摸內容時，他們應該捕獲動畫並允許操作拉伸。目前拉取值可從EdgeEffectCompat.getDistance()取得。

    • 若要操縱拉值並傳回消耗的數量，請使用onPullDistance() 。這使得開發人員能夠在手指將內容拉伸到超過起始位置時平滑地從拉伸過渡到滾動。

    • 使用嵌套滾動時，如果內容被拉伸，則拉伸應在嵌套內容之前消耗觸摸動作，否則當手指改變方向時嵌套可能會滾動而不是釋放拉伸。

有關過度滾動的詳細信息，請參閱動畫滾動手勢。

在作業系統中使用波紋（觸控回饋）

Android 12 包含更柔和、更微妙的觸控波紋，可在使用者按下時向使用者提供回饋。

你漣漪的物質

圖 3. Android 12 波紋效果，具有更柔和的填充動畫

為了提高開發人員的可預測性並提供出色的使用者體驗，請確保裝置上的連鎖反應與上面顯示的範例類似。雖然您不需要執行任何特定的整合步驟來支援連鎖反應，但您應該在設備上測試效果，以檢查實施中是否引入了任何意外的回歸。

小部件

小部件是 Android 裝置的關鍵元件。 Android 12 包含所有 OEM 都應支援的新 API 和 API 功能。

其他資源

SysUI顏色使用

（重音1 = A1，重音2 = A2，重音3 = A3，中性1 = N1，中性2 = N2）

顏色使用的材料

圖 4.系統 UI 中的動態色彩使用

材質庫顏色屬性更新

Material 將在即將發布的版本中透過建立用於為特定視圖提供顏色的顏色角色來更新其主題屬性。

色彩作用Android 主題屬性淺色主題
動態色彩		黑暗主題
動態色彩
基本的主色系統口音1_600系統口音1_200
小學時主要顏色系統口音1_0系統口音1_800
中學顏色次要系統口音2_600系統_accent2_200
在中學次要顏色系統口音2_0系統口音2_800
錯誤顏色錯誤不適用（red_600）不適用（red_200）
出錯時錯誤顏色不適用（白色）不適用（red_900）
背景android:顏色背景系統中性1_10系統中性1_900
關於背景背景顏色系統中性1_900系統中性1_100
表面色彩表面系統中性1_10系統中性1_900
表面上表面顏色系統中性1_900系統中性1_100

材質將使用以下指標更新其狀態屬性：

色彩作用Android 主題屬性淺色主題
動態色彩		黑暗主題
動態色彩
主要狀態內容顏色主要狀態內容系統口音1_700系統口音1_200
主狀態層顏色主狀態圖層系統口音1_600系統口音1_300
次要狀態內容顏色次要狀態內容系統口音2_700系統_accent2_200
次要狀態層顏色次要狀態圖層系統口音2_600系統口音2_300
論主要狀態內容主要狀態內容顏色系統口音1_0系統口音1_800
在主狀態層上主狀態圖層上的顏色系統口音1_900系統口音1_800
關於次要狀態內容colorOnSecondaryStateContent系統口音2_0系統口音2_800
在輔助狀態層上次要狀態圖層上的顏色系統口音2_900系統口音2_800
關於主容器狀態內容colorOnPrimaryContainerStateContent系統口音1_900系統口音1_900
在主容器狀態層上顏色OnPrimaryContainerStateLayer系統口音1_900系統口音1_900
關於輔助容器狀態內容colorOnSecondaryContainerStateContent系統口音2_900系統口音2_900
在輔助容器狀態層上colorOnSecondaryContainerStateLayer系統口音2_900系統口音2_900
關於三級容器狀態內容colorOnTertiaryContainerStateContent系統_accent3_900系統_accent3_900
三級容器狀態層colorOnTertiaryContainerStateLayer系統_accent3_900系統_accent3_900
表面狀態內容表面顏色狀態內容系統中性1_900系統中性1_100
在表面狀態層上表面顏色狀態圖層系統中性1_900系統中性1_100
表面變體狀態內容colorOnSurfaceVariantStateContent系統中性2_700系統中性2_200
表面變體狀態層colorOnSurfaceVariantStateLayer系統中性2_700系統中性2_200
錯誤狀態內容顏色錯誤狀態內容紅800紅200

常見問題解答

顏色提取

一旦使用者更改壁紙，顏色提取是自動完成還是需要從某個地方觸發？

在Android 12補丁中，壁紙顏色擷取預設開啟。

ThemeOverlayController.java使用ThemeOverlayController#mOnColorsChangedListener和WallpaperManager#onWallpaperColorsChanged觸發邏輯。

對於動態壁紙或視訊壁紙，我們能否知道顏色提取何時從螢幕中獲取顏色？有些用戶可能想要最後一幀的顏色，因為它在大多數時間都顯示。

當使用者設定桌布或螢幕電源循環後（回應WallpaperEngine#notifyColorsChanged ），會觸發顏色提取。最後一個WallpaperColors事件（來自動態壁紙）在用戶關閉螢幕並再次打開後應用。

主題/壁紙選擇器

如何使主題選擇器顯示多種來源顏色以供使用者選擇頻率最高的顏色之外的顏色？有沒有辦法從提取邏輯中取得這些顏色？

是的。在主題選擇器中，您可以使用ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) 。

像素名稱有一個以圖示為主題的功能。它包含在您分享的三個補丁中嗎？ OEM 如何實現這一點？

不可以。主題圖示處於測試階段，在 Android 12 中不可用。

有沒有辦法在啟用顏色提取和選擇功能的情況下使用 Google 桌布應用程式？

是的。透過遵循本頁前面所述的整合步驟，可以在最新版本的 Google 桌布應用程式中實現這些功能。

請聯絡您的 TAM 以了解更多詳細資訊。

Google 是否可以共用該應用程式或原始程式碼，以便 OEM 可以在其設定選單上實現自己的動態顏色預覽版本，這看起來與 Google 桌布選擇器應用程式上顯示的預覽部分類似？

渲染預覽的主要類別是WallpaperPicker2和Launcher3 。

壁紙預覽畫面是WallpaperSectionController 。

如何實現更改顏色後的預覽，如Google壁紙應用程式所示？

壁紙選擇器應用程式期望 Launcher 提供ContentProvider （基於Launcher3的啟動器具有該內容）。預覽由 Launcher 中的GridCustomizationsProvider提供，應在 Launcher 的主 Activity 的元資料中引用該預覽，以便壁紙和樣式應用程式讀取它。所有這些都在 AOSP 的 Launcher3 中實現，並且可供 OEM 使用。