變更應用程式主題

1. 事前準備

Material 是 Google 打造的設計系統，可協助開發人員為 Android 和其他平台建構優質的數位體驗。完整的 Material 系統含有涵蓋應用程式視覺、動作和互動的設計指南，但本程式碼研究室將著重於變更 Android 應用程式的色彩主題。

在這次的程式碼研究室中，我們使用的是「空白活動」應用程式範本，不過您可以改用任何您目前正在開發的 Android 應用程式。如果您在 Android 基本概念課程期間參與本課程，您可以使用 Tip Time 應用程式。

必要條件

如何在 Android Studio 中使用範本建立 Android 應用程式。
如何在模擬器或 Android Studio 裝置上執行 Android 應用程式。
搭載 API 28 (Android 9) 或 API 29 (Android 10) 以上版本的 Android 裝置或模擬器。
如何編輯 XML 檔案。

課程內容

如何根據質感設計原則為應用程式選取有效顏色
如何為應用程式主題設定顏色
色彩的 RGB 元件
如何將樣式套用到 View
使用主題變更應用程式的外觀
瞭解色彩對比的重要性

需求條件

電腦已安裝最新版 Android Studio
網路瀏覽器和網際網路連線，以存取 Material 色彩工具

2. 設計與顏色

質感設計

質感設計以現實世界及物質紋理為靈感來源，包括物體反映光線和產生陰影的樣態。這套系統提供指南，協助您瞭解如何以具備可讀性、吸引力和一致性的方式建構應用程式 UI。您可以透過 Material Design 主題設定，配合應用程式調整 Material Design，並依照指示自訂顏色、字體和形狀。Material Design 提供內建的基準主題，您可以直接套用，然後視需求微幅或大幅自訂，根據應用程式情況調整使用 Material 的方式。

顏色相關資訊

無論是在現實世界或數位領域中，色彩無所不在。首先必須知道，並不是每個人都以相同方式看見顏色，因此您必須選擇可讓使用者有效使用應用程式的顏色。選用具備適當色彩對比度的顏色只是打造無障礙應用程式的一環。

顏色可用 3 個十六進位數字表示，#00-#FF (0-255) 代表該色彩的紅色、綠色和藍色 (RGB) 元件。數字越高，元件成分就越多。

請注意，您也可以定義顏色，包括 Alpha 值 #00-#FF，其代表透明度 (#00 = 0% = 完全透明，#FF = 100% = 完全不透明)。如果包含 Alpha 值，其為 4 個十六進位數字 (ARGB) 中的第一個。如果沒有 Alpha 值，系統會假設 #FF = 100% 不透明。

不過，您不需要自行產生十六進位數字。您可透過幾款工具挑選顏色，讓系統為您產生數字。

