Biểu tượng thích ứng

Android 8.0 (API cấp 26) giới thiệu các biểu tượng trình chạy thích ứng có thể hiển thị nhiều hình dạng trên các kiểu thiết bị khác nhau. Ví dụ: một biểu tượng trình chạy thích ứng có thể hiển thị hình tròn trên một thiết bị OEM (Nhà sản xuất thiết bị gốc) và hiển thị hình vuông tròn trên thiết bị khác. Mỗi nhà sản xuất thiết bị gốc cung cấp một mặt nạ mà hệ thống dùng để hiển thị tất cả biểu tượng thích ứng có cùng hình dạng. Các biểu tượng trình chạy thích ứng cũng được dùng trong lối tắt, ứng dụng Cài đặt, hộp thoại chia sẻ và màn hình tổng quan.

Nhiều loại mặt nạ được áp dụng cho khung dây biểu tượng thích ứng Nhiều loại mặt nạ được áp dụng cho biểu tượng thích ứng

Hình 1. Các biểu tượng thích ứng hỗ trợ nhiều loại mặt nạ tùy theo thiết bị.

Bạn có thể kiểm soát giao diện của biểu tượng trình chạy thích ứng bằng cách xác định 2 lớp: nền sau và nền trước. Bạn phải cung cấp các lớp biểu tượng dưới dạng mục có thể kéo mà không có mặt nạ hoặc bóng nền xung quanh đường viền của biểu tượng.

Hình minh họa đẳng cự về cách tạo biểu tượng thích ứng

Hình 2. Biểu tượng thích ứng được xác định bằng 2 lớp và một mặt nạ.

Trong Android 7.1 (API cấp 25) trở xuống, biểu tượng trình chạy có kích thước là 48 x 48 dp. Bây giờ, bạn phải đặt kích thước cho các lớp biểu tượng theo nguyên tắc sau:

  • Cả hai lớp phải có kích thước là 108 x 108 dp.
  • Kích thước trong 72 x 72 dp của biểu tượng sẽ hiển thị trong cửa sổ xem có mặt nạ.
  • Hệ thống sẽ duy trì kích thước ngoài 18 dp trên lần lượt 4 mặt để tạo hiệu ứng hình ảnh thú vị, chẳng hạn như thị sai hoặc rung động.

Lưu ý: Hệ thống tạo ra hiệu ứng hình ảnh động bằng các trình chạy được hỗ trợ. Hiệu ứng hình ảnh có thể khác nhau tùy theo trình chạy.

Thận trọng: Một nhà sản xuất thiết bị gốc có thể chỉ định mặt nạ có bán kính tối thiểu là 33 dp dọc theo một số điểm của hình.

Bản demo hiệu ứng thị sai được áp dụng cho biểu tượng thích ứng Bản demo hình động chọn được áp dụng cho biểu tượng thích ứng

Hình 3. Biểu tượng thích ứng hỗ trợ nhiều hiệu ứng hình ảnh.

Thận trọng: Nếu bạn không cập nhật các lớp cần thiết cho biểu tượng trình chạy, thì biểu tượng sẽ không nhất quán với các biểu tượng khác mà giao diện người dùng hệ thống hiển thị, cũng như không hỗ trợ các hiệu ứng hình ảnh.

Để tìm hiểu cách tạo biểu tượng thích ứng bằng Android Studio, hãy xem phần Tạo biểu tượng ứng dụng bằng Image Asset Studio.

Tạo biểu tượng thích ứng trong XML

Để thêm biểu tượng thích ứng vào một ứng dụng bằng XML, hãy bắt đầu bằng cách cập nhật thuộc tính android:icon trong tệp kê khai ứng dụng để chỉ định tài nguyên có thể kéo. Bạn cũng có thể xác định tài nguyên có thể kéo của biểu tượng bằng thuộc tính android:roundIcon. Bạn chỉ phải dùng thuộc tính android:roundIcon nếu cần có phần tử biểu tượng khác cho các mặt nạ hình tròn, nếu việc xây dựng thương hiệu biểu trưng phụ thuộc vào hình tròn chẳng hạn. Đoạn mã sau minh họa cả hai thuộc tính này:

    <application
        …
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        …>
    </application>
    

Tiếp theo, bạn phải tạo tài nguyên có thể kéo thay thế trong ứng dụng để dùng với Android 8.0 (API cấp 26) trong res/mipmap-v26/ic_launcher.xml. Sau đó, bạn có thể sử dụng phần tử <adaptive-icon> để xác định các mục có thể kéo của lớp nền trước và nền sau cho biểu tượng. Các phần tử bên trong <foreground><background> đều hỗ trợ thuộc tính android:drawable.

    <?xml version="1.0" encoding="utf-8"?>
    <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
        <background android:drawable="@drawable/ic_launcher_background" />
        <foreground android:drawable="@drawable/ic_launcher_foreground" />
    </adaptive-icon>
    

Bạn cũng có thể xác định các mục có thể kéo của nền sau và nền trước làm phần tử bằng cách đưa các mục đó vào phần tử <foreground><background>.

Nếu bạn muốn áp dụng cùng một mặt nạ và hiệu ứng hình ảnh cho lối tắt dưới dạng biểu tượng trình chạy thích ứng thông thường, hãy dùng một trong các kỹ thuật sau:

  • Đối với các lối tắt tĩnh, hãy dùng phần tử <adaptive-icon>.
  • Đối với các lối tắt động, hãy gọi phương thức createWithAdaptiveBitmap() khi bạn tạo lối tắt.

Để biết thêm thông tin về lối tắt, hãy xem phần Lối tắt ứng dụng.

Tài nguyên khác

Để biết thêm thông tin về cách thiết kế và triển khai biểu tượng thích ứng, hãy đọc chuỗi bài viết sau của nhà thiết kế và nhà phát triển Google, Nick Butcher: