Trang này được dịch bởi Cloud Translation API.

Thanh hệ thống Android

Thanh trạng thái, thanh chú thích và thanh điều hướng được gọi chung là các thanh hệ thống. Các vùng này hiển thị thông tin quan trọng như mức pin, thời gian và cảnh báo thông báo, đồng thời cho phép tương tác trực tiếp với thiết bị từ mọi nơi.

Bạn cần phải tính đến tầm quan trọng của các thanh hệ thống, cho dù bạn đang thiết kế giao diện người dùng để tương tác với hệ điều hành Android, phương thức nhập hay các tính năng khác của thiết bị.

**Hình 1.** Hình ảnh phía sau các thanh hệ thống.

Cướp lại bóng

Đưa thanh hệ thống vào khi thiết kế ứng dụng. Hãy tính đến các vùng an toàn trên giao diện người dùng, các hoạt động tương tác với hệ thống, phương thức nhập, phần cắt màn hình, thanh trạng thái, thanh chú thích, thanh điều hướng và các chức năng khác của thiết bị.
Giữ cho thanh trạng thái và thanh điều hướng của hệ thống trong suốt hoặc mờ và vẽ nội dung phía sau các thanh này để tràn viền.

Thanh trạng thái

Trên Android, thanh trạng thái chứa các biểu tượng thông báo và biểu tượng hệ thống. Người dùng tương tác với thanh trạng thái bằng cách kéo thanh trạng thái xuống để truy cập vào ngăn thông báo. Kiểu thanh trạng thái có thể trong suốt hoặc mờ.

Biểu tượng thanh trạng thái

Các biểu tượng trên thanh trạng thái có thể xuất hiện khác nhau tuỳ thuộc vào ngữ cảnh, thời gian trong ngày, các tuỳ chọn hoặc giao diện do người dùng đặt và các thông số khác. Để biết thêm thông tin, hãy xem bài viết Biểu tượng thanh hệ thống.

Khi có thông báo, một biểu tượng thường xuất hiện trong thanh trạng thái. Điều này cho người dùng biết rằng có nội dung cần xem trong ngăn thông báo. Đây có thể là biểu tượng hoặc biểu trưng ứng dụng đại diện cho kênh. Xem phần Thiết kế thông báo.

Hình 4. Biểu tượng thông báo trong thanh trạng thái.

Đặt kiểu thanh trạng thái

Đặt thanh trạng thái ở chế độ trong suốt hoặc mờ để đảm bảo nội dung ứng dụng của bạn trải dài trên toàn bộ màn hình. Sau đó, hãy đặt kiểu cho các biểu tượng trên thanh hệ thống để các biểu tượng có độ tương phản phù hợp.

Chế độ tràn viền được thực thi trên Android 15, làm cho thanh trạng thái trong suốt theo mặc định. Gọi enableEdgeToEdge() để đảm bảo khả năng tương thích ngược.

Trong hình bên trái sau đây, thanh trạng thái có màu trong suốt và nền màu xanh lục của TopAppBar được vẽ phía sau thanh trạng thái.

**Hình 5.** Hãy sử dụng chế độ tràn viền để nâng cao nội dung của bạn. Không có thanh hệ thống mờ.

Thanh trạng thái trong suốt là lý tưởng khi giao diện người dùng không xuất hiện bên dưới thanh trạng thái hoặc hình ảnh được vẽ bên dưới thanh trạng thái. Thanh trạng thái trong suốt là lựa chọn lý tưởng khi giao diện người dùng cuộn bên dưới thanh trạng thái. Để biết thêm về tính năng bảo vệ hiệu ứng chuyển màu, hãy xem phần Thiết kế tràn viền.

**Hình 6.** Một ứng dụng tràn viền có lớp bảo vệ chuyển màu hai tông màu trải dài trên hai ngăn phía sau thanh trạng thái của hệ thống.

Android cho phép người dùng điều khiển thao tác điều hướng bằng các nút điều khiển quay lại, trang chủ và tổng quan:

Thao tác quay lại sẽ trực tiếp quay lại chế độ xem trước đó.
Trang chủ chuyển đổi ra khỏi ứng dụng và chuyển đến màn hình chính của thiết bị.
Trang tổng quan cho thấy các ứng dụng đang hoạt động và các ứng dụng gần đây chưa đóng.

Người dùng có thể chọn trong số nhiều cấu hình thanh điều hướng, bao gồm cả thao tác điều hướng bằng cử chỉ (nên dùng) và thao tác điều hướng bằng 3 nút. Để mang lại trải nghiệm tốt nhất, hãy tính đến nhiều loại thao tác điều hướng.

Bạn nên sử dụng tính năng điều hướng bằng cử chỉ, trừ phi người dùng chọn cách khác trong lựa chọn ưu tiên của họ. Thao tác bằng cử chỉ không sử dụng các nút để quay lại, chuyển đến màn hình chính và tổng quan, thay vào đó, thao tác này hiển thị một tay điều khiển cử chỉ duy nhất để hỗ trợ. Người dùng tương tác bằng cách vuốt từ cạnh trái hoặc phải của màn hình để quay lại và vuốt lên từ dưới cùng để quay lại màn hình chính. Thao tác vuốt lên và giữ sẽ mở ra thông tin tổng quan.

Điều hướng bằng cử chỉ là một mẫu điều hướng có thể mở rộng hơn để thiết kế trên màn hình di động và màn hình lớn hơn. Để mang lại trải nghiệm tốt nhất cho người dùng, hãy tính đến tính năng điều hướng bằng cử chỉ bằng cách làm như sau:

