Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Trang này được dịch bởi Cloud Translation API.

MDC-103 Android: Giao diện Material với Màu sắc, Chuyển động và Loại (Java)

Thành phần Material (MDC) giúp nhà phát triển triển khai Material Design. Do một nhóm kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google tạo ra, MDC có hàng chục thành phần giao diện người dùng đẹp mắt và hữu ích, đồng thời có sẵn cho Android, iOS, web và Flutter.

material.io/develop

Trong các lớp học lập trình MDC-101 và MDC-102, bạn đã sử dụng Thành phần Material (MDC) để xây dựng những điều cơ bản của một ứng dụng có tên là Shrine, một ứng dụng thương mại điện tử bán quần áo và đồ gia dụng. Ứng dụng này chứa một quy trình người dùng bắt đầu bằng một màn hình đăng nhập và đưa người dùng đến màn hình chính để hiển thị sản phẩm.

Việc mở rộng gần đây về Material Design cho phép các nhà thiết kế và nhà phát triển tăng tính linh hoạt để thể hiện thương hiệu của sản phẩm của họ. Giờ đây, bạn có thể dùng MDC để tùy chỉnh Đền thờ và thể hiện phong cách độc đáo hơn bao giờ hết.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ tùy chỉnh Đền thờ để thể hiện thương hiệu của mình bằng cách sử dụng:

Màu
Kiểu chữ
Độ nâng
Bố cục

Các thành phần Android MDC và hệ thống phụ được dùng trong lớp học lập trình này

Giao diện
Kiểu chữ
Độ nâng

Bạn cần có

Kiến thức cơ bản về việc phát triển Android
Android Studio (tải ứng dụng xuống tại đây nếu bạn chưa có)
Trình mô phỏng hoặc thiết bị Android (có sẵn thông qua Android Studio)
Mã mẫu (xem bước tiếp theo)

Bạn xếp hạng trải nghiệm xây dựng ứng dụng Android như thế nào?

Công ty

Trung cấp

Đặc biệt

Tiếp tục từ MDC-102?

Nếu bạn đã hoàn thành MDC-102, mã của bạn sẽ sẵn sàng để chuyển sang lớp học mã này. Chuyển sang bước 3: Thay đổi màu.

Tải ứng dụng Lớp học lập trình dành cho người mới bắt đầu

Tải ứng dụng dành cho người mới bắt đầu

Ứng dụng khởi động nằm trong thư mục material-components-android-codelabs-103-starter/java. Hãy nhớ cd vào thư mục đó trước khi bắt đầu.

...hoặc sao chép đường liên kết từ GitHub

Để sao chép lớp học lập trình này từ GitHub, hãy chạy các lệnh sau:

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

Tải mã dành cho người mới bắt đầu trong Android Studio

Sau khi trình hướng dẫn thiết lập hoàn tất và cửa sổ Chào mừng bạn đến với Android Studio, hãy nhấp vào Mở một dự án Android Studio hiện có. Chuyển đến thư mục mà bạn đã cài đặt mã mẫu và chọn java -> Temple (hoặc tìm shrine trên máy tính) để mở dự án Temple.
Đợi trong giây lát để Android Studio tạo và đồng bộ hóa dự án, theo như chỉ báo hoạt động ở cuối cửa sổ Android Studio.
Tại thời điểm này, Android Studio có thể gặp một số lỗi bản dựng vì bạn thiếu SDK Android hoặc công cụ tạo, chẳng hạn như công cụ hiển thị bên dưới. Làm theo hướng dẫn trong Android Studio để cài đặt/cập nhật và đồng bộ hóa dự án này.

Thêm các phần phụ thuộc dự án

Dự án cần phần phụ thuộc trên thư viện hỗ trợ MDC Android. Mã mẫu mà bạn đã tải xuống phải có phần phụ thuộc này nhưng bạn nên thực hiện các bước sau để đảm bảo.

Chuyển đến tệp build.gradle mô-đun app và đảm bảo rằng khối dependencies bao gồm phần phụ thuộc trên MDC Android:

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

