MDC-103 Android：採用顏色、高度和類型的 Material Design 主題設定 (Kotlin)

1. 簡介

Material Design 元件 (MDC) 可協助開發人員實作質感設計。MDC 是由 Google 的工程師和使用者體驗設計師團隊所開發，提供數十種美觀實用的 UI 元件，適用於 Android、iOS、網頁和 Flutter。material.io/develop

在程式碼研究室中，您在 MDC-101 和 MDC-102 中，使用了 Material Design 元件 (MDC) 針對名為 Shrine 的電子商務應用程式，這個電子商務應用程式販售服飾和居家用品。這個應用程式包含一個使用者流程，從登入畫面開始，並將使用者帶往顯示產品的主畫面。

Material Design 最近的擴充功能，讓設計師和開發人員能更靈活地展現產品品牌。您現在可以使用 MDC 來自訂神經元，以反映其獨特的風格。

建構項目

在本程式碼研究室中，您將使用以下程式碼自訂 Shrine 來反映品牌：

• 顏色
• 字體排版
• 海拔高度
• 版面配置

這是 4 個程式碼研究室中的第三，可引導您建構一款名為「神社」的應用程式，這是一款販售服飾和居家用品的電子商務應用程式。相關程式碼研究室位於： MDC-101：Material Design 元件 (MDC) 基本概念 MDC-102：Material Design 結構和版面配置 MDC-104：Material Design 進階元件 完成 MDC 104 後，您將建構如下所示的應用程式：

本程式碼研究室中使用的 MDC Android 元件和子系統：

• 主題
• 字體排版
• 海拔高度

軟硬體需求

• 具備 Android 開發作業的基本知識
• Android Studio (如果尚未安裝，請按這裡下載)
• Android 模擬器或裝置 (可透過 Android Studio 取得)
• 程式碼範例 (請參閱下一個步驟)

請評估您建構 Android 應用程式的經驗程度。

初級 中級 適合

2. 設定開發環境

是否要從 MDC-102 繼續學習？

完成 MDC-102 後，您的程式碼應該就可以用於本程式碼研究室。請跳到步驟 3：變更顏色。

下載程式碼研究室入門應用程式

下載範例應用程式

範例應用程式位於 material-components-android-codelabs-103-starter/kotlin 目錄中。請務必先 cd 放入該目錄，再開始操作。

...或從 GitHub 複製

如要從 GitHub 複製本程式碼研究室，請執行下列指令：

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

如需更多協助，請參閱「從 GitHub 複製存放區」一文。

在 Android Studio 中載入範例程式碼

1. 設定精靈完成後，系統會顯示「Welcome to Android Studio」視窗，請按一下「Open an existing Android Studio project」。前往您安裝程式碼範例的目錄，然後選取 kotlin -> Shrine (或在電腦上搜尋 shrine)，即可開啟運送專案。
2. 請稍候，讓 Android Studio 建構及同步處理專案，Android Studio 視窗底部的活動指標會顯示這項作業的進度。
3. 此時，Android Studio 可能會因為缺少 Android SDK 或建構工具而發生建構錯誤，如下所示。請按照 Android Studio 中的操作說明安裝/更新這些項目，並同步處理專案。

新增專案依附元件

專案需要使用 MDC Android 支援資料庫的依附元件。您下載的範例程式碼應已列出此依附元件，但建議您執行下列步驟來確認。

1. 前往 app 模組的 build.gradle 檔案，確認 dependencies 區塊包含 MDC Android 的依附元件：

api 'com.google.android.material:material:1.1.0-alpha06'

2. (選用) 如有需要，請編輯 build.gradle 檔案，新增下列依附元件並同步處理專案。

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

執行範例應用程式

確認「Run / Play」按鈕左側的建構設定為 app。 按下綠色的「Run」/「Play」按鈕，即可建構並執行應用程式。 在「Select Deployment Target」視窗中，如果可用裝置已列出「Android 裝置」，請跳至步驟 8。否則，請按一下「Create New Virtual Device」。 在「Select Hardware」畫面中，選取手機裝置 (例如 Pixel 2)，然後按一下「Next」。 在「System Image」畫面中，選取「recent Android version」，建議選取最高 API 級別。如果尚未安裝，請按一下畫面中顯示的「Download」(下載) 連結並完成下載。 點選「下一步」。 在「Android Virtual Device (AVD)」(Android 虛擬裝置 (AVD)) 畫面上維持原設定，然後按一下「Finish」(完成)。 從部署目標對話方塊中選取 Android 裝置。 按一下 [確定]。 Android Studio 會建構應用程式、部署應用程式，並在目標裝置上自動開啟應用程式。

如果無法新增依附元件或無法順利執行應用程式，請停止並排解開發人員環境的問題。

如果在建構時收到 INSTALL_FAILED_INVALID_APK 錯誤，請嘗試在 Android Studio 中依序點選「Build」>「Clean Project」。

大功告成！您應該會在裝置或模擬器中看見 Shrine 的登入頁面。按下「Next」後，Shrine 首頁就會顯示在畫面上，頂端有應用程式列，下方則有產品圖片的格狀排列。