Hỗ trợ nội dung tràn viền.
Tránh thêm các lượt tương tác hoặc mục tiêu chạm trong phần lồng ghép điều hướng bằng cử chỉ.

Để biết thêm thông tin, hãy xem phần Thêm tính năng hỗ trợ thao tác điều hướng bằng cử chỉ.

**Hình 7.** Thanh điều hướng bằng cử chỉ.

Chế độ thao tác bằng 3 nút cung cấp 3 nút cho thao tác quay lại, màn hình chính và tổng quan.

**Hình 8.** Thanh điều hướng bằng 3 nút.

Tuỳ thuộc vào phiên bản Android và thiết bị, người dùng có thể sử dụng các cấu hình thanh điều hướng khác. Ví dụ: thao tác bằng 2 nút cung cấp 2 nút cho màn hình chính và quay lại.

**Hình 9.** Thanh điều hướng bằng 2 nút.

Biểu tượng thanh điều hướng

Biểu tượng thanh điều hướng cũng có thể xuất hiện theo cách khác nhau tuỳ thuộc vào giao diện hoặc lựa chọn ưu tiên do người dùng đặt. Để biết thêm thông tin, hãy xem phần Biểu tượng thanh hệ thống.

Android xử lý việc bảo vệ hình ảnh của giao diện người dùng ở chế độ điều hướng bằng cử chỉ và ở các chế độ nút. Hệ thống áp dụng tính năng thích ứng màu động, trong đó nội dung của các thanh hệ thống sẽ thay đổi màu dựa trên nội dung phía sau các thanh đó.

Chế độ thao tác bằng cử chỉ

Sau khi nhắm đến Android 15 hoặc gọi enableEdgeToEdge trên Activity, hệ thống sẽ vẽ một thanh điều hướng bằng cử chỉ trong suốt và áp dụng tính năng thích ứng màu động. Trong ví dụ sau, tay cầm trong thanh điều hướng sẽ thay đổi thành màu tối nếu được đặt phía trên nội dung sáng và ngược lại.

Bạn luôn nên sử dụng thanh điều hướng bằng cử chỉ trong suốt.

Nên

Giữ cho thanh điều hướng bằng cử chỉ có màu trong suốt.

Không nên

Thêm nền vào thanh điều hướng bằng cử chỉ.

Chế độ nút

Sau khi nhắm đến Android 15 hoặc gọi enableEdgeToEdge trên Activity, hệ thống sẽ áp dụng một màn chắn mờ phía sau các thanh điều hướng bằng nút. Bạn có thể xoá màn chắn này bằng cách đặt Window.setNavigationBarContrastEnforced() thành false.

**Hình 11.** Điều chỉnh màu động, với một màn chắn trong suốt.

Bạn nên sử dụng thanh điều hướng bằng 3 nút trong suốt khi có thanh ứng dụng ở dưới cùng hoặc thanh điều hướng ứng dụng ở dưới cùng, hoặc khi giao diện người dùng không cuộn bên dưới thanh điều hướng bằng 3 nút. Để có thanh điều hướng trong suốt, hãy đặt Window.setNavigationBarContrastEnforced() thành false và đệm các thanh ứng dụng ở dưới cùng để vẽ bên dưới các thanh điều hướng của hệ thống, như trong Hình 7, 8 và 9. Hãy xem phần Bảo vệ thanh hệ thống để biết thêm thông tin.

Sử dụng thanh điều hướng bằng 3 nút trong suốt để cuộn nội dung. Để biết thêm về các điểm cần cân nhắc khi sử dụng thanh điều hướng trong suốt, hãy xem .

Bàn phím và điều hướng

**Hình 12.** Bàn phím ảo có thanh điều hướng.

Mỗi loại thao tác điều hướng sẽ phản ứng thích hợp với bàn phím ảo để cho phép người dùng thực hiện các thao tác như đóng hoặc thậm chí thay đổi loại bàn phím. Để đảm bảo quá trình chuyển đổi diễn ra suôn sẻ, đồng bộ hoá quá trình chuyển đổi của ứng dụng với bàn phím trượt lên và xuống từ cuối màn hình, hãy sử dụng WindowInsetsAnimationCompat.

Vết cắt trên màn hình

Vết cắt trên màn hình là một khu vực trên một số thiết bị, mở rộng vào bề mặt màn hình để cung cấp không gian cho các cảm biến mặt trước. Phần cắt màn hình có thể khác nhau tuỳ thuộc vào nhà sản xuất. Hãy cân nhắc cách phần cắt màn hình tương tác với nội dung, hướng và cạnh.

**Hình 13.** Ví dụ về phần cắt trên màn hình.

Chế độ hiển thị tối đa

**Hình 14.** Chế độ sống động hiển thị trải nghiệm toàn màn hình trên thiết bị di động hướng ngang.

Bạn có thể ẩn các thanh hệ thống khi cần trải nghiệm toàn màn hình, chẳng hạn như khi người dùng đang xem phim. Người dùng vẫn có thể nhấn để hiển thị các thanh hệ thống và điều hướng hoặc tương tác với các chế độ điều khiển hệ thống. Tìm hiểu thêm về cách thiết kế cho chế độ toàn màn hình hoặc đọc về cách ẩn các thanh hệ thống cho chế độ chìm.