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

Biểu tượng thích ứng (hoặc AdaptiveIconDrawable) có thể hiển thị theo nhiều cách, tuỳ thuộc vào khả năng của từng thiết bị và giao diện của người dùng. Biểu tượng thích ứng chủ yếu được dùng cho trình chạy trên màn hình chính, nhưng cũng có thể được sử dụng trong các phím 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 dùng trên tất cả kiểu dáng thiết bị Android.

Trái ngược với hình ảnh bitmap, biểu tượng thích ứng có thể thích ứng với nhiều trường hợp sử dụng:

• Hình dạng khác nhau: biểu tượng thích ứng có thể hiển thị nhiều hình dạng trên nhiều mẫu thiết bị. Ví dụ: biểu tượng 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 bo tròn (hình dạng giữa hình vuông và hình tròn) trên một thiết bị khác. Mỗi OEM thiết bị 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. Những hiệu ứng này 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.

  

• Giao diện người dùng: kể từ Android 13 (cấp độ API 33), người dùng có thể thiết lập giao diện cho biểu tượng thích ứng. Nếu người dùng bật tính năng biểu tượng ứng dụng theo giao diện trong phần cài đặt hệ thống và trình chạy có 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 sắc thái màu cho biểu tượng ứng dụng của những ứng dụng có lớp monochrome trong biểu tượng thích ứng. Kể từ Android 16 QPR 2, Android sẽ tự động tạo giao diện cho biểu tượng ứng dụng của những ứng dụng không cung cấp biểu tượng riêng.

  

  Trong các trường hợp sau, màn hình chính không hiển thị biểu tượng ứng dụng theo giao diện mà hiển thị biểu tượng ứng dụng thích ứng hoặc biểu tượng ứng dụng chuẩn:

  • Nếu người dùng không bật biểu tượng ứng dụng theo giao diện.
  • Nếu ứng dụng của bạn không cung cấp biểu tượng ứng dụng đơn sắc và thiết bị của người dùng chạy phiên bản Android cũ hơn Android 16 QPR 2.
  • Nếu trình chạy không hỗ trợ biểu tượng ứng dụng theo giao diện.

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

Nhằm đả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 mà người dùng chọn, thì thiết kế phải đáp ứng các yêu cầu sau đây:

• Bạn phải cung cấp hai lớp cho phiên bản biểu tượng đa sắc: một lớp cho nền trước và một lớp cho nền sau. Các lớp có thể là vectơ hoặc bitmap, mặc dù vectơ được ưu tiên hơn.

  

  

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

  

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

• Sử dụng biểu tượng có đường viền 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. Biểu tượng không được vượt quá 66x66 dp, vì biểu tượng 66x66 dp bên trong xuất hiện trong khung nhìn được che.

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

Để 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 cho 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 đọc 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

Biểu tượng thích ứng, giống như biểu tượng không thích ứng, được chỉ định bằng thuộc tính android:icon trong tệp kê khai ứng dụng.

Thuộc tính không bắt buộc android:roundIcon được dùng cho các trình chạy biểu thị ứng dụng bằng biểu tượng hình tròn và có thể hữu ích nếu biểu tượng của ứng dụng có nền hình tròn làm phần cốt lõi trong thiết kế. Các trình chạy như vậy bắt buộc phải tạo biểu tượng ứng dụng bằng cách áp dụng mặt nạ hình tròn cho android:roundIcon. Việc đảm bảo này có thể giúp bạn tối ưu hoá giao diện của biểu tượng ứng dụng, chẳng hạn như bằng cách phóng to biểu trưng một chút và đảm bảo rằng khi được cắt, nền hình tròn sẽ tràn viền.

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

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

Tiếp theo, hãy lưu biểu tượng thích ứng vào res/mipmap-anydpi-v26/ic_launcher.xml. Sử dụng phần tử <adaptive-icon> để xác định tài nguyên lớp nền trước, nền sau và đơn sắc cho biểu tượng. Các phần tử bên trong <foreground>, <background> và <monochrome> hỗ trợ cả hình ảnh vectơ và hình ảnh bitmap.

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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

Lớp nền trước và lớp đơn sắc đang sử dụng cùng một đối tượng có thể vẽ. Tuy nhiên, bạn có thể tạo các đối tượng có thể vẽ riêng biệt cho từng lớp nếu cần.

Bạn cũng có thể xác định đối tượng có thể vẽ dưới dạng phần tử bằng cách gắn trực tiếp chúng vào các phần tử <foreground>, <background> và <monochrome>. Đoạn mã sau đây cho thấy 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 như biểu tượng thích ứng thông thường, hãy sử dụng một trong các kỹ thuật sau:

• Đối với lối tắt tĩnh, hãy sử 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 bài viết 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 phần 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 để 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 Figma
• 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
• Quy cách thiết kế biểu tượng Google Play