讓我們變更頂端應用程式列的顏色、高度和字體排版，讓它與 Shrine 品牌相符。

3. 變更顏色

這個顏色主題是由設計人員使用自訂顏色建立 (如下圖所示)。其中包含從 Shrine 品牌中選取的顏色，並套用至 Material Design 主題編輯器，以便擴充顏色並建立完整的調色盤。(這些顏色並非來自 2014 年 Material 調色盤)。

Material Design 主題編輯器已將這些色調分門別類，並以數字標示，包括每種顏色的 50、100、200、.... 到 900 等標籤。神社只使用粉色色的 50、100 和 300 層，以及棕色樣本中 900 的陰影。

我們可以根據該色彩配置，變更頂端應用程式列的顏色。

設定 colorPrimaryDark 和 colorAccent

在 colors.xml 中修改下列幾行內容。colorAccent 屬性可控制頂端應用程式列的顏色和其他內容，colorPrimaryDark 屬性則控制狀態列的顏色。

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

如要在狀態列中使用深色圖示，請將以下內容新增至 Shrine 的應用程式主題 Theme.Shrine：

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

提示：您必須在 <resource> 標記中匯入工具命名空間，如下所示：

<resources xmlns:tools="http://schemas.android.com/tools">

colors.xml 和 styles.xml 應如下所示：

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

在 colors.xml 中，新增設為 #442C2E 的新 textColorPrimary 顏色資源，並更新 toolbarIconColor 屬性以參照 textColorPrimary 顏色。

更新 styles.xml 檔案，設定

屬性設為剛剛定義的 textColorPrimary 顏色。

此外，請將 Widget.Shrine.Toolbar 樣式中的 android:theme 屬性設為 Theme.Shrine。

在 Theme.Shrine 中設定 android:textColorPrimary，即可設定所有元素的文字樣式，包括頂端應用程式列以及頂端應用程式列的圖示。

colors.xml 和 styles.xml 應如下所示：

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

建構並執行。產品格線現在應如下所示：

讓我們變更登入畫面的樣式，以便配合色彩配置。

設定文字欄位的樣式

我們要將登入頁面上的文字輸入框改為帶有邊框，並在版面配置中使用更適合的顏色。

在 colors.xml 檔案中新增下列顏色資源：

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

在 styles.xml 中新增兩個新樣式：

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

最後，請將 shr_login_fragment.xml 中 TextInputLayout XML 元件的兩者樣式屬性設為新樣式：

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

設定按鈕顏色樣式

最後，調整登入頁面上的按鈕顏色樣式。將下列樣式新增至 styles.xml：

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Widget.Shrine.Button 樣式是從預設的 MaterialButton 樣式延伸而來，可變更按鈕的文字顏色和背景色調。Widget.Shrine.Button.TextButton 是從預設的「文字」 MaterialButton 樣式延伸，只會變更文字顏色。

請為「Next」按鈕設定 Widget.Shrine.Button 樣式，並為「Cancel」按鈕設定 Widget.Shrine.Button.TextButton 樣式，如下所示：

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

在登入頁面中更新神社標誌的顏色。您需要稍微變更向量可繪項目 shr_logo.xml。開啟可繪項目檔案，並將 android:fillAlpha 屬性變更為 1。可繪項目應如下所示：

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

接著，將 shr_login_fragment.xml 中標誌 <ImageView> 上的 android:tint 屬性設為 ?android:attr/textColorPrimary，如下所示：

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

建構及執行。登入畫面現在應如下所示：

關於顏色和主題的注意事項：

• 您可以自訂 UI 中的顏色，以便更有效地展現品牌形象。
• 將兩種顏色 (主要和次要顏色) 設為調色盤，搭配這些顏色的淺色和深色變化。或者，您也可以使用 Material Design 調色盤工具產生調色盤。
• 別忘了字體的顏色！
• 確保文字與背景顏色的對比度以易於存取的比例 (大型字體為 3:1，小字體為 4.5:1)。

4. 修改字體排版和標籤樣式

除了顏色變更之外，設計師也提供網站上可使用的特定字體排版。我們也來在頂端應用程式列中加入這個圖示。

設定頂端應用程式列的樣式

設定頂端應用程式列的文字外觀，以符合設計師提供的規格。在 styles.xml 中加入下列文字外觀樣式，並將 titleTextAppearance 屬性設為在 Widget.Shrine.Toolbar 樣式中參照這個樣式。

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

您的 colors.xml 和 styles.xml 應如下所示：

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

設定標籤樣式

我們會為產品資訊卡標籤設定樣式，以便使用正確的文字外觀，並在資訊卡中水平置中。

將標題標籤的字體排版從 textAppearanceHeadline6 更新為 textAppearanceSubtitle2，如下所示：

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

如要將圖片標籤置中，請修改 shr_product_card.xml 中的標籤 <TextView> 以設定 android:textAlignment="center" 屬性：

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

建構並執行。產品格線畫面現在應如下所示：

讓我們變更登入畫面的字體排版，讓兩者相符。

變更登入畫面的字型

在 styles.xml 中，新增下列樣式：

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

