Thay đổi biểu tượng ứng dụng | Android Developers - The first knowledge sharing application in Vietnam

Mục lục bài viết

1. Trước khi bắt đầu

Biểu tượng ứng dụng là cách quan trọng để phân biệt ứng dụng của bạn. Nó cũng xuất hiện ở một số vị trí như Màn hình chính, Màn hình Tất cả ứng dụng và Cài đặt ứng dụng.

Biểu tượng ứng dụng còn được gọi là biểu tượng trình chạy. Trình chạy chỉ trải nghiệm mà bạn có được khi nhấn vào nút Màn hình chính trên thiết bị Android để xem và sắp xếp ứng dụng, thêm tiện ích và lối tắt, v.v.

Nếu đã thử qua nhiều thiết bị Android, bạn có thể nhận thấy trải nghiệm Trình chạy có thể khác nhau tuỳ vào nhà sản xuất thiết bị. Đôi khi, nhà sản xuất thiết bị sẽ tạo trải nghiệm Trình chạy tùy chỉnh đặc trưng cho thương hiệu của họ. Theo đó, nhà sản xuất có thể hiển thị các biểu tượng ứng dụng ở hình dạng khác với hình dạng biểu tượng hình tròn ở trên.

Ví dụ: nếu muốn, họ có thể hiển thị tất cả biểu tượng ứng dụng ở dạng hình vuông, hình vuông bo tròn hay hình squircle (lai giữa hình vuông và hình tròn).

Bất kể nhà sản xuất thiết bị chọn hình dạng nào, mục tiêu là để tất cả biểu tượng ứng dụng trên một thiết bị có được hình dạng nhất quán nhằm mang lại trải nghiệm nhất quán hơn cho người dùng.

Đó là lý do nền tảng Android giới thiệu tính năng hỗ trợ biểu tượng thích ứng (kể từ API cấp 26). Bằng cách triển khai biểu tượng thích ứng cho ứng dụng, ứng dụng của bạn sẽ có thể phù hợp với nhiều loại thiết bị bằng cách hiển thị biểu tượng ứng dụng chất lượng cao một cách phù hợp.

Lớp học lập trình này sẽ cung cấp cho bạn các tệp nguồn hình ảnh dùng cho biểu tượng trình chạy Tip Calculator (Máy tính tiền boa) để bạn thực hành. Bạn sẽ dùng một công cụ trong Android Studio có tên Công cụ tạo thành phần hình ảnh (Image Asset Studio) để tạo tất cả phiên bản biểu tượng trình chạy mà bạn cần. Sau đó, bạn có thể tích luỹ và vận dụng kiến thức đã học để thay đổi biểu tượng ứng dụng cho các ứng dụng khác!

Điều kiện tiên quyết

Có thể di chuyển qua các tệp của dự án Android cơ bản, bao gồm cả các tệp tài nguyên
Có thể cài đặt một ứng dụng Android từ Android Studio trên trình mô phỏng hoặc thiết bị thực

Kiến thức bạn sẽ học được

Cách thay đổi biểu tượng trình chạy của ứng dụng
Cách sử dụng Công cụ tạo thành phần hình ảnh để tạo thành phần biểu tượng trình chạy
Biểu tượng thích ứng là gì và tại sao biểu tượng này được tạo thành từ hai lớp

Sản phẩm bạn sẽ tạo ra

Ứng dụng Android có biểu tượng trình chạy mới

Bạn cần có

Máy tính đã cài đặt phiên bản Android Studio ổn định mới nhất
Kết nối Internet để tải xuống tệp tài nguyên hình ảnh

2. Thiết lập dự án

Nếu tham gia lớp học lập trình này trong khóa học Android Basics in Kotlin (Những khái niệm cơ bản về Kotlin trong Android), bạn có thể trực tiếp sử dụng trình chạy máy tính tiền boa mà bạn đang làm từ lớp học lập trình trước.

Nếu tự thực hiện lớp học lập trình này (ngoài khóa học), bạn có thể thiết lập một dự án mới trong Android Studio bằng mẫu Empty Activity (Hoạt động trống). Bằng cách đó, bạn không sửa đổi hoặc ghi đè các tệp biểu tượng của trình chạy trong ứng dụng hiện có cho đến khi bạn thấy thoải mái hơn với các bước sau.

3. Biểu tượng trình khởi chạy

Mục tiêu là để biểu tượng trình chạy trông đẹp mắt (sắc nét và rõ ràng) bất kể mẫu thiết bị hoặc mật độ màn hình. Cụ thể, mật độ pixel trên màn hình là số pixel trên mỗi inch (hay dpi, số điểm trên mỗi inch) trên màn hình. Đối với thiết bị có mật độ điểm ảnh trung bình (mdpi), màn hình sẽ có 160 điểm ảnh/inch trên màn hình, còn thiết bị có mật độ cực cao (xxxhdpi) sẽ có 640 điểm ảnh/inch trên màn hình.

Để tính toán cho thiết bị ở khía cạnh mật độ màn hình, bạn cần cung cấp các phiên bản biểu tượng ứng dụng khác nhau.

Khám phá các tệp biểu tượng trình khởi chạy

Để xem nội dung này, mở dự án của bạn trong Android Studio. Nếu ứng dụng của bạn bắt đầu từ một mẫu, bạn sẽ có biểu tượng trình chạy mặc định đã được Android Studio cung cấp.
Trong Project window (Cửa sổ dự án), chuyển sang chế độ xem Project(Dự án). Bạn sẽ thấy các tệp trong dự án được sắp xếp theo cách các tệp được lưu trên máy tính của bạn.

Đến thư mục tài nguyên (app > src > main > res) (ứng dụng > src > chính > res) và mở rộng một số thư mục mipmap. Bạn nên đặt các thành phần biểu tượng trình chạy cho ứng dụng Android trong các thư mục mipmap này.

mdpi, hdpi, xhdpi, v.v. là các bộ định tính mật độ mà bạn có thể thêm vào tên thư mục tài nguyên (như mipmap) để cho biết đây là các tài nguyên dành cho một số thiết bị có mật độ màn hình nhất định. Sau đây là danh sách các bộ định tính mật độ trên Android:

mdpi – tài nguyên dành cho màn hình có mật độ điểm ảnh trung bình (~160 dpi)
hdpi – tài nguyên dành cho màn hình có mật độ điểm ảnh cao (~240 dpi)
xhdpi – tài nguyên dành cho màn hình có mật độ điểm ảnh cực cao (~320 dpi)
xxhdpi – tài nguyên dành cho màn hình có mật độ điểm ảnh cực cao (~480dpi)
xxxhdpi – tài nguyên dành cho màn hình có độ phân giải cực cao (~640 dpi)
nodpi – các tài nguyên không để điều chỉnh tỷ lệ bất kể mật độ pixel trên màn hình là bao nhiêu
anydpi – các tài nguyên cần điểu chỉnh tỷ lệ theo mật độ bất kỳ

Lưu ý: Bạn có thể thắc mắc tại sao các thành phần biểu tượng trình chạy nằm trong các thư mục mipmap riêng biệt với các thành phần ứng dụng khác nằm trong thư mục drawable. Điều này là do một số trình chạy có thể hiển thị biểu tượng ứng dụng của bạn ở kích thước lớn hơn kích thước do bộ chứa mật độ mặc định của thiết bị cung cấp. Ví dụ: trên thiết bị hdpi, một trình chạy thiết bị nhất định có thể muốn sử dụng phiên bản xhdpi của biểu tượng ứng dụng.

Nếu nhấp vào tệp hình ảnh, bạn sẽ thấy bản xem trước. Các tệp ic_launcher.png chứa phiên bản hình vuông của biểu tượng trong khi các tệp ic_launcher_round.png chứa phiên bản hình tròn của biểu tượng. Cả hai đều được cung cấp trong mỗi thư mục tài nguyên.

Ví dụ: đây là hình ảnh của res > mipmap-xxxhdpi > ic_launcher_round.png. Bạn cũng cần lưu ý rằng kích thước của thành phần nằm ở trên cùng bên phải. Hình ảnh này có kích thước 192px x 192px.

Đây cũng là một giao diện của res > mipmap-mdpi > ic_launcher_round.png. Kích thước chỉ là 48px x 48px.

Như bạn có thể thấy, các tệp hình ảnh bitmap này bao gồm một lưới cố định các pixel. Chúng đã được tạo ra cho một độ phân giải màn hình nhất định. Do đó, chất lượng có thể suy giảm khi bạn đổi kích thước.

Nếu bạn giảm tỷ lệ hình ảnh bitmap, có thể hình ảnh đó sẽ trông vẫn ổn do bạn đang loại bỏ thông tin pixel. Nếu bạn mở rộng đáng kể hình ảnh bitmap, hình ảnh có thể bị mờ vì Android sẽ cần phán đoán và điền thông tin pixel bị thiếu.

Lưu ý: Để biểu tượng ứng dụng không bị mờ, nhớ cung cấp nhiều hình ảnh bitmap của biểu tượng ứng dụng cho mỗi bộ chứa mật độ (mdpi, hdpi, xhdpi, v.v.) Lưu ý rằng mật độ điểm ảnh màn hình của thiết bị sẽ không chính xác là 160dpi, 240dpi, 320dpi, v.v. Dựa trên mật độ điểm ảnh màn hình hiện tại, Android sẽ chọn tài nguyên ở nhóm mật độ lớn nhất gần nhất sau đó giảm quy mô.

Đến giờ bạn đã có được một vài thông tin nền về các biểu tượng trình chạy. Tiếp theo, bạn sẽ tìm hiểu về các biểu tượng thích ứng khác.

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

Lớp nền trước và lớp nền sau

Kể từ phiên bản Android 8.0 (API cấp 26), chúng tôi đã hỗ trợ biểu tượng trình chạy thích ứng, cho phép bạn linh hoạt hơn và tạo được hiệu ứng hình ảnh thú vị khi nói đến biểu tượng ứng dụng. Đối với các nhà phát triển, điều đó có nghĩa là biểu tượng ứng dụng được tạo thành từ 2 lớp: lớp nền trước và lớp nền sau.

Trong ví dụ trên, biểu tượng Android màu trắng nằm ở lớp nền trước, còn lưới màu xanh dương và trắng nằm ở lớp nền sau. Lớp nền trước sẽ được xếp chồng lên trên lớp nền sau. Sau đó, một mặt nạ (mặt nạ hình tròn trong trường hợp này) sẽ được áp dụng lên trên cùng để tạo biểu tượng ứng dụng hình tròn.

Khám phá các tệp biểu tượng thích ứng

Xem các tệp biểu tượng thích ứng mặc định mà mẫu dự án cung cấp trong Android Studio.

Trong Project window (Cửa sổ dự án) của Android Studio, tìm và mở rộng thư mục tài nguyên res > mipmap-anydpi-v26.

Lưu ý: Bạn đã thêm biểu tượng thích ứng vào API cấp 26 của nền tảng, vì vậy, bạn cần khai báo biểu tượng thích ứng trong thư mục tài nguyên mipmap có bộ hạn định tài nguyên -v26 trên đó. Điều đó có nghĩa là các tài nguyên trong thư mục này sẽ chỉ được áp dụng trên các thiết bị đang chạy API 26 (Android 8.0) trở lên. Các tệp tài nguyên trong thư mục này sẽ bị bỏ qua trên các thiết bị chạy phiên bản nền tảng cũ.

Mở một trong các tệp XML, ví dụ: ic_launcher.xml. Bạn sẽ thấy như sau:

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

Hãy lưu ý cách dùng phần tử <adaptive-icon> để khai báo lớp <background> và <foreground> của biểu tượng ứng dụng bằng cách cung cấp các tài nguyên có thể vẽ cho mỗi lớp.
Quay lại chế độ xem Project (Dự án) và tìm nơi các đối tượng vẽ có thể được khai báo: drawable (đối tượng có thể vẽ) > ic_launcher_background.xml và drawable-v24 > ic_launcher_foreground.xml.
Chuyển sang chế độ xem Design (Thiết kế) để xem trước từng đối tượng (nền sau ở bên trái, nền trước ở bên phải).

Đây đều là hai tệp vectơ vẽ được. Chúng không có kích thước cố định tính bằng pixel. Nếu chuyển sang chế độ xem Code (Mã), bạn có thể xem khai báo XML cho vectơ vẽ được sử dụng phần tử <vector>.

Mặc dù vectơ vẽ được và hình ảnh bitmap đều mô tả một hình ảnh đồ hoạ, nhưng có những điểm khác biệt quan trọng.

Hình ảnh bitmap không hiểu nhiều về hình ảnh mà nó lưu giữ, ngoại trừ thông tin màu ở mỗi pixel. Mặt khác, đồ họa vectơ biết cách vẽ các hình dạng xác định một hình ảnh. Những hướng dẫn này bao gồm một tập hợp các điểm, đường kẻ và đường cong cùng với thông tin màu. Ưu điểm là đồ họa vectơ có thể được điểu chỉnh tỷ lệ cho bất kỳ kích thước canvas nào cho mọi mật độ điểm ảnh màn hình nào mà không làm giảm chất lượng.

Vectơ vẽ được là cách triển khai đồ họa vectơ của Android nhằm đủ linh hoạt trên thiết bị di động. Bạn có thể xác định chúng ở định dạng XML bằng các phần tử (dùng từ rõ nghĩa hơn) này. Thay vì cung cấp các phiên bản thành phần bitmap cho mọi bộ chứa mật độ, bạn chỉ cần xác định hình ảnh một lần. Do đó, giảm kích thước ứng dụng và giúp duy trì dễ dàng hơn.

Lưu ý: có sự đánh đổi khi sử dụng vectơ vẽ được và hình ảnh bitmap. Ví dụ: biểu tượng lý tưởng là các vectơ vẽ được bởi chúng được tạo thành từ các hình đơn giản, trong khi ảnh sẽ khó mô tả hơn dưới dạng một loạt hình dạng. Trong trường hợp đó, bạn nên sử dụng thành phần bitmap.

Bây giờ, đã đến lúc chuyển sang biểu tượng ứng dụng!

5. Tải xuống thành phần mới

Tiếp theo, tải 2 thành phần mới này xuống để có thể tạo biểu tượng thích ứng cho ứng dụng Máy tính tiền boa. Bạn không cần lo lắng rằng phải hiểu mọi chi tiết của các tệp vectơ vẽ được. Nội dung của chúng có thể được tạo tự động cho bạn từ các công cụ thiết kế.

Tải xuống ic_launcher_background.xml. Đây là vectơ vẽ được cho lớp nền. Nếu trình duyệt của bạn hiển thị tệp thay vì tải xuống tệp, hãy chọn File > Save Page As… (Tệp > Lưu trang dưới dạng…) để lưu vào máy tính của bạn.
Tải xuống ic_launcher_foreground.xml. Đây là vectơ vẽ được cho lớp nền trước.

Lưu ý rằng có một số yêu cầu nhất định đối với những thành phần lớp nền trước và nền sau, chẳng hạn như cả hai thành phần này phải có kích thước 108dp x 108dp. Tìm hiểu thêm về các yêu cầu tại đây hoặc bạn có thể xem hướng dẫn thiết kế biểu tượng Android trên trang web Material.

