Material Design cho Android

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng giao diện trong Compose.

Material Design là một hướng dẫn toàn diện về thiết kế hình ảnh, chuyển động và tương tác trên các nền tảng và thiết bị. Để sử dụng Material Design trong các ứng dụng Android, hãy làm theo các nguyên tắc được xác định trong phần thông số kỹ thuật của Material Design. Nếu ứng dụng của bạn dùng Jetpack Compose, bạn có thể dùng thư viện Compose Material 3. Nếu ứng dụng của bạn dùng khung hiển thị, thì bạn có thể dùng thư viện Thành phần Material Android.

Android cung cấp các tính năng sau để giúp bạn xây dựng ứng dụng Material Design:

  • Giao diện của ứng dụng Material Design để tạo kiểu cho tất cả tiện ích trên giao diện người dùng
  • Tiện ích cho thành phần hiển thị phức tạp, chẳng hạn như danh sách và thẻ
  • Các API cho bóng và ảnh động tuỳ chỉnh

Giao diện và tiện ích trong Material

Để tận dụng các tính năng của Material, chẳng hạn như tạo kiểu cho các tiện ích giao diện người dùng tiêu chuẩn và để tinh giản định nghĩa kiểu của ứng dụng, hãy áp dụng giao diện dựa trên Material cho ứng dụng của bạn.

Hình 1. Giao diện Material tối.
Hình 2. Giao diện Material sáng.

Nếu bạn dùng Android Studio để tạo dự án Android thì theo mặc định, Android Studio sẽ áp dụng giao diện Material. Để tìm hiểu cách cập nhật giao diện của dự án, hãy xem phần Kiểu và giao diện.

Để mang lại trải nghiệm quen thuộc cho người dùng, hãy sử dụng các mẫu trải nghiệm người dùng phổ biến nhất trong Material:

  • Quảng bá hành động chính trên giao diện người dùng bằng nút hành động nổi (FAB).
  • Hiển thị thương hiệu, chức năng điều hướng, tìm kiếm và các thao tác khác bằng thanh ứng dụng.
  • Hiện và ẩn thành phần điều hướng của ứng dụng bằng ngăn điều hướng.
  • Chọn trong số nhiều thành phần Material khác cho bố cục và thành phần điều hướng trong ứng dụng của bạn, chẳng hạn như thu gọn thanh công cụ, thẻ, thanh điều hướng dưới cùng, v.v. Để xem tất cả các thành phần này, hãy xem danh mục Material Components cho Android.

Bất cứ khi nào có thể, hãy sử dụng Biểu tượng Material được xác định trước. Ví dụ: đối với nút "trình đơn" điều hướng cho ngăn điều hướng, hãy sử dụng biểu tượng "hamburger" tiêu chuẩn. Hãy xem Biểu tượng Material Design để biết danh sách các biểu tượng có sẵn. Bạn cũng có thể nhập biểu tượng SVG từ thư viện Biểu tượng Material bằng Vector Asset Studio của Android Studio.

Thẻ và bóng độ cao

Ngoài thuộc tính XY, chế độ xem trong Android có thuộc tính Z. Thuộc tính này đại diện cho độ cao của thành phần hiển thị, giúp xác định những thông tin sau:

  • Kích thước của bóng: khung hiển thị có giá trị Z cao hơn sẽ đổ bóng lớn hơn.
  • Thứ tự vẽ: thành phần hiển thị có giá trị Z cao hơn sẽ xuất hiện trên các thành phần hiển thị khác.
Hình 3. Giá trị Z biểu thị độ cao.

Bạn có thể áp dụng độ nâng cho bố cục dựa trên thẻ để hiển thị các thông tin quan trọng bên trong các thẻ mang lại giao diện Material. Bạn có thể sử dụng tiện ích CardView để tạo thẻ có độ cao mặc định. Để biết thêm thông tin, hãy xem phần Tạo bố cục dựa trên thẻ.

Để biết thông tin về cách thêm độ cao cho các khung hiển thị khác, vui lòng xem phần Tạo bóng và cắt khung hiển thị.

Ảnh động

Hình 4. Ảnh động phản hồi bằng thao tác chạm.

API ảnh động cho phép bạn tạo ảnh động tuỳ chỉnh cho phản hồi chạm trong các thành phần điều khiển trên giao diện người dùng, thay đổi về trạng thái xem và chuyển đổi hoạt động.

Các API này cho phép bạn:

  • Phản hồi sự kiện chạm trong thành phần hiển thị của bạn bằng ảnh động phản hồi chạm.
  • Ẩn và hiện thành phần hiển thị bằng ảnh động mở ra vòng tròn.
  • Chuyển đổi giữa các hoạt động bằng ảnh động chuyển đổi hoạt động tuỳ chỉnh.
  • Tạo thêm nhiều ảnh động tự nhiên bằng chuyển động cong.
  • Hoạt ảnh hoá thay đổi trong một hoặc nhiều thuộc tính thành phần hiển thị bằng ảnh động thay đổi trạng thái thành phần hiển thị.
  • Hiển thị ảnh động trong đối tượng có thể vẽ của danh sách trạng thái giữa các thay đổi về trạng thái của thành phần hiển thị.

Ảnh động phản hồi chạm được tích hợp vào nhiều thành phần hiển thị chuẩn, ví dụ như nút. API ảnh động cho phép bạn tuỳ chỉnh và thêm các ảnh động này vào khung hiển thị tuỳ chỉnh.

Để biết thêm thông tin, hãy xem phần Giới thiệu về ảnh động.

Đối tượng có thể vẽ

Sau đây là những chức năng đối với đối tượng có thể vẽ giúp bạn triển khai ứng dụng Material Design: