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

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

Biểu tượng ứng dụng là một cách quan trọng để phân biệt ứng dụng của bạn bằng cách thêm kiểu và hình thức riêng biệt. Biểu tượng ứng dụng xuất hiện ở một số nơi, bao gồm cả Màn hình chính, màn hình Tất cả ứng dụng và ứng dụng Cài đặt.

Bạn cũng có thể đã thấy một biểu tượng ứng dụng được gọi là biểu tượng trình chạy. Trình chạy là 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.

d24e2a39a22dfde7.png 1abe847ae9e7f62f.png

Nếu đã sử dụng 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ị tạo trải nghiệm trình chạy tuỳ chỉnh đặc trưng cho thương hiệu của họ. Ví dụ: các nhà sản xuất có thể hiển thị 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 như trên.

Chẳng hạn như 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 tròn góc hay hình truông (giữa hình vuông và hình tròn).

Hình ảnh của các hình dạng biểu tượng ứng dụng khác nhau

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 đồng nhất nhằm mang lại trải nghiệm nhất quán cho người dùng.

Hình ảnh minh hoạ hình dạng đồng nhất của các biểu tượ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 của bạn, ứng dụng của bạn có thể đáp ứng nhiều thiết bị bằng cách điều chỉnh biểu tượng trình chạy dựa trên màn hình của thiết bị.

Lớp học lập trình này cung cấp cho bạn các tệp nguồn hình ảnh cho biểu tượng trình chạy ứng dụng Affirmations (Lời tự động viên). Bạn sẽ dùng một công cụ trong Android Studio có tên 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ể áp dụng những gì đã học được với biểu tượng ứng dụng của các ứng dụng khác!

Và hình ảnh của biểu tượng Trình chạy ứng dụng Affirmations.

Đ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 tài sản hình ảnh để tạo các thành phần của 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 lại có hai lớp.

Những việc bạn sẽ làm

  • Biểu tượng trình chạy tuỳ chỉnh cho ứng dụng Affirmations.

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 tệp tài nguyên hình ảnh xuống.
  • Quyền truy cập vào GitHub

Tải mã khởi đầu xuống

Trong Android Studio, hãy mở thư mục basic-android-kotlin-compose-training-affirmations.

  1. Chuyển đến trang kho lưu trữ GitHub được cung cấp cho dự án.
  2. Xác minh rằng tên nhánh khớp với tên nhánh được chỉ định trong lớp học lập trình. Ví dụ: trong ảnh chụp màn hình sau đây, tên nhánh là main (chính).

2301510b78db9764.png

  1. Trên trang GitHub cho dự án này, nhấp vào nút Code (Mã nguồn). Thao tác này sẽ mở một cửa sổ bật lên.