Do các cạnh của biểu tượng có thể bị cắt tùy vào hình dạng mặt nạ của nhà sản xuất thiết bị, bạn cần phải đưa thông tin chính của biểu tượng vào “vùng an toàn” (vùng tròn có đường kính 66 dp ở giữa lớp). Nội dung nằm ngoài vùng an toàn đó phải là thông tin không cần thiết (ví dụ: màu nền sau) nếu nội dung bị cắt.

6. Thay đổi biểu tượng ứng dụng

Hãy quay lại Android Studio để sử dụng thành phần mới.

Trước tiên, hãy xóa các tài nguyên có thể vẽ cũ có biểu tượng Android và nền sau lưới màu xanh lục. Trong Project view (Chế độ xem dự án), nhấp chuột phải vào tệp rồi chọn Delete (Xóa).

Xoá:

drawable/ic_launcher_background.xml
drawable-v24/ic_launcher_foreground.xml

Bạn có thể bỏ đánh dấu hộp Safe delete (with usage search) (Xoá an toàn (bằng cách tìm kiếm cách sử dụng)), sau đó nhấp vào OK.

Tạo Image Asset (Thành phần hình ảnh) mới. Bạn có thể nhấp chuột phải vào thư mục res rồi chọn New > Image Asset. (Mới > Thành phần hình ảnh). Bạn cũng có thể nhấp vào thẻ Resource Manager (Trình quản lý tài nguyên), nhấp vào biểu tượng dấu +, rồi chọn Image Asset (Thành phần hình ảnh).

Công cụ Image Asset Studio (Công cụ tạo thành phần hình ảnh) của Android mở ra.
Để nguyên chế độ cài đặt mặc định:

Loại biểu tượng: Biểu tượng trình chạy (Thích ứng và cũ)

Tên: ic_launcher

Khi bạn đã chọn Foreground Layer tab (Thẻ Lớp nền trước), đến phần phụ Source Asset (Thành phần nguồn). Trên trường Path (Đường dẫn), nhấp vào biểu tượng thư mục.
Một lời nhắc sẽ bật lên nhắc bạn duyệt máy tính và chọn tệp. Tìm vị trí của tệp ic_launcher_foreground.xml mới mà bạn vừa tải xuống máy tính. Nó có thể nằm trong thư mục tải xuống của máy tính. Khi tìm thấy, nhấp vào Open (Mở).
Path (Đường dẫn) hiện được cập nhật vị trí của vectơ vẽ được trong nền trước mới. Để nguyên Layer Name (Tên lớp) là ic_launcher_foreground và Asset Type (Loại thành phần) là Image (Hình ảnh).

Tiếp theo, chuyển sang Background Layer tab (thẻ Lớp nền sau) của giao diện. Giữ nguyên giá trị mặc định. Nhấp vào biểu tượng thư mục của Path (Đường dẫn).
Tìm vị trí của tệp ic_launcher_background.xml bạn vừa tải xuống. Nhấp vào Open (Mở).

Bản xem trước sẽ cập nhật khi bạn chọn các tệp tài nguyên mới. Đây là giao diện của giao diện với lớp nền trước và lớp nền mới.

Bằng cách hiển thị biểu tượng ứng dụng của bạn trong 2 lớp, nhà sản xuất thiết bị – được gọi là nhà sản xuất thiết bị gốc hay gọi tắt là OEM – có thể tạo ra nhiều hình dạng tuỳ thuộc vào thiết bị Android, như hiển thị trong bản xem trước ở trên. OEM cung cấp một mặt nạ áp dụng cho tất cả biểu tượng ứng dụng trên thiết bị.

Mặt nạ này được áp dụng ở đầu các lớp nền trước và nền sau của biểu tượng ứng dụng. Ví dụ về mặt nạ tròn và mặt nạ vuông bên dưới.

