1. Giới thiệu
Ngày cập nhật gần đây nhất: 08/04/2022
Từ phiên bản Android 13, người dùng có thể thiết lập giao diện cho biểu tượng trình chạy thích ứng. Với tính năng này, các biểu tượng ứng dụng trong trình chạy Android được hỗ trợ sẽ được tô màu để kế thừa màu của hình nền và các giao diện khác mà người dùng chọn.
Dễ dàng tạo tất cả thành phần hệ thống cần thiết cho ứng dụng Android, bao gồm cả biểu tượng màu thích ứng mới.
Kiến thức bạn sẽ học được
- Hiểu rõ các loại biểu tượng ứng dụng và mẹo thiết kế cho các biểu tượng đó.
- Cách sử dụng mẫu Figma cho trình chạy Android.
- Cách sử dụng trình tạo thành phần của Android Studio.
- Cách xem trước biểu tượng trình chạy bằng trình mô phỏng Android Studio.
Điều kiện tiên quyết
- Kiến thức cơ bản về Figma
- Không bắt buộc: Hình minh hoạ biểu tượng ứng dụng (nền trước, nền sau và đơn sắc)
Bạn cần có
- Một tài khoản Figma
- Một tệp Figma Designlab
- Không bắt buộc: Một máy tính đã cài đặt Android Studio
2. Bắt đầu
Thiết lập
Để bắt đầu, bạn cần truy cập vào tệp Figma biểu tượng ứng dụng Android.
Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.
Sao chép qua trang Cộng đồng Figma
Chuyển đến tệp mẫu trình chạy Android hoặc tìm kiếm phông chữ biểu tượng thích ứng Android trong Cộng đồng Figma. Nhấp vào Get a Copy (Tải bản sao) ở góc trên cùng bên phải để sao chép tệp vào tệp của bạn.
Sử dụng mẫu
Mẫu biểu tượng Android gồm 2 trang:
- Trang bìa trình bày ngắn gọn các khái niệm liên quan và cách sử dụng mẫu.
- Trang mẫu bao gồm mọi thứ bạn cần để tạo các thành phần bắt buộc,được chia thành 3 khung (Màu, Hình dạng, Cửa hàng Play).
Lưu ý: Trong Bảng điều khiển lớp bên trái, hầu hết các lớp và nhóm đều bị khoá; bạn nên giữ nguyên trạng thái khoá. (Bạn sẽ có thể đặt hình minh hoạ trong các nhóm hình minh hoạ đã mở khoá.)
Tuy nhiên, trước khi bắt đầu tạo thành phần, hãy xem những gì chúng ta sẽ tạo...
3. Biểu tượng hệ thống Android
Biểu tượng trình khởi chạy
Biểu tượng trình khởi chạy (hay biểu tượng ứng dụng) đóng vai trò là một phần thiết yếu trong trải nghiệm khởi chạy ứng dụng. Biểu tượng trình khởi chạy xuất hiện trên màn hình chính dưới dạng điểm truy cập vào ứng dụng.
Hình dạng thích ứng
Biểu tượng thích ứng (hay 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ó 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 này có thể hiển thị 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ị hình vuông tròn trên thiết bị khác. Mỗi nhà sản xuất thiết bị gốc phải cung cấp một mặt nạ mà hệ thống dùng để hiển thị tất cả biểu tượng thích ứng có cùng hình dạng.
Khả năng thích ứng với hình dạng cũng cho phép hệ thống áp dụng nhiều hiệu ứng ảnh động với lượt tương tác của người dùng.
Màu thích ứng
Giờ đây, biểu tượng thích ứng có thể sử dụng màu động để cho phép biểu tượng ứng dụng theo giao diện được cá nhân hoá.
Nếu người dùng đã bật tính năng biểu tượng ứng dụng theo giao diện (nói cách khác là bật nút chuyển Biểu tượng theo giao diện trong phần cài đặt hệ thống) và trình khởi 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.
Tương tự như các biểu tượng thích ứng với hình dạng, biểu tượng màu thích ứng bao gồm một nền trước và nền sau. Bạn chỉ cần cung cấp một thành phần biểu tượng đơn sắc ở nền trước. Hệ thống sẽ xử lý nền sau và màu sắc bằng bảng phối màu đã trích xuất.
Bạn cũng có thể sử dụng cùng một biểu tượng đơn sắc cho biểu tượng thông báo.
Cũ
Bạn nên đưa biểu tượng cũ vào để hỗ trợ các thiết bị chạy phiên bản Android cũ hoặc không hỗ trợ các tính năng thích ứng (trước phiên bản 8.0).
Các biểu tượng này sẽ không có thành phần nền trước và nền sau, đồng thời có thể có hình dạng tự do. Nếu bạn đang sử dụng mẫu được cung cấp, thì hình minh hoạ hình dạng thích ứng cuối cùng sẽ được xuất ở các kích thước cần thiết cho biểu tượng cũ.
Biểu tượng thông báo
Thông báo là nội dung mà Android hiển thị ở bên ngoài giao diện người dùng ứng dụng của bạn để cho người dùng biết lời nhắc, thông tin liên lạc từ mọi người hay các thông tin kịp thời khác từ ứng dụng. Hệ thống hiển thị thông báo ở nhiều vị trí và định dạng, chẳng hạn như biểu tượng trong thanh trạng thái, mục nhập có thông tin chi tiết hơn trong ngăn thông báo, huy hiệu trên biểu tượng của ứng dụng và trên các thiết bị đeo được ghép nối một cách tự động.
Hình minh hoạ trên Cửa hàng Play
Bạn có thể sử dụng ảnh đầu trang, ảnh chụp màn hình, đoạn mô tả ngắn và video để làm nổi bật và quảng bá ứng dụng của bạn trên Google Play cũng như trên các kênh quảng bá khác của Google.
Biểu tượng ứng dụng không thay thế biểu tượng trình chạy của ứng dụng, nhưng cần có độ trung thực và độ phân giải cao hơn.
Tương tự như biểu tượng trình chạy, hình minh hoạ có thể chiếm toàn bộ không gian thành phần hoặc bạn có thể thiết kế và đặt các yếu tố hình minh hoạ như biểu trưng trên lưới keyline.
Bạn phải cung cấp biểu tượng ứng dụng hình vuông có kích thước 512x512 px để có thể phát hành trang thông tin trên Cửa hàng Play. Nếu bạn đang sử dụng mẫu biểu tượng ứng dụng Android, thì mẫu này sẽ được cung cấp khi xuất bằng hình minh hoạ Hình dạng thích ứng.
4. Các phương pháp hay nhất về thiết kế
Biểu tượng trình khởi chạy sẽ khởi chạy ứng dụng cho người dùng. Là điểm truy cập vào ứng dụng, các biểu tượng này phải dễ nhận biết và dễ đọc. Sau đây là một số phương pháp hay nhất để đảm bảo các đặc điểm này trong biểu tượng trình chạy.
Đảm bảo hình minh hoạ đơn giản. Tránh sử dụng nhiều lớp, nhiều hiệu ứng và văn bản. Các chi tiết này sẽ bị mất hoặc khó nhìn thấy ở kích thước nhỏ. 
Tránh các hình dạng phức tạp. Trong đó có cả biểu trưng. Nếu có thể, hãy sử dụng biểu trưng đơn giản hoá hoặc cân nhắc biểu tượng mà người dùng liên kết với ứng dụng của bạn. Hình dạng dễ đọc và riêng biệt giúp tạo sự thống nhất để người dùng dễ dàng nhận ra ứng dụng của bạn trong nhiều bối cảnh (màu thích ứng và thông báo). 
Sử dụng lưới. Tận dụng lưới hoặc keyline để đảm bảo hình minh hoạ ở nền trước sẽ hoạt động khi bị cắt, bao gồm cả hình minh hoạ tràn lề. 
Cân nhắc độ tương phản. Đối với biểu tượng hình dạng thích ứng và biểu tượng cũ, hãy đảm bảo nền trước và nền sau của biểu tượng có độ tương phản dễ đọc. Tránh sử dụng bóng đổ đậm vì có thể bị nhầm lẫn với bóng của hệ thống. 
Giữ hình minh hoạ trong vùng an toàn. Giữ thành phần nền trước trong 72x72 px (trừ phi bạn đang sử dụng hình minh hoạ tràn lề). Giữ nền ở 108x108 px. Lưu ý: Khung hình minh hoạ mẫu biểu tượng lớn hơn 72x72 px để bạn có thể tạo hình minh hoạ biểu tượng. Các thành phần sẽ được đổi kích thước để phù hợp với thông số kỹ thuật.
Định dạng vectơ. Hãy cố gắng sử dụng hình minh hoạ ở định dạng vectơ (chẳng hạn như tệp SVG, AI, PDF và EPS) thay vì định dạng đường quét (chẳng hạn như tệp PNG, JPG và GIF). Điều này đảm bảo hình minh hoạ của bạn tương thích với các tính năng mới hơn và dễ chỉnh sửa hơn. 
5. Biểu tượng màu thích ứng và biểu tượng thông báo
Bây giờ đến lượt bạn tạo biểu tượng hệ thống Android của riêng mình.
- Tìm tệp Figma biểu tượng ứng dụng Android.
- Trong tệp, hãy tìm khung Adaptive color (Màu thích ứng). Tìm trong bảng điều khiển lớp bên trái để tìm Adaptive color > Components > art > Icon artwork area > Themed Icon art < add your icon (Màu thích ứng > Thành phần > hình minh hoạ > Khu vực hình minh hoạ biểu tượng > Hình minh hoạ biểu tượng theo giao diện < thêm biểu tượng của bạn). Nếu bạn đã chuẩn bị sẵn biểu tượng đơn sắc, hãy sao chép biểu tượng đó vào đây để thay thế biểu tượng bugdroid mẫu và chuyển đến bước 6.
- Nếu bạn không có biểu tượng đơn sắc, hãy bắt đầu bằng biểu trưng hoặc biểu tượng liên quan đến ứng dụng của bạn. Tham khảo các mẹo thiết kế để cập nhật biểu tượng. Trước tiên, hãy đơn giản hoá và tránh các hình dạng phức tạp. Ví dụ: hình minh hoạ được sử dụng trong ứng dụng được đơn giản hoá bằng các hình dạng lá ít phức tạp hơn. Bóng và chi tiết đường kẻ được mô phỏng bằng khoảng trắng.
- Bây giờ, hãy cập nhật kích thước bằng lưới keyline. Ở đây, chúng tôi đã đặt chế độ đổi kích thước thành Scale (Điều chỉnh tỷ lệ) và đảm bảo hình minh hoạ nằm trong vùng an toàn ở nền trước. Mẫu được thiết lập với hình minh hoạ ở tỷ lệ 4x và tự động đổi kích thước để xuất, vì vậy, bạn có thể thiết kế biểu tượng ở tỷ lệ lớn hơn.
- Tệp được thiết lập để hoạt động với Material Theme Builder (Trình tạo giao diện Material) nhằm giúp xem trước màu động. Kết nối kiểu màu biểu tượng ở nền trước với On-surface-variant (Biến thể trên bề mặt).
- Bây giờ, khi mở Material Theme Builder (Trình tạo giao diện Material) từ Bảng điều khiển trình bổ trợ,bạn có thể xáo trộn màu nguồn hoặc thêm hình ảnh để cập nhật màu bằng màu nguồn đã trích xuất.
- Biểu tượng này sẽ trông như thế nào ở nhiều độ phân giải hoặc trên màn hình chính? Mẫu được thiết lập để hình minh hoạ được đặt trong khung hình minh hoạ xuất hiện trong nhiều bối cảnh xem trước.
- Hệ thống sử dụng biểu tượng đơn sắc làm thông báo và hiển thị như vậy trong bản xem trước.
6. Biểu tượng hình dạng thích ứng và biểu tượng cũ
Bây giờ, chúng ta sẽ tạo biểu tượng hình dạng thích ứng và biểu tượng cũ để đảm bảo hỗ trợ rộng rãi cho biểu tượng.
- Trong tệp, hãy tìm khung Shape (Hình dạng). Tìm trong bảng điều khiển lớp bên trái để tìm Icon background < add your icon* (Nền biểu tượng < thêm biểu tượng của bạn)*. Nếu bạn đã chuẩn bị sẵn biểu tượng, hãy sao chép biểu tượng đó vào đây để thay thế biểu tượng bugdroid mẫu và chuyển đến bước 5.* Nếu bạn không có biểu tượng, hãy bắt đầu bằng biểu trưng hoặc biểu tượng liên quan đến ứng dụng của bạn hoặc sử dụng lại biểu tượng đơn sắc.
- Cập nhật biểu tượng ở nền trước, lưu ý các phương pháp hay nhất về biểu tượng. Ở đây, tôi đã khôi phục màu sắc hình minh hoạ ban đầu, nhưng vẫn giữ chi tiết ở mức tối thiểu.
- Bây giờ, hãy cập nhật kích thước bằng lưới keyline. Ở đây, chúng tôi đã đặt chế độ đổi kích thước thành Scale (Điều chỉnh tỷ lệ) và đảm bảo hình minh hoạ nằm trong vùng an toàn ở nền trước.
- Biểu tượng ứng dụng hình dạng thích ứng cũng có thể có nền riêng biệt. Điều này cho phép các lớp của biểu tượng được cắt một cách an toàn và cung cấp hiệu ứng chuyển động tinh tế khi tương tác. Bạn cũng có thể sử dụng và xác định nền màu đồng nhất trong Android Studio.
- Bản xem trước cập nhật để hiển thị nền trước và nền sau trông như thế nào khi kết hợp với nhau, trên màn hình chính, nhiều hình dạng bị cắt và dưới dạng biểu tượng cũ.
Bạn có thể cập nhật hình dạng dùng để cắt trong bản xem trước màn hình chính bằng cách chọn biểu tượng và thay đổi tuỳ chọn biến thể hình dạng. 
7. Xuất
Tuyệt vời, bạn đã cập nhật mẫu bằng biểu tượng ứng dụng! Hãy xuất các biểu tượng đó để triển khai.
- Đảm bảo không chọn gì trên khung hiển thị.
- Chuyển đến trình đơn Figma > File (Tệp) > Export (Xuất) (Shift + Cmd + E).
- Trong trình đơn xuất, hãy xác nhận việc xuất. Thao tác này sẽ tải các thành phần xuống từ mẫu.
Nội dung trong tệp xuất là gì?
Các thành phần đã xuất có tất cả các tệp cần thiết để triển khai biểu tượng ứng dụng, như sau
- Figma xuất biểu tượng đơn sắc ở nền trước cho màu thích ứng dưới dạng tệp SVG, cùng với cả nền trước và nền sau cho biểu tượng hình dạng thích ứng.
- Figma cũng cung cấp biểu tượng cũ trong nhiều thư mục mipmap được sắp xếp theo độ phân giải.
Vậy là xong! Biểu tượng của bạn đã sẵn sàng để gửi cho nhóm phát triển.
Ngoài ra, nếu bạn muốn xem trước biểu tượng trong Android Studio và chuyển đổi các tệp SVG đó thành định dạng thành phần cuối cùng, hãy tiếp tục bước tiếp theo.
8. Sử dụng Image Asset Studio
Bắt đầu dùng Android Studio
- Tải và cài đặt Android Studio.
- Mở Android Studio.
Android Studio sẽ nhắc bạn chọn các tuỳ chọn để bắt đầu một dự án mới hoặc chọn các dự án hiện có.
- Chọn một dự án mới. Các màn hình sau đây sẽ hướng dẫn bạn cách thiết lập dự án mới.
- Chọn bất kỳ mẫu nào trong các mẫu bắt đầu, vì chúng ta chỉ xem xét các biểu tượng khởi chạy.
- Sau đó, đặt tên cho dự án mới rồi chọn Finish (Hoàn tất). Quá trình tạo dự án mới sẽ mất một vài phút.
Sử dụng Image Asset Studio
Bây giờ, chúng ta có thể thêm biểu tượng vào dự án bằng một công cụ hữu ích là Asset Studio.
- Để truy cập vào công cụ này, hãy chọn File menu > New > Image Asset (Trình đơn Tệp > Mới > Thành phần hình ảnh).
- Khi Image Asset Studio (Công cụ tạo thành phần hình ảnh) mở ra, hãy thêm lớp nền trước bằng cách chọn biểu tượng thư mục trong Path (Đường dẫn). Chọn tệp SVG đã xuất làm drawable-anydpi/ic_launcher.svg
- Chọn thẻ Background Layer (Lớp nền) và chọn lớp nền đã xuất. Ngoài ra, hãy chọn Asset Type: Color (Loại thành phần: Màu) để thay thế bằng nền trình khởi chạy màu đồng nhất.
- Quay lại lớp nền trước và kiểm tra kỹ xem hình ảnh có nằm trong vùng an toàn hay không. Đổi kích thước biểu tượng thành kích thước phù hợp nhất về mặt hình ảnh.
- Khi hoàn tất, hãy nhấp vào Next (Tiếp theo). Thao tác này sẽ hỏi vị trí đặt biểu tượng trong dự án của bạn (để nguyên giá trị mặc định hoặc chuyển sang Main (Chính)). Sau đó, nhấp vào Finish (Hoàn tất). Bạn có thể tìm thấy thành phần trình khởi chạy trong res > drawable. Nhấp đúp sẽ mở bản xem trước của vectơ vẽ được cuối cùng.
- Sao chép và dán thành phần lớp đơn sắc vào res/drawable hoặc res/drawable-v24 theo cách thủ công hoặc nhập lớp đơn sắc theo cách thủ công bằng cách nhấp chuột phải vào thư mục res rồi chọn New > Vector Asset (Mới > Thành phần vectơ).
- Trong res/mipmap-anydpi-v26/ic_launcher.xml và res/mipmap-anydpi-v26/ic_launcher_round.xml, hãy thêm hoặc thay đổi android:monochrome="path/to/monochrome/asset để trỏ đến thành phần đơn sắc chính xác.
9. Xem trước và tài nguyên
Xem trước trong Trình mô phỏng
Chúng tôi đã thực hiện việc này để thêm các biểu tượng đó vào dự án ứng dụng, cho phép chúng tôi xem trước trên một thiết bị thực hoặc trình mô phỏng! Hãy xem biểu tượng của chúng ta sẽ trông như thế nào trong thực tế.
Bạn nên thiết lập trình mô phỏng theo mặc định, nhưng nếu không, Hãy tạo thiết bị Android ảo. Nhấp vào nút phát màu xanh lục. Thao tác này sẽ tạo dự án và mở trình mô phỏng.
Thành phần cuối cùng
Tuyệt vời, bạn đã có thể kiểm tra xem biểu tượng trình chạy sẽ trông như thế nào trên một thiết bị bằng trình mô phỏng và thêm các biểu tượng đó vào một dự án ứng dụng. Thao tác này đã chuyển đổi các biểu tượng đó thành dạng sản xuất cuối cùng! Nhưng chúng ở đâu?
Các thành phần tồn tại dưới dạng tài nguyên với ứng dụng Android và có thể được tìm thấy bằng cách mở Resource panel (Bảng điều khiển tài nguyên) (thường ở bên trái). Xem chi tiết ứng dụng, sau đó tìm thư mục Res. Nhấp chuột phải để mở trình đơn rồi chọn Open in Finder (Mở trong Finder) (trên Mac), thao tác này sẽ mở cửa sổ Finder. Bạn có thể tuỳ ý tiết kiệm thời gian phát triển và kiểm thử chất lượng bằng cách chuyển đổi và kiểm thử các thành phần còn lại của ứng dụng bằng quy trình tương tự. Nếu bạn đã chuyển đổi các thành phần còn lại của ứng dụng, thì có thể chia sẻ thư mục này với nhóm phát triển.
10. Xin chúc mừng
Bạn làm tốt lắm! Bạn đã tìm hiểu về các biểu tượng hệ thống Android cần thiết để tạo ứng dụng Android, thiết kế biểu tượng của riêng bạn, khám phá tài nguyên mẫu biểu tượng và có thể đi xa hơn bằng cách tìm hiểu sâu về Android Studio để xem trước và chuyển đổi thành phần cho quá trình phát hành công khai!
Nếu bạn có thắc mắc, cứ thoải mái hỏi chúng tôi bất cứ lúc nào qua @MaterialDesign trên X.
Hãy theo dõi để biết xem nội dung và hướng dẫn về thiết kế trên youtube.com/MaterialDesign