Màn hình tràn viền cho phép ứng dụng vẽ giao diện người dùng phía sau các thanh hệ thống (thanh trạng thái, thanh chú thích và thanh điều hướng) để mang đến trải nghiệm sống động hơn cho người dùng. Nếu bạn nhắm đến các thiết bị chạy Android 15 (cấp độ API 35) trở lên, thì theo mặc định, chế độ hiển thị tràn viền sẽ được thực thi.
Để hiển thị nội dung tràn viền một cách chính xác trên mọi phiên bản Android, hãy làm theo các bước thiết lập sau. Nếu không thực hiện các bước này, ứng dụng của bạn có thể vẽ các màu đồng nhất phía sau thanh hệ thống hoặc không làm cho nội dung của ứng dụng chuyển động đồng bộ với các hiệu ứng chuyển đổi bàn phím ảo (IME).
1. Cho phép hiển thị tràn viền
Để bật chế độ tràn viền trên các phiên bản Android trước, hãy gọi enableEdgeToEdge() trong phương thức Activity.onCreate():
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
...
}
Theo mặc định, enableEdgeToEdge() sẽ làm cho các thanh hệ thống trong suốt, ngoại trừ ở chế độ thao tác bằng 3 nút. Trong chế độ này, enableEdgeToEdge() sẽ áp dụng một lớp phủ mờ cho thanh điều hướng để tăng độ tương phản. Màu của các biểu tượng hệ thống và lớp phủ sẽ điều chỉnh theo giao diện sáng hoặc tối của hệ thống.
2. Định cấu hình windowSoftInputMode
Đặt android:windowSoftInputMode="adjustResize" trong mục AndroidManifest.xml của Hoạt động. Chế độ cài đặt này cho phép ứng dụng của bạn nhận phần lồng ghép IME, cho phép bạn điều chỉnh bố cục bằng khoảng đệm khi bàn phím ảo xuất hiện hoặc biến mất.
<!-- In your AndroidManifest.xml file: -->
<activity
android:name=".ui.MainActivity"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:theme="@style/Theme.MyApplication"
android:exported="true">
...
</activity>
3. Xử lý phần chồng chéo bằng phần lồng ghép
Sau khi bạn bật chế độ tràn viền, một số nội dung và thành phần giao diện người dùng của ứng dụng có thể vẽ phía sau các thanh hệ thống. Để ngăn các phần tử quan trọng hoặc có tính tương tác bị thanh hệ thống che khuất hoặc chồng lên các cử chỉ hệ thống, bạn cần xử lý phần lồng ghép.
Phần lồng ghép mô tả các phần trên màn hình giao cắt với giao diện người dùng hệ thống hoặc cử chỉ hệ thống. Các loại phần lồng ghép chính cần xem xét cho màn hình tràn viền là:
- Phần lồng ghép thanh hệ thống: Thể hiện những khu vực nơi thanh hệ thống xuất hiện. Hãy dùng những giá trị này để tránh giao diện người dùng bị thanh hệ thống che khuất.
- Phần lồng ghép vết cắt trên màn hình: Thể hiện những khu vực có vết cắt vật lý (chẳng hạn như vết cắt camera) trên màn hình thiết bị.
Trong Compose, bạn có thể xử lý phần lồng ghép bằng cách sử dụng thước kẻ, đối tượng sửa đổi khoảng đệm hoặc đối tượng sửa đổi kích thước phần lồng ghép. Hãy xem bài viết Giới thiệu về phần lồng ghép cửa sổ để biết hướng dẫn chi tiết.
Chủ đề nâng cao
Hãy cân nhắc những điều sau đây cho các trường hợp sử dụng tràn viền nâng cao hơn.
Chế độ hiển thị tối đa
Một số nội dung, chẳng hạn như video hoặc bản đồ, sẽ có lợi khi được hiển thị ở chế độ hoàn toàn sống động, trong đó các thanh hệ thống bị ẩn. Bạn có thể ẩn thanh hệ thống bằng cách dùng WindowInsetsControllerCompat:
val windowInsetsController =
WindowCompat.getInsetsController(window, window.decorView)
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,
Màu sắc và biểu tượng trên thanh hệ thống
Khi hiển thị tràn viền, nền của ứng dụng có thể xuất hiện phía sau các thanh hệ thống, vì vậy, bạn có thể cần điều chỉnh màu biểu tượng của thanh hệ thống để có độ tương phản tốt hơn.
Để thay đổi biểu tượng trên thanh trạng thái thành sáng hoặc tối, hãy làm như sau: WindowInsetsControllerCompat
// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = true
// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
Bảo vệ thanh hệ thống
Mặc dù enableEdgeToEdge() cung cấp các thanh hệ thống trong suốt hoặc bán trong suốt theo mặc định, nhưng bạn có thể cần tuỳ chỉnh thanh này. Tham khảo hướng dẫn thiết kế thanh hệ thống Android và hướng dẫn thiết kế tràn viền để quyết định thời điểm sử dụng thanh trong suốt so với thanh mờ.
Để thanh thao tác bằng 3 nút hoàn toàn trong suốt thay vì trong mờ, bạn có thể tắt chế độ thực thi độ tương phản:
window.isNavigationBarContrastEnforced = false
Để biết thêm thông tin, hãy xem bài viết Giới thiệu về tính năng bảo vệ thanh hệ thống.
Hộp thoại
Để hiển thị hộp thoại toàn màn hình tràn viền, hãy gọi WindowCompat.enableEdgeToEdge trong phương thức onStart() của hộp thoại:
class MyAlertDialogFragment : DialogFragment() {
override fun onStart(){
super.onStart()
dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
}
...
}