(Không bắt buộc) Nếu cần, hãy chỉnh sửa tệp build.gradle để thêm các phần phụ thuộc sau và đồng bộ hóa dự án.

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'
}

Chạy ứng dụng dành cho người mới bắt đầu

Đảm bảo rằng cấu hình bản dựng ở bên trái nút Chạy/Phát là app.
Nhấn vào nút Chạy / Phát màu xanh lục để tạo và chạy ứng dụng.
Trong cửa sổ Chọn triển khai mục tiêu, nếu bạn đã có thiết bị Android được liệt kê trong các thiết bị có sẵn, hãy chuyển đến Bước 8. Nếu không, hãy nhấp vào Create New Device Device (Tạo thiết bị ảo mới).
Trong màn hình Chọn phần cứng, hãy chọn điện thoại như Pixel 2, sau đó nhấp vào Tiếp theo.
Trong màn hình Hệ thống hình ảnh, hãy chọn một phiên bản Android gần đây, tốt nhất là cấp độ API cao nhất. Nếu chưa cài đặt thì hãy nhấp vào đường liên kết Tải xuống được hiển thị và hoàn tất việc tải xuống.
Nhấp vào Next (Tiếp theo)
Trên màn hình Thiết bị ảo Android (AVD), hãy giữ nguyên các chế độ cài đặt rồi nhấp vào Hoàn tất.
Chọn thiết bị Android từ hộp thoại mục tiêu triển khai.
Nhấp vào Ok.
Android Studio tạo ứng dụng, triển khai và tự động mở ứng dụng trên thiết bị đích.

Thành công! Bạn sẽ thấy trang đăng nhập của Temple chạy trong thiết bị hoặc trình mô phỏng. Khi bạn nhấn Tiếp theo, trang chủ của Đền thờ sẽ xuất hiện với thanh ứng dụng ở trên cùng và lưới hình ảnh sản phẩm bên dưới.

Hãy để thanh ứng dụng hàng đầu phù hợp với thương hiệu Đền thờ bằng cách thay đổi màu sắc, độ cao và kiểu chữ.

Giao diện màu này đã được một nhà thiết kế tạo với các màu tùy chỉnh (hiển thị trong hình bên dưới). Giao diện này chứa các màu đã được lựa chọn từ thương hiệu của Temple\ và được áp dụng cho Material Editor. Trình chỉnh sửa này đã mở rộng các màu đó để tạo một bảng màu đầy đủ hơn. (Những màu này không phải là từ Bảng màu Material năm 2014.)

Trình chỉnh sửa giao diện Material đã sắp xếp chúng thành các ngăn có gắn nhãn bằng số, bao gồm các nhãn 50, 100, 200, .... đến 900 cho mỗi màu. Đền thờ chỉ sử dụng các bóng 50, 100 và 300 từ đồng hồ màu hồng và 900 từ đồng hồ màu nâu.

Hãy thay đổi màu của thanh ứng dụng trên cùng để phản ánh bảng phối màu đó.

Đặt colorPrimarydark và colorAccent

Trong colors.xml, hãy sửa đổi các dòng sau. Thuộc tính colorAccent kiểm soát màu của thanh ứng dụng trên cùng, còn thuộc tính colorPrimaryDark khác kiểm soát màu của thanh trạng thái.

colors.xml

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

Để sử dụng các biểu tượng tối trong thanh trạng thái, hãy thêm nội dung sau đây vào giao diện ứng dụng Theme.Shrine của Đền thờ:

styles.xml

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

colors.xml và styles.xml của bạn phải như sau:

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>

Trong colors.xml, hãy thêm một tài nguyên màu textColorPrimary mới thành #442C2E và cập nhật thuộc tính toolbarIconColor để tham chiếu đến màu textColorPrimary.

Hãy cập nhật tệp styles.xml của bạn để đặt thuộc tính android:textColorPrimary thành màu textColorPrimary.