Khi áp dụng mặt nạ hình tròn cho cả hai lớp biểu tượng ứng dụng, kết quả là biểu tượng hình tròn có nền sau lưới màu xanh dương và một biểu tượng Android (hình bên trái ở trên). Hoặc, bạn có thể áp dụng mặt nạ vuông để tạo biểu tượng ứng dụng ở phía trên bên phải.

Việc có hai lớp cũng cho phép các hiệu ứng hình ảnh trở nên thú vị vì hai lớp này có thể di chuyển độc lập hoặc được điều chỉnh theo tỷ lệ. Để xem một số ví dụ thú vị về giao diện của các hiệu ứng hình ảnh, tìm hiểu bài đăng trên blog này trong thẻ Design Considerations (Phương án thiết kế). Do bạn không biết trước được người dùng của mình sẽ có thiết bị nào hoặc mặt nạ nào sẽ được OEM áp dụng cho biểu tượng của mình, nên bạn cần thiết lập biểu tượng thích ứng để thông tin quan trọng không bị cắt bớt.

Hãy đảm bảo nội dung chính của lớp nền trước (trong trường hợp này là biểu tượng chuông dịch vụ) nằm ở vùng an toàn và không bị cắt bởi các hình dạng mặt nạ khác nhau. Nếu nội dung quan trọng bị cắt bớt hoặc hiển thị quá nhỏ, bạn có thể sử dụng thanh trượt Resize (Đổi kích thước) trong phần Scaling (Điều chỉnh tỷ lệ) của từng lớp. Trong trường hợp này, bạn không cần đổi kích thước, vì vậy bạn có thể để ở mức 100%.

Nhấp vào Tiếp theo.
Bước này là để Confirm Icon Path(Xác nhận đường dẫn biểu tượng). Bạn có thể nhấp vào từng tệp để xem trước. Ở cuối sẽ có cảnh báo rằng một số tệp hiện có sẽ bị ghi đè (được hiển thị bằng màu đỏ). Bạn có thể làm vậy vì các tệp cũ đó là dành cho biểu tượng ứng dụng trước đó.

Bạn có thể sử dụng các mặc định, nhấp vào Finish (Hoàn tất).
Xác minh rằng tất cả thành phần được tạo đều có giao diện chính xác trong các thư mục mipmap. Ví dụ:

Tuyệt vời! Bây giờ, bạn sẽ thực hiện một thay đổi nữa.

Di chuyển các tệp vectơ vẽ được vào thư mục -v26

Tuỳ thuộc vào SDK tối thiểu của ứng dụng, bạn có thể nhận thấy rằng thành phần trên nền sau nằm trong thư mục drawable-v24, còn thành phần trên nền trước nằm trong thư mục drawable. Lý do là thành phần trên nền sau có một tính năng gradient (chuyển màu), có trong bản phát hành Android 7.0 (còn được gọi là API phiên bản 24, do đó có bộ hạn định tài nguyên -v24). Thành phần ở nền trước không có tính năng gradient (chuyển màu), do đó, tệp này có thể nằm trong thư mục drawable cơ sở.

Thay vì bố trí các thành phần ở nền trước và nền sau trong 2 thư mục drawable riêng biệt, hãy di chuyển cả 2 tệp vectơ vẽ được vào một thư mục tài nguyên -v26. Vì các thành phần này chỉ được dùng cho các biểu tượng thích ứng nên chỉ cần hai vectơ vẽ được này trên API 26 trở lên. Cấu trúc thư mục này sẽ giúp bạn dễ dàng tìm và quản lý các tệp biểu tượng thích ứng.

drawable-anydpi-v26
   ic_launcher_background.xml
   ic_launcher_foreground.xml
mipmap-anydpi-v26
   ic_launcher.xml
   ic_launcher_round.xml

Trước tiên, hãy tạo thư mục drawable-anydpi-v26. Nhấp chuột phải vào thư mục res. Chọn New > Android Resource Directory. (Mới > Thư mục tài nguyên Android).
Hộp thoại New Resource Directory (Thư mục tài nguyên mới) sẽ xuất hiện. Chọn các tuỳ chọn sau:

Tên thư mục: drawable-anydpi-v26

Loại tài nguyên: đối tượng có thể vẽ (Chọn từ trình đơn thả xuống)

Bộ nguồn: chính (để nguyên giá trị mặc định)

Nhấp vào OK. Trong chế độ xem Project (Dự án), hãy xác minh thư mục tài nguyên mới es > drawable-anydpi-v26 đã được tạo.

Nhấp chuột trái vào tệp ic_launcher_foreground.xml và kéo tệp đó từ thư mục đối tượng có thể vẽ vào thư mục drawable-anydpi-v26. Hãy nhớ việc đặt một tài nguyên trong thư mục “any dpi” (dpi bất kỳ) cho biết đó là tài nguyên có thể điều chỉnh tỷ lệ theo mật độ.
Nhấp chuột trái vào ic_launcher_background.xml và kéo nó từ thư mục drawable-v24 vào thư mục drawable-anydpi-v26.
Xóa thư mục drawable-v24 nếu thư mục này trống. Nhấp chuột phải vào thư mục đó rồi chọn Delete (Xóa).
Nhấp qua toàn bộ tệp drawable và mipmap trong dự án của bạn. Đảm bảo bản xem trước của các biểu tượng này là chính xác.

Thử nghiệm ứng dụng

Kiểm thử để đảm bảo biểu tượng ứng dụng mới xuất hiện. Chạy ứng dụng trên thiết bị của bạn (trình mô phỏng hoặc thiết bị thực tế).
Nhấn nút màn hình chính trên thiết bị.
Vuốt lên để hiển thị danh sách Tất cả ứng dụng.
Tìm ứng dụng bạn vừa cập nhật. Bạn sẽ thấy biểu tượng ứng dụng mới hiển thị.

Lưu ý: Tuỳ vào mẫu thiết bị, bạn có thể thấy biểu tượng trình chạy có hình dạng khác nhau. Tuy nhiên, nó cần hiển thị lớp nền trước trên lớp nền sau với một số loại mặt nạ được áp dụng cho nó.

Tốt lắm! Biểu tượng ứng dụng mới trông rất đẹp mắt.

Biểu tượng trình khởi chạy thích ứng và cũ

Giờ đây, biểu tượng thích ứng của bạn đã hoạt động tốt, bạn có thể thắc mắc tại sao không thể loại bỏ tất cả các hình ảnh bitmap biểu tượng ứng dụng. Bạn vẫn cần những tệp đó để biểu tượng ứng dụng của bạn xuất hiện với chất lượng cao trên các phiên bản Android cũ hơn, đây được gọi là khả năng tương thích ngược.

Trên thiết bị chạy Android 8.0 trở lên (API phiên bản 26 trở lên):

Bạn có thể sử dụng biểu tượng thích ứng (kết hợp vectơ vẽ được trên nền trước, vectơ vẽ được trên nền sau, kèm theo mặt nạ OEM trên đó). Dưới đây là các tệp có liên quan trong dự án của bạn:

res/drawable-anydpi-v26/ic_launcher_background.xml
res/drawable-anydpi-v26/ic_launcher_foreground.xml
res/mipmap-anydpi-v26/ic_launcher.xml
res/mipmap-anydpi-v26/ic_launcher_round.xml

Trên các thiết bị chạy bất kỳ phiên bản nào dưới Android 8.0 (nhưng trên mức API tối thiểu bắt buộc của ứng dụng):

Biểu tượng trình chạy cũ sẽ được sử dụng (hình ảnh bitmap trong thư mục mipmap gồm các bộ chứa có mật độ khác nhau). Dưới đây là các tệp có liên quan trong dự án của bạn:

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png

Về cơ bản, Android sẽ quay lại hình ảnh bitmap trên các thiết bị cũ hơn mà không hỗ trợ biểu tượng thích ứng.