在 shr_login_fragment.xml 中，將新樣式設為標題 <TextView> (並刪除其中的 textAllCaps 和 textSize 屬性)：

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

建構並執行。登入畫面現在應如下所示：

字體排版註意事項：

• 選擇用於小字型和內文的文字字型時，請選擇清晰的字型，而非特定樣式。
• 顯示字型用於大型文字和標題，可用來表達或強調品牌。

5. 調整高度

您已使用與 Shrine 相符的特定色彩和字體排版為頁面設定樣式，現在讓我們來看看顯示 Shrine 產品的資訊卡。目前，這些圖片會顯示在應用程式導覽功能下方的白色表面上。為了吸引使用者目光，讓我們更強調產品。

變更產品格線的高度

如要讓內容看起來像是浮動在頂端應用程式列上方的試算表，請變更頂端應用程式列的高度。將 app:elevation 屬性新增至 AppBarLayout，並將 android:elevation 屬性新增至 shr_product_grid_fragment.xml 中的 NestedScrollView XML 元件，如下所示：

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

變更資訊卡的浮動效果 (和顏色)

將 shr_product_card.xml 中的 app:cardElevation 從 2dp 變更為 0dp，即可調整每張資訊卡的高度。同時將 app:cardBackgroundColor 變更為 @android:color/transparent。

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

來看看！你已調整產品資訊格頁面上每張資訊卡的高度。

變更「下一步」按鈕的高度

在 styles.xml 中，將下列屬性新增至 Widget.Shrine.Button 樣式：

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

注意：如果 Android Studio 在編寫這段程式碼時遇到「無法解析符號」錯誤，請按下 Alt + Enter 鍵或 (Mac 上為 Option + Return 鍵) 匯入缺少的符號。

在 Button 的樣式中設定 android:stateListAnimator 可將「繼續」按鈕設為使用我們提供的動畫器。

建構及執行。登入畫面現在應如下所示：

海拔高度注意事項：

• 所有 Material Design 介面和元件都有高度值。
• 表面邊緣可區分一個表面結束和另一個表面開始的位置。
• 表面之間的高度差異可以使用較暗的背景、調亮的背景或陰影表示。
• 位於其他途徑前方的途徑通常會包含較重要的內容。

6. 變更版面配置

我們可以變更版面配置，以不同的顯示比例和大小顯示資訊卡，讓每張資訊卡看起來更加獨特。

使用交錯的 RecyclerView 轉接器

我們在 staggeredgridlayout 套件中提供了新的 RecyclerView 轉接程式，用於顯示可水平捲動的非對稱式分行卡版面配置。您可以自行深入瞭解該程式碼，但我們不會在這裡說明實作方式。

如要使用這個新的轉接程式，請修改 ProductGridFragment.kt 中的 onCreateView() 方法。將「設定 RecyclerView」註解後方的程式碼區塊替換成以下內容：

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

我們也需要對 shr_product_grid_fragment.xml 進行小幅變更，從 NestedScrollView 中移除邊距，如下所示：

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

最後，我們也會修改 ProductGridItemDecoration.kt，調整 RecyclerView 中的資訊卡邊框間距。請修改 ProductGridItemDecoration.kt 的 getItemOffsets() 方法，如下所示：

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

建構並執行。產品格線項目現在應會呈現交錯排列的效果：

7. 試試其他主題

顏色是凸顯品牌特色的絕佳方式，微小的變化可以大幅影響使用者體驗。為了測試這個情況，我們來看看如果品牌的色彩配置完全不同，Shrine 會變成什麼樣子。

修改樣式和顏色

在 styles.xml 中新增下列新主題：

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

然後在 AndroidManifest.xml 中，在應用程式中使用這個新主題：

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

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

在 colors.xml 中修改工具列圖示顏色，如下所示：

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

接著，請設定工具列樣式的 android:theme 屬性，使用「?theme」屬性參照目前的主題，而非以硬式編碼方式指定：

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

接著，降低登入畫面文字欄位中的提示文字顏色。請將 android:textColorHint 屬性新增至文字欄位的樣式：

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

建構及執行。新的主題應會顯示在預覽畫面中。

請先還原本節中變更的程式碼，再繼續進行 MDC-104。

8. 重點回顧

您現在已建立與設計人員設計規格類似的應用程式。

如要取得已完成的 MDC 103 應用程式，請下載已完成的程式碼研究室，或使用 Git 查看已完成的程式碼研究室版本：git checkout 103-complete。

您可以針對應用程式的完成版本，測試自己的應用程式版本。

後續步驟

您已使用下列 MDC 元件：主題、字體排版和高度。您可以在 [MDC Web 程式庫] 中探索更多元件和子系統。

如果您規劃的應用程式設計含有 MDC 程式庫中沒有元件的元素，該怎麼辦？在 MDC-104：Material Design 進階元件中，我們將瞭解如何使用 MDC 程式庫建立自訂元件，達到特定的外觀。

我可以在合理的時間內，完成本程式碼研究室

非常同意 同意 普通 不同意 非常不同意

我希望日後繼續使用 Material Design 元件

非常同意 同意 無意見 不同意 非常不同意