Việc đặt android:textColorPrimary trong Theme.Shrine sẽ tạo kiểu cho văn bản trên tất cả các thành phần, bao gồm cả thanh ứng dụng trên cùng và biểu tượng trong thanh ứng dụng hàng đầu của chúng tôi.

Ngoài ra, hãy đặt thuộc tính android:theme trong kiểu Widget.Shrine.Toolbar thành Theme.Shrine.

colors.xml và styles.xml của bạn phải như sau:

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>

Tạo và chạy. Lúc này, lưới sản phẩm của bạn sẽ trông như sau:

Hãy thay đổi kiểu của màn hình đăng nhập cho phù hợp với bảng phối màu của chúng ta.

Tạo kiểu cho các trường văn bản

Hãy thay đổi văn bản nhập trên trang đăng nhập để được phác thảo và sử dụng màu sắc tốt hơn cho bố cục của chúng tôi.

Thêm tài nguyên màu sau vào tệp colors.xml của bạn:

colors.xml

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

Thêm hai kiểu mới vào styles.xml của bạn:

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>

Cuối cùng, hãy đặt thuộc tính kiểu trên cả hai thành phần XML TextInputLayout trong shr_login_fragment.xml thành kiểu mới của bạn:

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>

Tạo kiểu cho nút màu

Cuối cùng, hãy tạo kiểu cho các nút của trang đăng nhập trên trang đăng nhập. Hãy thêm các kiểu sau vào styles.xml của bạn:

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>

Kiểu Widget.Shrine.Button mở rộng từ kiểu MaterialButton mặc định và thay đổi màu văn bản cũng như màu nền của nút. Widget.Shrine.Button.TextButton mở rộng từ kiểu văn bản MaterialButton mặc định và chỉ thay đổi màu văn bản.

Đặt kiểu Widget.Shrine.Button trên nút Tiếp theo và kiểu Widget.Shrine.Button.TextButton trên nút Hủy như sau:

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>

Cập nhật màu sắc của biểu trưng Đền thờ trong trang đăng nhập. Thao tác này sẽ yêu cầu một thay đổi nhỏ đối với vectơ có thể vẽ, shr_logo.xml. Mở tệp có thể vẽ và thay đổi thuộc tính android:fillAlpha thành 1. Tài sản có thể vẽ sẽ có dạng như sau:

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>

Đặt thuộc tính android:tint trên biểu tượng <ImageView> trong shr_login_fragment.xml thành ?android:attr/textColorPrimary, như sau:

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" />

Tạo và chạy. Màn hình đăng nhập của bạn sẽ trông giống như sau:

Ngoài việc thay đổi màu sắc, nhà thiết kế của bạn cũng đã cung cấp cho bạn kiểu chữ cụ thể để sử dụng trên trang web. Hãy thêm đường liên kết đó vào thanh ứng dụng trên cùng.

Tạo kiểu cho thanh ứng dụng trên cùng

Tạo kiểu cho giao diện văn bản trên thanh ứng dụng hàng đầu của bạn để phù hợp với thông số kỹ thuật do nhà thiết kế của bạn cung cấp. Thêm kiểu giao diện văn bản sau vào styles.xml và đặt thuộc tính titleTextAppearance để tham chiếu kiểu này trong kiểu Widget.Shrine.Toolbar của bạn.

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 và styles.xml của bạn phải như sau:

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>

Tạo kiểu cho nhãn

Chúng tôi sẽ tạo kiểu cho nhãn thẻ sản phẩm để sử dụng giao diện văn bản chính xác và được căn giữa theo chiều ngang trong thẻ.

Cập nhật kiểu chữ trên nhãn tiêu đề của bạn từ textAppearanceHeadline6 thành textAppearanceSubtitle2 như sau:

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" />

Để căn giữa nhãn hình ảnh, hãy sửa đổi nhãn <TextView> trong shr_product_card.xml để đặt thuộc tính 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>

Tạo và chạy. Màn hình lưới sản phẩm của bạn sẽ trông như thế này:

Hãy thay đổi kiểu chữ của màn hình đăng nhập cho phù hợp.

Trong styles.xml, hãy thêm kiểu sau:

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>