Xin chúc mừng! Bạn đã hoàn thành tất cả các bước để thay đổi biểu tượng ứng dụng!

7. Mã giải pháp

Mã giải pháp cho lớp học lập trình này có dạng như dưới đây.

res/mipmap-anydpi-v26/ic_launcher.xml

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

res/mipmap-anydpi-v26/ic_launcher_round.xml

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

res/drawable-anydpi-v26/ic_launcher_background.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M0,0h108v108h-108z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:startY="-1.0078"
          android:startX="54"
          android:endY="106.9922"
          android:endX="54"
          android:type="linear">
        <item android:offset="0" android:color="#FF12C26D"/>
        <item android:offset="1" android:color="#FF0F9453"/>
      </gradient>
    </aapt:attr>
  </path>
</vector>

res/drawable-anydpi-v26/ic_launcher_foreground.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M38.19,65.92L69.32,65.92a1.2,1.2 0,0 0,1.2 -1.2,0.89 0.89,0 0,0 0,-0.23 17,17 0,0 0,-33.25 0,1.18 1.18,0 0,0 0.9,1.42ZM74.53,69.05a0.85,0.85 0,0 0,-0.78 -0.84L34,68.21a0.85,0.85 0,0 0,-0.77 0.84v2.82a0.84,0.84 0,0 0,0.77 0.86L73.78,72.73a0.85,0.85 0,0 0,0.77 -0.86L74.55,70.65C74.55,70.24 74.56,69.58 74.53,69.05ZM52.08,49h3.59a1.86,1.86 0,0 0,0 -3.72L52.08,45.28a1.86,1.86 0,0 0,0 3.72ZM53.87,39.81a1.19,1.19 0,0 0,1.19 -1.19L55.06,32.87a1.19,1.19 0,0 0,-2.38 0v5.71a1.19,1.19 0,0 0,1.19 1.19h0ZM61.69,41l4.62,-3.35a1.19,1.19 0,1 0,-1.4 -1.93L60.29,39A1.2,1.2 0,0 0,60 40.67a1.18,1.18 0,0 0,1.66 0.26ZM41.69,37.65L46.31,41a1.2,1.2 0,0 0,1.35 -2L43,35.66a1.19,1.19 0,0 0,-1.66 0.26,1.2 1.2,0 0,0 0.3,1.67Z"
      android:fillColor="#FFFFFF"/>
</vector>

Hình ảnh Bitmap cũng đã được Android Studio tạo tự động ở các vị trí sau:

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png

8. Tóm tắt

Đặt tệp biểu tượng ứng dụng vào thư mục tài nguyên mipmap.
Cung cấp các phiên bản khác nhau của hình ảnh bitmap biểu tượng ứng dụng trong mỗi bộ chứa mật độ (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) để tương thích ngược với các phiên bản Android cũ hơn.
Thêm bộ hạn định tài nguyên vào thư mục tài nguyên để chỉ định tài nguyên nên được sử dụng trên các thiết bị có cấu hình nhất định (ví dụ: v26).
Các vectơ vẽ được là việc triển khai đồ họa vectơ của Android. Chúng được xác định trong XML dưới dạng một tập hợp các điểm, đường kẻ và đường cong cùng với thông tin màu liên quan. Vectơ vẽ được có thể được điều chỉnh tỷ lệ cho bất kỳ mật độ nào mà không làm giảm chất lượng.
Chúng tôi đã giới thiệu biểu tượng thích ứng cho nền tảng Android trong API 26. Chúng được tạo thành từ một lớp nền trước và một lớp nền tuân theo các yêu cầu cụ thể để biểu tượng ứng dụng hiển thị chất lượng cao trên một loạt thiết bị có nhiều lớp phủ OEM.
Sử dụng Image Asset Studio (Công cụ tạo thành phần hình ảnh Studio) trong Android Studio để tạo biểu tượng thích ứng và cũ cho ứng dụng của bạn.