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

  • Tránh thêm cử chỉ nhấn hoặc mục tiêu kéo trong phần lồng ghép cử chỉ; các cử chỉ này sẽ xung đột với thao tác điều hướng từ cạnh này sang cạnh kia và cử chỉ.

    Hình 2: Phần lồng ghép cử chỉ hệ thống. Tránh đặt mục tiêu nhấn vào các khu vực này

Vẽ nội dung phía sau các thanh hệ thống

Tính năng tràn viền cho phép Android vẽ giao diện người dùng bên dưới các thanh hệ thống để mang lại trải nghiệm sống động, đây là một yêu cầu phổ biến của người dùng.

Ứng dụng có thể giải quyết vấn đề chồng chéo nội dung bằng cách phản ứng với phần lồng ghép. Phần lồng ghép mô tả khoảng đệm cần thiết cho nội dung của ứng dụng để tránh chồng chéo với các phần của giao diện người dùng Android OS, chẳng hạn như thanh trạng thái, thanh chú thích, thanh điều hướng; hoặc với các tính năng của thiết bị thực như vết cắt trên màn hình. Đọc về cách hỗ trợ chế độ tràn viền và xử lý phần lồng ghép trong Compose và thành phần hiển thị.

Hãy lưu ý các loại phần lồng ghép sau đây khi thiết kế cho các trường hợp sử dụng từ cạnh này sang cạnh kia:

  • Phần lồng ghép thanh hệ thống áp dụng cho giao diện người dùng vừa có thể nhấn vừa không bị thanh hệ thống che khuất.
  • Phần lồng ghép cử chỉ của hệ thống áp dụng cho các khu vực điều hướng bằng cử chỉ mà hệ thống sử dụng và có mức độ ưu tiên cao hơn ứng dụng của bạn.
  • Vùng cắt màn hình áp dụng cho các khu vực thiết bị mở rộng vào bề mặt màn hình, chẳng hạn như vùng cắt camera.

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.

Hình 3: Khu vực thanh trạng thái được làm nổi bật trên thanh ứng dụng trên cùng

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. Bạn có thể đặt kiểu biểu tượng thanh trạng thái như trong các ví dụ sau.

Hình 4: Biểu tượng thanh trạng thái ở giao diện sáng và tối.

Đảm bảo rằng nội dung ứng dụng của bạn trải dài toàn bộ màn hình. Giữ cho thanh trạng thái và thanh điều hướng trong suốt hoặc mờ với nội dung tràn viền như trong ví dụ sau.

Hình 5: Một ứng dụng tràn viền có các thanh hệ thống trong suốt là lựa chọn lý tưởng để nội dung của bạn tỏa sáng bằng cách sử dụng nhiều không gian màn hình nhất.

Chế độ tràn viền được thực thi trên Android 15 để các thanh hệ thống có màu trong suốt hoặc trong mờ theo mặc định. Trên các phiên bản Android cũ, đừng để thanh hệ thống mờ.

Hình 6: 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ờ.

Khi có thông báo, một biểu tượng thường xuất hiện trong thanh trạng thái. Thao tác này sẽ 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 hoặc biểu trưng ứng dụng của bạn để đại diện cho kênh. Xem phần Thiết kế thông báo.

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

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

Đảm bảo thanh trạng thái có màu trong suốt trên tất cả các phiên bản bằng cách gọi enableEdgeToEdge(). Hãy nhớ cập nhật màu sắc của biểu tượng thanh trạng thái để tạo độ tương phản. Ví dụ: để tạo biểu tượng tối:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

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 biết những ứng dụng đang mở và đã mở gần đây.

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.

Di chuyển bằng cử chỉ

Được ra mắt trong Android 10 (API cấp 29), thao tác điều hướng bằng cử chỉ là loại thao tác điều hướng được đề xuất, mặc dù bạn không thể ghi đè lựa chọn ưu tiên của người dùng. Thao tác di chuyển bằng cử chỉ không sử dụng các nút quay lại, màn hình chính và tổng quan, thay vào đó 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 cạnh phải của màn hình để quay lại và vuốt từ dưới lên để trở về 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 thiết bị 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 thao tác điều hướng bằng cử chỉ bằng cách:

  • 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ỉ.

Đọc về cách triển khai thao tác điều hướng bằng cử chỉ.

Hình 8: Thanh điều hướng xử lý cử chỉ

Thao tác bằng 3 nút

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 9: Thanh điều hướng ba nút

Các biến thể khác của thanh điều hướng

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 10: Thanh điều hướng hai nút

Đặt kiểu điều hướng

Đảm bảo thanh điều hướng trong suốt hoặc mờ trên tất cả các phiên bản bằng cách gọi enableEdgeToEdge().

Trên các thiết bị chạy Android 15 trở lên hoặc sau khi gọi enableEdgeToEdge(), thao tác bằng cử chỉ sẽ có chế độ trong suốt theo mặc định. Theo mặc định, chế độ thao tác bằng 3 nút có màu trong mờ hoặc không trong suốt nếu nằm bên trong thanh tác vụ trên thiết bị màn hình lớn.

Nếu ứng dụng của bạn có thanh ứng dụng dưới cùng, hãy đặt Window.setNavigationBarContrastEnforced() thành false để đảm bảo thanh ứng dụng dưới cùng có thể vẽ bên dưới thanh điều hướng của hệ thống mà không cần áp dụng màn chắn mờ trong thao tác điều hướng bằng 3 nút.

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.

  • Chế độ điều hướng bằng cử chỉ: 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 thay đổi màu sắc dựa trên nội dung phía sau các thanh đó. 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.

    Hình 11: Điều chỉnh màu động

  • Chế độ nút: Hệ thống á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 12: Điều chỉnh màu động, trong đó các thanh hệ thống thay đổi màu dựa trên nội dung phía sau các thanh đó

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

Hình 13: 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 bàn phím diễn ra suôn sẻ, hãy sử dụng WindowInsetsAnimationCompat để đả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.

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ỳ theo nhà sản xuất.

Hình 14: Ví dụ về phần cắt màn hình

Phần cắt màn hình có thể ảnh hưởng đến giao diện của giao diện người dùng. Khi nhắm đến Android 15 (API cấp 35) trở lên, theo mặc định, các ứng dụng sẽ vẽ vào vùng cắt màn hình. Ứng dụng phải xử lý các phần lồng ghép màn hình cắt để giao diện người dùng quan trọng không vẽ bên dưới phần cắt màn hình. Đọc về cách hỗ trợ phần cắt trên màn hình.

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

Hình 15: 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à giao diện người dùng nhằm đ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 các thanh hệ thống cho chế độ chìm.