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

Biểu tượng thích ứng hay AdaptiveIconDrawable, có thể hiển thị theo cách khác nhau tuỳ thuộc vào tính năng của từng thiết bị và chủ đề của người dùng. Biểu tượng thích ứng chủ yếu được trình chạy trên màn hình chính sử dụng, nhưng cũng có thể đượ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.

Biểu tượng thích ứng có thể thích ứng với nhiều trường hợp sử dụng:

• Nhiều hình dạng: biểu tượng thích ứng có thể hiển thị nhiều hình dạng trên các mẫu thiết bị khác nhau. Ví dụ: ứng dụng này có thể hiển thị hình tròn trên một thiết bị OEM và hiển thị hình vuông (hình vuông giữa hình vuông và hình tròn) trên một thiết bị khác. Mỗi nhà sản xuất thiết bị gốc (OEM) phải cung cấp một mặt nạ mà hệ thống sử dụng để kết xuất tất cả biểu tượng thích ứng có cùng hình dạng.

  

• Hiệu ứng hình ảnh: biểu tượng thích ứng hỗ trợ nhiều hiệu ứng hình ảnh hấp dẫn, xuất hiện khi người dùng đặt hoặc di chuyển biểu tượng xung quanh màn hình chính.

  

• Tuỳ chỉnh giao diện cho người dùng: kể từ Android 13 (API cấp 33), người dùng có thể tuỳ chỉnh giao diện cho các biểu tượng thích ứng. Nếu người dùng bật các biểu tượng ứng dụng theo chủ đề, bằng cách bật nút bật/tắt Biểu tượng theo chủ đề trong phần cài đặt hệ thống và trình chạy hỗ trợ tính năng này, thì hệ thống sẽ sử dụng màu của hình nền và giao diện mà người dùng đã chọn để xác định màu phủ.

  

Trong các trường hợp sau, màn hình chính sẽ không hiện biểu tượng ứng dụng theo chủ đề mà sẽ hiện biểu tượng ứng dụng thích ứng hoặc tiêu chuẩn:

• Nếu người dùng không bật biểu tượng ứng dụng theo chủ đề.
• Nếu ứng dụng của bạn không cung cấp biểu tượng ứng dụng đơn sắc.
• Nếu trình chạy không hỗ trợ biểu tượng ứng dụng theo chủ đề.

Thiết kế biểu tượng thích ứng

Để đảm bảo biểu tượng thích ứng hỗ trợ nhiều hình dạng, hiệu ứng hình ảnh và giao diện người dùng, thiết kế phải đáp ứng các yêu cầu sau:

• Bạn phải cung cấp 2 lớp cho phiên bản màu của biểu tượng: một lớp cho nền trước và một lớp cho nền.

  

  

• Nếu bạn muốn hỗ trợ người dùng tuỳ chỉnh giao diện cho biểu tượng ứng dụng, hãy cung cấp một lớp duy nhất cho phiên bản biểu tượng đơn sắc.

  

• Định kích thước tất cả các lớp là 108x108 dp.

• Sử dụng biểu tượng có cạnh rõ ràng. Các lớp không được có mặt nạ hoặc bóng nền xung quanh đường viền của biểu tượng.

• Sử dụng biểu trưng có kích thước tối thiểu là 48x48 dp. Kích thước không được vượt quá 66x66 dp, vì 66x66 dp bên trong của biểu tượng xuất hiện trong khung nhìn bị che khuất.

18 dp bên ngoài ở mỗi bên trong số 4 mặt của các lớp được dành riêng cho việc che giấu và tạo hiệu ứng hình ảnh như thị sai hoặc nhấp nháy.

Để tìm hiểu cách tạo biểu tượng thích ứng bằng Android Studio, hãy xem mẫu Figma biểu tượng ứng dụng Android hoặc tài liệu về Android Studio để tạo biểu tượng trình chạy. Ngoài ra, hãy xem bài đăng trên blog Thiết kế biểu tượng thích ứng.

Thêm biểu tượng thích ứng vào ứng dụng

Để thêm biểu tượng thích ứng vào ứng dụng, hãy 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ể vẽ. Bạn cũng có thể xác định tài nguyên có thể vẽ của biểu tượng bằng thuộc tính android:roundIcon, nhưng chỉ khi bạn yêu cầu một thành phần biểu tượng khác cho mặt nạ hình tròn, ví dụ: nếu thương hiệu của bạn phụ thuộc vào hình tròn.

Đoạn mã sau minh hoạ cả hai thuộc tính này, nhưng hầu hết ứng dụng chỉ chỉ định android:icon:

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

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

Ví dụ sau đây cho thấy cách xác định các phần tử <foreground>, <background> và <monochrome> bên trong <adaptive-icon>:

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

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Bạn cũng có thể xác định các đối tượng có thể vẽ là phần tử bằng cách đưa các đối tượng đó vào các phần tử <foreground>, <background> và <monochrome>. Đoạn mã sau đây cho thấy một ví dụ về cách thực hiện việc này bằng đối tượng có thể vẽ trên nền trước.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

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 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 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ề cách triển khai biểu tượng thích ứng, hãy xem phần Triển khai biểu tượng thích ứng. Để biết thêm thông tin về lối tắt, hãy xem bài viết Tổng quan về lối tắt ứng dụng.

Tài nguyên khác

Hãy xem các tài nguyên sau đây để biết thêm thông tin về cách thiết kế và triển khai biểu tượng thích ứng.

• Mẫu trang cộng đồng trên Fitbit
• Hiểu về các biểu tượng thích ứng dành cho Android
• Thiết kế biểu tượng thích ứng
• Triển khai biểu tượng thích ứng
• Tạo biểu tượng ứng dụng trong Android Studio
• Thông số kỹ thuật thiết kế biểu tượng Google Play