Trong shr_login_fragment.xml, hãy đặt kiểu mới thành "SHRINE" tiêu đề <TextView> (và xóa các thuộc tính textAllCaps và textSize có trong đó):

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" />

Tạo và chạy. Màn hình đăng nhập của bạn sẽ trông giống như sau:

Bây giờ bạn đã tạo kiểu cho trang bằng màu sắc và kiểu chữ cụ thể phù hợp với Đền thờ, hãy xem xét các thẻ hiển thị các sản phẩm của Temple. Hiện nay, các thẻ và trò chơi này được đặt trên bề mặt trắng bên dưới điều hướng của ứng dụng. Hãy để sản phẩm chú trọng hơn để thu hút sự chú ý của khách hàng.

Thay đổi độ cao lưới của sản phẩm

Hãy thay đổi độ cao của thanh ứng dụng trên cùng và nội dung để nội dung có vẻ như nằm trên một trang tính nổi phía trên thanh ứng dụng trên cùng. Thêm thuộc tính app:elevation vào thuộc tính AppBarLayout và android:elevation vào các thành phần XML NestedScrollView của bạn trong shr_product_grid_fragment.xml như sau:

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.appcompat.app.AlertController.RecycleListView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Thay đổi độ cao của thẻ (và màu sắc)

Bạn có thể điều chỉnh độ cao của mỗi thẻ bằng cách thay đổi app:cardElevation trong shr_product_card.xml từ 2dp thành 0dp. Đồng thời thay đổi app:cardBackgroundColor thành @android:color/transparent.

shr_product_card.xml

<com.google.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">

Hãy cùng tìm hiểu! Bạn đã điều chỉnh độ cao của mỗi thẻ trên trang lưới sản phẩm.

Thay đổi độ cao của nút Tiếp theo

Trong styles.xml, hãy thêm thuộc tính sau vào kiểu Widget.Shrine.Button của bạn:

styles.xml

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

Việc đặt android:stateListAnimator trong kiểu Button\39; sẽ đặt nút Tiếp theo để dùng toán tử hoạt ảnh mà chúng tôi đã cung cấp.

Tạo và chạy. Màn hình đăng nhập của bạn sẽ trông giống như sau:

Thay đổi bố cục để hiển thị các thẻ ở tỷ lệ khung hình và kích thước khác nhau, để mỗi thẻ trông giống nhau.

Sử dụng bộ chuyển đổi RecyclerView trùng lặp

Chúng tôi đã cung cấp bộ chuyển đổi RecyclerView mới trong gói staggeredgridlayout. Bộ chuyển đổi này hiển thị bố cục thẻ đối xứng không đối xứng, có chức năng cuộn theo chiều ngang. Bạn có thể tự tìm hiểu về mã đó, nhưng chúng ta sẽ không xem cách triển khai mã ở đây.

Để sử dụng bộ chuyển đổi mới này, hãy sửa đổi phương thức onCreateView() trong ProductGridFragment.java. Thay thế khối mã sau "thiết lập RecyclerView" nhận xét bằng các mục sau:

ProductGridFragment.java

// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
   @Override
   public int getSpanSize(int position) {
       return position % 3 == 2 ? 2 : 1;
   }
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

Chúng tôi cũng sẽ cần thực hiện một thay đổi nhỏ đối với product_grid_fragment.xml của chúng tôi để xóa các khoảng đệm khỏi NestedScrollView của chúng tôi như sau:

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">

Cuối cùng, chúng tôi cũng sẽ điều chỉnh khoảng đệm thẻ trong RecyclerView bằng cách sửa đổi ProductGridItemDecoration.java. Sửa đổi phương thức getItemOffsets() của ProductGridItemDecoration.java như sau:

ProductGridItemDecoration.java

@Override
public void getItemOffsets(Rect outRect, View view,
                          RecyclerView parent, RecyclerView.State state) {
   outRect.left = smallPadding;
   outRect.right = largePadding;
}

Tạo và chạy. Các mục lưới sản phẩm hiện sẽ được bố trí theo chế độ:

Màu sắc là một cách hiệu quả để thể hiện thương hiệu và một thay đổi nhỏ về màu sắc có thể ảnh hưởng lớn đến trải nghiệm của người dùng. Để thử nghiệm điều này, hãy xem Đền thờ sẽ trông như thế nào nếu bảng phối màu của thương hiệu hoàn toàn khác.

Sửa đổi kiểu và màu sắc

Trong styles.xml, hãy thêm giao diện mới sau:

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>

Và trong AndroidManifest.xml, hãy dùng giao diện mới này trong ứng dụng của bạn:

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.java.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>

Sửa đổi màu biểu tượng thanh công cụ trong colors.xml như bên dưới:

colors.xml

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

Sau đó, đặt thuộc tính android:theme của kiểu thanh công cụ để tham chiếu giao diện hiện tại bằng cách sử dụng thuộc tính "?theme" thay vì mã hóa cứng giao diện:

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>

Tiếp theo, hãy làm sáng màu văn bản gợi ý trên các trường văn bản của màn hình đăng nhập. Thêm thuộc tính android:textColorHint vào các trường văn bản#39; kiểu:

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>

Tạo và chạy. Giờ đây, giao diện mới sẽ xuất hiện để bạn xem trước.

Hãy hủy bỏ mã đã thay đổi trong phần này trước khi chuyển sang MDC-104.

Hiện tại, bạn đã tạo một ứng dụng giống với quy cách thiết kế của nhà thiết kế.

Các bước tiếp theo

Bạn đã sử dụng các thành phần MDC sau: chủ đề, kiểu chữ và độ cao. Bạn có thể khám phá thêm nhiều thành phần khác trong thành phần Danh mục MDC-Android trong MDC Android.

Nếu thiết kế ứng dụng theo kế hoạch của bạn chứa những yếu tố không có các thành phần trong thư viện MDC thì sao? Trong MDC-104: Material Component Components (Thành phần Material Design), chúng ta sẽ tìm hiểu cách tạo các thành phần tùy chỉnh bằng thư viện MDC để có được giao diện cụ thể.

Tôi đã hoàn thành được lớp học lập trình này với lượng thời gian và công sức hợp lý

Hoàn toàn đồng ý

Đồng ý

Bình thường

Không đồng ý

Hoàn toàn không đồng ý

Tôi muốn tiếp tục sử dụng các Thành phần Material trong tương lai

Hoàn toàn đồng ý

Đồng ý

Bình thường

Không đồng ý

Hoàn toàn không đồng ý

MDC-103 Android: Giao diện Material với Màu sắc, Chuyển động và Loại (Java)

Sản phẩm bạn sẽ tạo ra

Các thành phần Android MDC và hệ thống phụ được dùng trong lớp học lập trình này

Bạn cần có

Bạn xếp hạng trải nghiệm xây dựng ứng dụng Android như thế nào?

Tiếp tục từ MDC-102?

Tải ứng dụng Lớp học lập trình dành cho người mới bắt đầu

...hoặc sao chép đường liên kết từ GitHub

Tải mã dành cho người mới bắt đầu trong Android Studio

Thêm các phần phụ thuộc dự án

Chạy ứng dụng dành cho người mới bắt đầu

Đặt colorPrimarydark và colorAccent

Tạo kiểu cho các trường văn bản

Tạo kiểu cho nút màu

Tạo kiểu cho thanh ứng dụng trên cùng

Tạo kiểu cho nhãn

Thay đổi kiểu chữ của màn hình đăng nhập

Thay đổi độ cao lưới của sản phẩm

Thay đổi độ cao của thẻ (và màu sắc)

Thay đổi độ cao của nút Tiếp theo

Sử dụng bộ chuyển đổi RecyclerView trùng lặp

Sửa đổi kiểu và màu sắc

Các bước tiếp theo

Tôi đã hoàn thành được lớp học lập trình này với lượng thời gian và công sức hợp lý

Tôi muốn tiếp tục sử dụng các Thành phần Material trong tương lai