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

Biểu tượng thích ứng, hoặc AdaptiveIconDrawable! có thể hiển thị khác nhau tuỳ thuộc vào khả năng của từng thiết bị và người dùng tuỳ chỉnh giao diện. 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ể dùng chúng trong các 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 dùng trên mọi kiểu dáng thiết bị Android.

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

• 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 có thể hiển thị một 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ị một hình vuông cạnh (một hình dạng giữa hình vuông và vòng tròn) trên thiết bị khác. Mỗi OEM của thiết bị phải cung cấp một mặt nạ. 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 hình ảnh hấp dẫn Các 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 nhà màn hình.

  

• Giao diện dành 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 các biểu tượng thích ứng của mình. Nếu người dùng bật biểu tượng ứng dụng theo chủ đề thì hãy bậ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ợ chức năng này hệ thống sử dụng màu của hình nền mà người dùng đã chọn và để xác định màu phủ.

  

  Trong các trường hợp sau, màn hình chính không hiển thị giao diện biểu tượng ứng dụng. Thay vào đó, sẽ hiển thị 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 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.
  • 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

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

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

  

  

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

  

• Đặt kích thước tất cả các lớp thành 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 nền bóng xung quanh đường viền của biểu tượng.

• Sử dụng một 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ì kích thước bên trong 66x66 dp của biểu tượng xuất hiện trong vùng bị che khung nhìn.

18 dp bên ngoài ở mỗi mặt trong số bốn mặt của lớp được dành riêng cho tạo mặt nạ và tạo hiệu ứng hình ảnh như thị sai hoặc ánh sáng 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 bài viết Ứng dụng Android biểu tượng Figma mẫu hoặc Tài liệu Android Studio để tạo trình chạy . Ngoài ra, hãy xem bài đăng trên blog Design Adaptive (Thiết kế thích ứng) Biểu tượng của Google.

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

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

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

Đoạn mã sau 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 nền trước, nền sau và tài nguyên lớp đơn sắc cho các biểu tượng. <foreground>, Các phần tử <background> và <monochrome> bên trong hỗ trợ cả hình ảnh vectơ và bitmap.

Ví dụ sau đây trình bày cách xác định <foreground>, <background> và Phần tử <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ẽ dưới dạng phần tử bằng cách đặt nội tuyến chúng vào Các phần tử <foreground>, <background> và <monochrome>. Nội dung sau đây đoạn mã cho thấy ví dụ về cách thực hiện việc này bằng đối tượng có thể vẽ ở 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 các 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 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 tạo chúng.

Để 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 Thích ứng Biểu tượng. Để 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ổng quan.

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