5844a1bc8ad88ce1.png

  1. Trong cửa sổ bật lên, hãy nhấp vào nút Download ZIP (Tải tệp ZIP xuống) để lưu dự án vào máy tính. Chờ quá trình tải xuống hoàn tất.
  2. Xác định vị trí của tệp trên máy tính (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
  3. Nhấp đúp vào tệp ZIP để giải nén. Thao tác này sẽ tạo một thư mục mới chứa các tệp dự án.

Mở dự án trong Android Studio

  1. Khởi động Android Studio.
  2. Trong cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào Open (Mở).

4711318ba1db18a2.png

Lưu ý: Nếu Android Studio đã mở thì chuyển sang chọn lựa chọn File > Open (Tệp > Mở) trong trình đơn.

e400aad673cc7e28.png

  1. Trong trình duyệt tệp, hãy chuyển đến vị trí của thư mục dự án chưa giải nén (có thể nằm trong thư mục Downloads (Tệp đã tải xuống)).
  2. Nhấp đúp vào thư mục dự án đó.
  3. Chờ Android Studio mở dự án.
  4. Nhấp vào nút Run (Chạy) 1b472ca0dcd0297b.png để tạo bản dựng và chạy ứng dụng. Đảm bảo ứng dụng được xây dựng như mong đợi.

2. Biểu tượng trình chạy

Mục tiêu là để biểu tượng trình chạy trông sắc nét và rõ ràng, bất kể mẫu thiết bị hoặc mật độ màn hình. Mật độ màn hình đề cập đến số pixel trên mỗi inch hoặc số điểm trên mỗi inch (dpi) 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.

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

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

  1. Để xem giao diện của các biểu tượng trình chạy trong một dự án, hãy mở dự án đó trong Android Studio.
  2. Trong Project window (Cửa sổ dự án), chuyển sang khung hiển thị Project(Dự án). Cột này cho bạn biết cấu trúc tệp của dự án.

60dc4d35adaef95e.png

  1. Đế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 sẽ đặ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.

763bd70b9b4b12bf.png

Các thư mục có thể vẽ chứa các vectơ cho biểu tượng trình chạy trong các tệp XML. Một vectơ, trong trường hợp là một biểu tượng có thể vẽ, là một loạt lệnh vẽ hình ảnh khi hình ảnh được biên dịch. 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. Dưới đây là danh sách 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 cực cao (~480dpi)
  • xxxhdpi - tài nguyên dành cho màn hình có mật độ điểm ảnh cực cực cực cao (~640dpi)
  • 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ỳ
  1. 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.webp 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.webp 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 mipmap.

Ví dụ: đây là hình ảnh của res > mipmap-xxxhdpi > ic_launcher_round.webp. 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 192 px x 192 px.

24f29deb156cd419.png

Đây là hình ảnh của res > mipmap-mdpi > ic_launcher_round.webp. Kích thước chỉ là 48 px x 48 px.

d0e90cb893f45a2c.png

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.

Giờ đây, khi đã có một số nền trên biểu tượng trình chạy, bạn sẽ tìm hiểu về biểu tượng thích ứng.

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

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

Kể từ bản phát hành Android 8.0 (API cấp 26), hỗ trợ cho các biểu tượng thích ứng, tăng tính linh hoạt và thêm nhiều hiệu ứng hình ảnh thú vị. Đố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ừ hai lớp: lớp nền trước và lớp nền sau.

1af36983e3677abe.gif

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 được xếp chồng lên trên lớp nền. Một lớp phủ (trong trường hợp này là hình tròn) sau đó được áp dụng ở phía trên cùng để tạo thành 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 đã được cung cấp trong mã ứng dụng Affirmations của bạn.

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

872552bf2e2e1a8f.png

  1. Mở tệp 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"/>
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
  1. Hãy lưu ý cách dùng phần tử <adaptive-icon> để khai báo lớp <background><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.
  2. Quay lại khung hiển thị Project (Dự án) rồi tìm vị trí có thể vẽ của nền trước và nền sau: res > drawable > ic_launcher_background.xmlres > drawable > ic_launcher_foreground.xml.
  3. Chuyển sang khung hiển thị Design (Thiết kế) để xem trước từng khung hiển thị:

Thông tin khái quát:

4edd7a2c7c15f5c3.png

Nền trước:

7061ee6ad4cd4780.png

  1. Đâ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>.

ic_launcher_foreground.xml

<!--
    Copyright (C) 2023 The Android Open Source Project

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<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="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:endX="85.84757"
          android:endY="92.4963"
          android:startX="42.9492"
          android:startY="49.59793"
          android:type="linear">
        <item
            android:color="#44000000"
            android:offset="0.0" />
        <item
            android:color="#00000000"
            android:offset="1.0" />
      </gradient>
    </aapt:attr>
  </path>
  <path
      android:fillColor="#FFFFFF"
      android:fillType="nonZero"
      android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
      android:strokeWidth="1"
      android:strokeColor="#00000000" />
</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à đồ hoạ vectơ có thể được điều chỉnh tỷ lệ cho mọi kích thước canvas và 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 đồ hoạ vectơ của Android nhằm thay đổi kích thước 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ử khả thi 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.

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

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

Tải 2 nội dung mới sau đây xuống để tạo biểu tượng thích ứng cho ứng dụng Affirmations. Bạn không cần phải lo lắng về việc hiểu rõ từng chi tiết của các tệp vectơ vẽ được. Nội dung của trang web được tạo tự động cho bạn từ các công cụ thiết kế.

  1. Tải ic_launcher_background.xml xuống, đây là vectơ có thể vẽ cho lớp nền. Nếu trình duyệt của bạn hiển thị tệp thay vì tải tệp xuống, 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.
  2. Tải ic_launcher_foreground.xml xuống, đây là vectơ có thể vẽ 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 đều phải có kích thước 108 dpi x 108 dpi. Bạn có thể xem thêm thông tin chi tiết trong tài liệu về AdaptiveIconDrawable và cũng có thể xem hướng dẫn thiết kế về các biểu tượng Android trên trang web Material Design.

Vì các cạnh của biểu tượng có thể bị cắt bớt, tuỳ theo hình dạng của lớp phủ từ nhà sản xuất thiết bị, bạn cần đặt thông tin chính về biểu tượng của mình vào "vùng an toàn". Vùng an toàn là một vòng tròn có đường kính 66 dpi ở chính giữa lớp trên nền trước. Nội dung nằm ngoài vùng an toàn không cần thiết, chẳng hạn như màu nền và nội dung này bị cắt bớt.

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

Quay lại Android Studio để sử dụng tài sản mới bạn vừa tải xuống.

  1. Trước tiên, hãy xoá 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).

Xoá:

drawable/ic_launcher_background.xml
drawable/ic_launcher_foreground.xml

Xoá:

mipmap-anydpi-v26/
mipmap-hdpi/
mipmap-mdpi/
mipmap-xhdpi/
mipmap-xxhdpi/
mipmap-xxxhdpi/

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ính năng Xoá an toàn (có tìm kiếm theo mức sử dụng) tìm kiếm mã để sử dụng tài nguyên mà bạn sắp xoá. Trong trường hợp này, bạn sẽ thay thế các thư mục này bằng những thư mục mới có cùng tên, do đó bạn không cần phải lo lắng về việc Xoá an toàn.

  1. 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) hoặc nhấp vào thẻ Resource Manager (Trình quản lý tài nguyên), rồi nhấp vào Biểu tượng dấu +, sau đó chọn Image Asset (Thành phần hình ảnh) trên trình đơn thả xuống.

f6b86eeca72c5e60.png

  1. Công cụ Image Asset Studio của Android mở ra.
  2. Để 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

a02f2b23afa5a9e2.png

  1. Khi bạn đã chọn thẻ Foreground Layer (Lớp nền trước), hãy nhìn vào 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.
  2. 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 bạn vừa tải xuống. Nó có thể nằm trong thư mục Tải xuống của máy tính của bạn. Sau khi bạn tìm thấy nút này, hãy nhấp vào Mở.
  3. 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_foregroundAsset Type (Loại thành phần) là Image (Hình ảnh).

22d377ed01c15fa0.png

  1. Tiếp theo, chuyển sang thẻ Background Layer (Lớp nền sau) của giao diện. Để nguyên giá trị mặc định.
  2. Nhấp vào biểu tượng thư mục trong trường Đường dẫn.
  3. 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ở).

94f6ff164d839eee.png

  1. 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.

8be78c678ea8cb8c.png

Bằng cách hiện 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 các hình dạng riêng tuỳ vào thiết bị Android, như minh hoạ 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ị.

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

Việc có cả lớp nền trước và lớp nền cho phép hiệu ứng hình ảnh thú vị vì hai lớp này có thể di chuyển độc lập với nhau và được điều chỉnh tỷ lệ. Để biết một số ví dụ thú vị về hiệu ứng hình ảnh, hãy xem bài đăng trên blog Thiết kế biểu tượng thích ứng trong phần Các yếu tố cân nhắc về mặt thiết kế. Vì không biết người dùng sẽ dùng thiết bị nào hoặc lớp phủ mà OEM sẽ áp dụng cho biểu tượng của bạn 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.

  1. Nếu nội dung quan trọng bị cắt bớt hoặc xuất hiện quá nhỏ, thì bạn có thể sử dụng thanh trượt Resize (Đổi kích thước) trong mục Scaling (Điều chỉnh tỷ lệ) của từng lớp để đảm bảo mọi nội dung xuất hiện trong vùng an toàn. Để đảm bảo không có gì bị cắt bớt, hãy đổi kích thước hình nền trước và hình nền thành 99% bằng cách kéo thanh trượt Resize (Đổi kích thước) trong thẻ Foreground Layer (Lớp nền trước) và thẻ Background Layer (Lớp nền).

9d3b69a132295f3c.png

  1. Nhấp vào Tiếp theo.
  2. 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.

