Material Design cho Android

Thử cách 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à hướng dẫn toàn diện về cách 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 ứng dụng Android, hãy làm theo hướng dẫn đã nêu trong thông số kỹ thuật Material Design. Nếu ứng dụng của bạn sử 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 sử dụng thành phần hiển thị, bạn có thể dùng thư viện Thành phần Material cho Android.

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

  • Chủ đề của ứng dụng Material Design để tạo kiểu cho tất cả tiện ích của giao diện người dùng
  • Tiện ích cho thành phần hiển thị phức tạp như danh sách và thẻ
  • 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à để đơn giản hóa định nghĩa kiểu của ứng dụng, hãy áp dụng giao diện theo Material cho ứng dụng.

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, dự án đó 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 bài viết 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á thao tác 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, trình đơn điều hướng, tính năng tìm kiếm và các thao tác khác bằng thanh ứng dụng.
  • Hiện và ẩn 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à trình đơn điều hướng trong ứng dụng của bạn, ví dụ 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, hãy xem danh mục Thành phần Material cho Android.

Bất cứ khi nào có thể, hãy sử dụng Biểu tượng Material xác định sẵn. Ví dụ: đối với nút "trình đơn" điều hướng cho ngăn điều hướng, hãy dùng biểu tượng "bánh 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ó thể sử dụng. 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's Vector Asset Studio.

Thẻ và bóng độ cao

Ngoài các thuộc tính XY, thành phần hiển thị trong Android còn 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 nội dung sau:

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

Bạn có thể áp dụng độ cao cho bố cục theo thẻ, giúp bạn hiển thị thông tin quan trọng bên trong thẻ có diện mạo 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 theo thẻ.

Để biết thông tin về cách thêm độ cao cho các thành phần hiển thị khác, hãy xem phần Tạo bóng và thành phần hiển thị đoạn video.

Ảnh động

Hình 4. Ảnh động phản hồi 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 thành phần điều khiển trên giao diện người dùng, các thay đổi trong 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 thành phần hiển thị tuỳ chỉnh.

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

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

Các khả năng sau đây dành cho đối tượng có thể vẽ sẽ giúp bạn triển khai ứng dụng Material Design: