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à thanh hệ thống. Chúng 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ị ở mọi nơi.

Bạn cần phải tính đến sự nổi bật 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 chức 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. 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, vết cắt trên 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 ở trạng thái trong suốt hoặc bán trong suốt và vẽ nội dung phía sau các thanh này để hiển thị 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 này 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

Biểu tượng trên thanh trạng thái có thể xuất hiện theo nhiều cách tuỳ thuộc vào bối cảnh, thời gian trong ngày, các lựa chọn ưu tiê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 trên thanh hệ thống.

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

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

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

Làm cho thanh trạng thái trong suốt hoặc bán trong suốt để đảm bảo nội dung ứng dụng của bạn trải rộng 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, giúp thanh trạng thái có màu 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 ả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 xuất hiện phía sau thanh trạng thái.

**Hình 5.** Hãy hiển thị nội dung tràn viền để nâng cao chất lượng nội dung. Không có các thanh hệ thống không trong suốt.

Thanh trạng thái trong suốt là lựa chọn 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 vẽ bên dưới thanh trạng thái. Thanh trạng thái mờ 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 thông tin về tính năng bảo vệ 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 trải dài trên 2 ngăn phía sau thanh trạng thái hệ thống.

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

Nút quay lại sẽ đưa bạn trở lại chế độ xem trước đó.
Thao tác nhấn nút Trang chủ sẽ đưa bạn ra khỏi ứng dụng và chuyển đến màn hình chính của thiết bị.
Chế độ xem 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 bị đó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 chế độ thao tác bằng cử chỉ (nên dùng) và chế độ thao tác 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.

Chế độ thao tác bằng cử chỉ không dùng các nút quay lại, trang chủ và tổng quan, mà thay vào đó, chế độ này cho thấy một tay cầm cử chỉ duy nhất để người dùng thao tác. Người dùng tương tác bằng cách vuốt từ cạnh trái hoặc cạnh phải của màn hình để quay lại và vuốt lên từ dưới cùng để chuyển về màn hình chính. Vuốt lên và giữ để mở chế độ tổng quan.

Thao tác bằng cử chỉ là một mẫu điều hướng có khả năng mở rộng hơn để thiết kế trên các 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 chế độ thao tác 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 cảm ứng trong phần lồng ghép thao tác bằng cử chỉ.

Để biết thêm thông tin, hãy xem bài viết Thêm chế độ hỗ trợ cho thao tác bằng cử chỉ.

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

Chế độ thao tác bằng 3 nút có 3 nút là quay lại, trang chủ 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 khác của thanh điều hướng. Ví dụ: chế độ thao tác bằng 2 nút cung cấp 2 nút cho thao tác về trang chủ và quay lại.

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

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

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

Android xử lý việc bảo vệ trực quan giao diện người dùng ở chế độ thao tác bằng cử chỉ và ở chế độ nút. Hệ thống áp dụng tính năng điều chỉnh màu linh hoạt, 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, phần điều khiển trong thanh điều hướng sẽ chuyển sang màu tối nếu được đặt phía trên nội dung sáng và ngược lại.

Bạn nên luôn sử dụng thanh thao tác bằng cử chỉ trong suốt.

Nên

Giữ cho thanh thao tác 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 lớp phủ mờ phía sau thanh điều hướng bằng nút. Bạn có thể xoá lớp phủ này bằng cách đặt Window.setNavigationBarContrastEnforced() thành false.

**Hình 11.** Thích ứng màu động, với một lớp phủ mờ trong suốt.

Bạn nên dùng thanh thao tác bằng 3 nút trong suốt khi có một 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 thao tác bằng 3 nút. Để có thanh điều hướng trong suốt, hãy đặt Window.setNavigationBarContrastEnforced() thành false và thêm khoảng đệm cho thanh ứng dụng dưới cùng để vẽ bên dưới thanh điều hướng 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 chế độ thao tác bằng 3 nút trong mờ cho nội dung có thể cuộn. Để biết thêm thông tin về những điểm cần cân nhắc đối với thanh điều hướng trong suốt, hãy xem bài viết Thiết kế tràn viền.

Bàn phím và chế độ thao tác

**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 vùng 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. Vết cắt trên 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 vết cắt trên màn hình sẽ tương tác với nội dung, hướng và chế độ tràn viền.

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

**Hình 14.** Chế độ sống động cho thấy trải nghiệm toàn màn hình trên thiết bị di động ở chế độ ngang.

Bạn có thể ẩn 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 các thanh hệ thống và điều hướng hoặc tương tác với các nút đ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 thanh hệ thống cho chế độ chìm.