bc13432cc3c2c59a.png

  1. Nhấp vào Finish (Hoàn tất).
  2. 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ụ:

b26c2d1bd69b8f2c.png 9d9914885a0c18ea.png

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

Kiểm thử ứng dụng

  1. 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ế).
  2. Nhấn nút Màn hình chính trên thiết bị.
  3. Vuốt lên để hiển thị danh sách Tất cả ứng dụng.
  4. 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 xuất hiện.

c0769cdf9a48aadd.png

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

Biểu tượng trình 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.

Đối với các thiết bị chạy Android 8.0 trở lên (API phiên bản 26 trở lên), bạn có thể dùng Biểu tượng thích ứng (kết hợp các vectơ có thể vẽ trên nền, vectơ nền có thể vẽ khi đã áp dụng lớp phủ OEM ở trên cùng.) Dưới đây là các tệp có liên quan trong dự án của bạn:

res/drawable/ic_launcher_background.xml
res/drawable/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 mọi phiên bản dưới Android 8.0 (nhưng cao hơn cấp độ API tối thiểu bắt buộc của ứng dụng), Các biểu tượng trình chạy cũ được sử dụng (hình ảnh bitmap trong thư mục mipmap của các nhóm 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.webp
res/mipmap-mdpi/ic_launcher_round.webp
res/mipmap-hdpi/ic_launcher.webp
res/mipmap-hdpi/ic_launcher_round.webp
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.webp
res/mipmap-xxhdpi/ic_launcher.webp
res/mipmap-xxhdpi/ic_launcher_round.webp
res/mipmap-xxxhdpi/ic_launcher.webp
res/mipmap-xxxhdpi/ic_launcher_round.webp

Về cơ bản, Android 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!

6. Lấy mã giải pháp

Để tải mã này xuống khi lớp học lập trình đã kết thúc, bạn có thể sử dụng các lệnh git sau:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations.git
$ cd basic-android-kotlin-compose-training-affirmations
$ git checkout main

Ngoài ra, bạn có thể tải kho lưu trữ xuống dưới dạng tệp zip rồi giải nén và mở trong Android Studio.

Nếu bạn muốn xem mã giải pháp, hãy xem mã đó trên GitHub.

  1. Chuyển đến trang kho lưu trữ GitHub được cung cấp cho dự án.
  2. Xác minh rằng tên nhánh khớp với tên nhánh được chỉ định trong lớp học lập trình. Ví dụ: trong ảnh chụp màn hình sau đây, tên nhánh là main (chính).

2301510b78db9764.png

  1. Trên trang GitHub cho dự án này, nhấp vào nút Code (Mã nguồn). Thao tác này sẽ mở một cửa sổ bật lên.

5844a1bc8ad88ce1.png

  1. Trong cửa sổ bật lên, hãy nhấp vào nút Download ZIP (Tải tệp ZIP xuống) để lưu dự án vào máy tính. Chờ quá trình tải xuống hoàn tất.
  2. Xác định vị trí của tệp trên máy tính (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
  3. Nhấp đúp vào tệp ZIP để giải nén. Thao tác này sẽ tạo một thư mục mới chứa các tệp dự án.

Mở dự án trong Android Studio

  1. Khởi động Android Studio.
  2. Trong cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào Open (Mở).

4711318ba1db18a2.png

Lưu ý: Nếu Android Studio đã mở thì chuyển sang chọn lựa chọn File > Open (Tệp > Mở) trong trình đơn.

e400aad673cc7e28.png

  1. Trong trình duyệt tệp, hãy chuyển đến vị trí của thư mục dự án chưa giải nén (có thể nằm trong thư mục Downloads (Tệp đã tải xuống)).
  2. Nhấp đúp vào thư mục dự án đó.
  3. Chờ Android Studio mở dự án.
  4. Nhấp vào nút Run (Chạy) 1b472ca0dcd0297b.png để tạo bản dựng và chạy ứng dụng. Đảm bảo ứng dụng được xây dựng như mong đợi.

7. 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 (v24 hoặc v26).
  • Các vectơ vẽ được là cách triển khai đồ hoạ 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 thẳng 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 trong Android Studio để tạo biểu tượng thích ứng và cũ cho ứng dụng của bạn.

8. Tìm hiểu thêm