您可能曾在 Android 應用程式的 colors.xml 檔案中看過某些範例，例如 100% 黑色 (R=#00，G=#00，B=#00) 和 100% 白色 (R=#FF，G=#FF，B=#FF)：

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

3. 主題

樣式可指定 View 的屬性，例如字型顏色、字型大小、背景顏色等。

主題是套用至整個應用程式、活動或檢視區塊階層 (而不只是個別 View) 的樣式集合。將主題套用至應用程式、活動、檢視畫面或檢視區塊群組時，該主題會套用至該元素及其所有子項。主題也可以將樣式套用至非檢視元素，例如狀態列和視窗背景。

建立空白活動專案

如果您使用自己的應用程式，則可略過此部分。如果需要應用程式進行作業，請按照下列步驟建立「空白活動」應用程式。

開啟 Android Studio。
使用空白活動範本建立新的 Kotlin 專案。
使用「TipTime」名稱。如果您未執行任何其他程式碼研究室，也可以保留預設名稱「My Application」。
請選取最低 API 級別 19 (KitKat)。
Android Studio 完成應用程式建立後，開啟 activity_main.xml (「app」>「res」>「layout」>「activity_main.xml」)。
視需要切換至「程式碼」檢視畫面。
請將所有文字替換為此 XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>

開啟 strings.xml (依序點選「app」>「res」>「values」>「strings.xml」)。
請將所有文字替換為此 XML：

<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>

執行您的應用程式。應用程式應如以下螢幕截圖所示。

應用程式包含 TextView 和 Button，可讓您查看顏色選項在實際 Android 應用程式中的呈現效果。在後續步驟中，我們會將按鈕顏色變更為主題的主要顏色。

瞭解主題顏色

Android 應用程式 UI 的不同部分使用不同的顏色。為協助您在應用程式中以有意義的方式使用顏色，並一致地進行套用，主題系統會將顏色分為 12 個已命名屬性 (與文字、圖示等項目使用的顏色相關)。您的主題不需指定所有屬性。您將會選擇主要和次要顏色，以及透過這些顏色繪製的文字和圖示顏色。

「上層」顏色會用於繪製在不同介面上的文字和圖示。

#	名稱	主題屬性
1	主要	`colorPrimary`
2	主要變化版本	`colorPrimaryVariant`
3	次要	`colorSecondary`
4	次要變化版本	`colorSecondaryVariant`
5	背景	`colorBackground`
6	介面	`colorSurface`
7	錯誤	`colorError`
8	上層主要	`colorOnPrimary`
9	上層次要	`colorOnSecondary`
10	上層背景	`colorOnBackground`
11	上層介面	`colorOnSurface`
12	上層錯誤	`colorOnError`

查看預設主題中定義的顏色。

在 Android Studio 中開啟 themes.xml (「app」>「res」>「value」>「topics」>「topics.xml」)。
請注意，主題名稱 (Theme.TipTime) 是依據您的應用程式名稱命名。

<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

請注意，XML 行也需指定父項主題 Theme.MaterialComponents.DayNight.DarkActionBar。DayNight 是質感元件庫中預先定義的主題。DarkActionBar 表示動作列使用深色。就像類別沿用父項類別的屬性一樣，主題也會沿用父項主題的屬性。

瀏覽檔案中的項目。請注意，名稱與上圖中的名稱類似：colorPrimary、colorSecondary 等。

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

目前並未定義所有色彩主題屬性。未定義的顏色會沿用父項主題的顏色。

另請注意，Android Studio 會在左側邊界繪製一小塊顏色範例。
最後請注意，系統會將顏色指定為顏色資源 (例如 @color/purple_500)，而非直接使用 RGB 值。
開啟 colors.xml (依序點選「app」>「res」>「values」>「colors.xml」)，您會看到每個顏色資源的十六進位值。提醒您，開頭的 #FF 為 Alpha 值，表示顏色為 100% 不透明。

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

4. 選擇應用程式主題顏色

您已大致上瞭解主題屬性，現在讓我們挑選顏色！最簡單的方法就是使用色彩工具，也就是 Material 團隊提供的網頁式應用程式。這項工具會提供預先定義色彩的調色盤，方便您查看這些色彩用在不同 UI 元素上的效果。

選擇顏色

首先，選取「主要」顏色 (colorPrimary)，例如「綠色 900」。色彩工具會顯示應用程式模擬圖中呈現的效果，並可選取「淺色」和「深色」變化版本。
輕觸「次要」部分，然後選擇所需的次要顏色 (colorSecondary)，例如「淺藍色 700」。此顏色會顯示應用程式模擬圖中呈現的效果，並可再次選取「淺色」和「深色」變化版本。
請注意，應用程式模擬圖中包含 6 個不同的模擬「畫面」。只要輕觸模擬圖上方的箭頭，即可在不同畫面中查看顏色選項的呈現效果。
色彩工具中還提供「無障礙設定」分頁標籤，讓您瞭解在使用黑色或白色文字時顏色是否清晰可讀。讓應用程式更易於使用的做法，就是確保色彩對比夠高：小型文字為 4.5:1 以上，大型文字則為 3.0:1 以上。進一步閱讀顏色對比。
針對 primaryColorVariant 和 secondaryColorVariant，您可以選擇建議的淺色或深色變化版本。

為應用程式新增顏色

針對各種顏色定義資源，讓您在應用程式中輕鬆重複使用相同顏色。

在 Android Studio 中開啟 colors.xml (「app」>「res」>「values」>「colors.xml」)。
使用現有顏色後，請使用上方選取的值 #1B5E20 定義名為 green 的色彩資源。

<color name="green">#1B5E20</color>

繼續定義其他顏色的資源。這些資源大多來自色彩工具。請注意，green_light 和 blue_light 的值與工具所顯示的值不同；您會在後續步驟中使用這些值。

`green`	`#1B5E20`
`green_dark`	`#003300`
`green_light`	`#A5D6A7`
`blue`	`#0288D1`
`blue_dark`	`#005B9F`
`blue_light`	`#81D4FA`

黑色及白色已定義顏色資源，因此無需另外定義。

您應用程式的 colors.xml 檔案現在應會如下所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

在主題中使用顏色

您已具備所選顏色的名稱，現在可開始在主題中使用。

開啟 themes.xml (「app」>「res」>「values」>「themes」>「themes.xml」)。
將 colorPrimary 變更為您選取的主要顏色 (@color/green)。
將 colorPrimaryVariant 變更為 @color/green_dark。
將 colorSecondary 變更為 @color/blue。
將 colorSecondaryVariant 變更為 @color/blue_dark。
確認「Text on P」和「Text on S」仍為白色 (#FFFFFF) 和黑色 (#000000)。如果您使用自己的色彩工具並選取其他顏色，可能需要定義其他顏色資源。

完成後，主題應如下所示：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- 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>
        <!-- Customize your theme here. -->
    </style>
</resources>

在模擬器或裝置上執行應用程式，並查看應用程式使用新主題的呈現效果。

5. 深色主題

應用程式範本包含預設的淺色主題，以及深色主題變化版本。深色主題使用較深、較柔和的色彩，且：

可大幅減少耗電量 (視裝置的螢幕技術而定)。
可改善低視能及對明亮光線敏感使用者的可視性。
能讓所有人在低光源環境中輕鬆使用裝置。

選擇深色主題的顏色

深色主題的顏色仍需易於閱讀。深色主題採用色調有限的深色介面顏色。為了確保可讀性，主要顏色通常是淺色主題主要顏色的低飽和版本。

如要在深色主題中提供更高的彈性和可用性，建議在深色主題中使用較淺的色調 (200-50)，而不要使用預設的色彩主題 (範圍介於 900-500 的飽和色調)。您先前選擇綠色 200 和淺藍色 200 做為淺色。在您的應用程式中，將使用淺色做為主要顏色，並將主要顏色做為變化版本使用。

更新主題的深色版本

開啟 themes.xml (night)。在「Project」窗格中選取「Android」，然後依序前往「app」>「res」>「values」>「themes」>「themes.xml (night)」。

將 colorPrimary 變更為所選主要顏色的淺色變化版本 (@color/green_light)。
將 colorPrimaryVariant 變更為 @color/green。
將 colorSecondary 變更為 @color/blue_light。
將 colorSecondaryVariant 變更為 @color/blue_light。請注意，colorSecondaryVariant 的顏色可能與 colorSecondary 相同。

完成後，themes.xml (night) 檔案應如下所示：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

此時已不會再用到 colors.xml 中定義的原始顏色 (例如 purple_200)，因此您可將其刪除。

試用深色主題

您可以在裝置上啟用深色模式，以查看主題在深色模式下的呈現效果。

API 28 (Android 9)

再次執行應用程式。
切換至「設定」應用程式。
在「電池」部分中，尋找「省電模式」。

按下「立即開啟」。

繼續完成下列步驟。

API 29 (Android 10) 以上版本

再次執行應用程式。
切換至「設定」應用程式。
在「顯示」部分中，尋找「深色主題」切換按鈕。

將「深色主題」切換至「開啟」位置，裝置將會切換至夜間模式。

任一 API

返回您的應用程式，看看兩者間的差異。

最明顯的變化是深色背景搭配淺色文字，而非淺色背景搭配深色文字。此外，與淺色主題相比，深色主題中按鈕使用的色彩較不鮮明。

恭喜！您已成功製作包含淺色主題和深色主題的新應用程式主題。

6. 解決方案程式碼

本程式碼研究室著重於自訂主題的顏色，但主題還有許多可供自訂的屬性，包括文字、形狀、按鈕樣式等。請參閱這篇文章，瞭解自訂應用程式主題的其他方式！Android 樣式設定：常見主題屬性。

本程式碼研究室的解決方案程式碼如下。

colors.xml (「app」>「res」>「values」>「colors.xml」)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml (「app」>「res」>「values」>「themes」>「themes.xml」)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- 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>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml (依序點選「app」>「res」>「values」>「themes」>「themes.xml (night)」)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. 摘要

使用質感色彩工具選取應用程式主題的顏色。
您也可以使用質感調色盤產生器選擇調色盤。
在 colors.xml 檔案中宣告色彩資源，以方便重複使用。
深色主題可以降低耗電量，讓應用程式在低光源環境中更容易閱讀。