Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Bạn có thể bật chế độ hiển thị tràn viền trong ứng dụng của mình bằng cách gọi enableEdgeToEdge.
Điều này là đủ cho hầu hết các ứng dụng. Hướng dẫn này mô tả cách bật chế độ hiển thị tràn viền nếu ứng dụng của bạn cần thực hiện việc này mà không dùng enableEdgeToEdge.
Khi hoạt động trong bố cục tràn viền, ứng dụng của bạn cần thay đổi màu của các thanh hệ thống để nội dung bên dưới có thể nhìn thấy. Sau khi ứng dụng của bạn thực hiện bước này, hệ thống sẽ xử lý mọi hoạt động bảo vệ trực quan của giao diện người dùng ở chế độ thao tác bằng cử chỉ và ở chế độ nút.
Chế độ thao tác 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 sẽ thay đổi màu dựa trên nội dung phía sau các thanh đó. Trong ví dụ sau, phần điều khiển trong thanh điều hướng sẽ chuyển sang màu tối khi nằm trên nội dung sáng và chuyển sang màu sáng khi nằm trên nội dung tối.
Hình 1. Thay đổi màu sắc ở chế độ thao tác bằng cử chỉ.
Chế độ nút: hệ thống sẽ áp dụng một lớp phủ mờ phía sau các thanh hệ thống (đối với API cấp 29 trở lên) hoặc một thanh hệ thống trong suốt (đối với API cấp 28 trở xuống).
Hình 2. Màn nền mờ phía sau các thanh hệ thống.
Màu nội dung trên thanh trạng thái: kiểm soát màu của nội dung trên thanh trạng thái, chẳng hạn như thời gian và biểu tượng.
Hình 3. Màu nội dung của thanh trạng thái.
Bạn có thể chỉnh sửa tệp themes.xml để đặt màu cho thanh điều hướng và (không bắt buộc) đặt thanh trạng thái thành trong suốt và màu nội dung thanh trạng thái thành màu tối.
Bạn có thể sử dụng trực tiếp API WindowInsetsController, nhưng bạn nên sử dụng WindowInsetsControllerCompat của Thư viện hỗ trợ khi có thể. Bạn có thể dùng API WindowInsetsControllerCompat thay vì theme.xml để kiểm soát màu nội dung của thanh trạng thái. Để làm như vậy, hãy sử dụng hàm setAppearanceLightNavigationBars(), truyền true để thay đổi màu nền trước của thành phần điều hướng thành màu sáng hoặc false để quay lại màu mặc định.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-27 UTC."],[],[],null,["You can enable the edge-to-edge display in your app by calling\n[`enableEdgeToEdge`](/reference/androidx/activity/ComponentActivity#(androidx.activity.ComponentActivity).enableEdgeToEdge(androidx.activity.SystemBarStyle,androidx.activity.SystemBarStyle)).\nThis should be sufficient for most apps. This guide describes how to enable\nedge-to-edge if your app needs to do so without using `enableEdgeToEdge`.\n\nLay out your app in full screen\n\nUse [`WindowCompat.setDecorFitsSystemWindows(window,\nfalse)`](/reference/androidx/core/view/WindowCompat#setDecorFitsSystemWindows(android.view.Window,%20boolean))\nto lay out your app behind the system bars, as shown in the following code\nexample: \n\nKotlin \n\n```kotlin\noverride fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n WindowCompat.setDecorFitsSystemWindows(window, false)\n}\n```\n\nJava \n\n```java\n@Override\npublic void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n WindowCompat.setDecorFitsSystemWindows(getWindow(), false);\n}\n```\n\nChange the color of the system bars\n\nWhen operating in an edge-to-edge layout, your app needs to change the colors of\nthe system bars to let the content underneath be visible. After your app\nperforms this step, the system handles all visual protection of the user\ninterface in gesture navigation mode and in button mode.\n\n- **Gesture navigation mode:** the system applies dynamic color adaptation in which the contents of the system bars change color based on the content behind them. In the following example, the handle in the navigation bar changes to a dark color when it's above light content and to a light color when it's above dark content.\n\n**Figure 1.** Color changes in gesture navigation mode.\n\n- **Button mode:** the system applies a translucent [scrim](https://m2.material.io/design/environment/surfaces.html#attributes) behind the system bars (for API level 29 or later) or a transparent system bar (for API level 28 or earlier).\n\n**Figure 2.** Translucent scrim behind system bars.\n\n- **Status bar content color:** controls the color of status bar content, such as the time and icons.\n\n**Figure 3.** Status bar content color.\n\nYou can edit the `themes.xml` file to set the color of the navigation bar and,\noptionally, to set the status bar as transparent and status bar content color as\ndark. \n\n \u003c!-- values-v29/themes.xml --\u003e\n \u003cstyle name=\"Theme.MyApp\"\u003e\n \u003citem name=\"android:navigationBarColor\"\u003e\n @android:color/transparent\n \u003c/item\u003e\n\n \u003c!-- Optional: set to transparent if your app is drawing behind the status bar. --\u003e\n \u003citem name=\"android:statusBarColor\"\u003e\n @android:color/transparent\n \u003c/item\u003e\n\n \u003c!-- Optional: set for a light status bar with dark content. --\u003e\n \u003citem name=\"android:windowLightStatusBar\"\u003e\n true\n \u003c/item\u003e\n \u003c/style\u003e\n\n| **Note:** If you prefer to disable automatic content protection on Android 10 (API level 29) or later, set [`android:enforceNavigationBarContrast`](/reference/android/view/Window#isNavigationBarContrastEnforced()), [`android:enforceStatusBarContrast`](/reference/android/view/Window#isStatusBarContrastEnforced()), or both to `false` in your theme.\n\nYou can use the\n[`WindowInsetsController`](/reference/android/view/WindowInsetsController) API\ndirectly, but we strongly recommend using the Support Library\n[`WindowInsetsControllerCompat`](/reference/androidx/core/view/WindowInsetsControllerCompat)\nwhere possible. You can use the `WindowInsetsControllerCompat` API instead of\n`theme.xml` to control the status bar's content color. To do so, use the\n[`setAppearanceLightNavigationBars()`](/reference/androidx/core/view/WindowInsetsControllerCompat#setAppearanceLightNavigationBars(boolean))\nfunction, passing in `true` to change the foreground color of the navigation to\na light color or `false` to revert to the default color. \n\nKotlin \n\n```kotlin\nval windowInsetsController =\n ViewCompat.getWindowInsetsController(window.decorView)\n\nwindowInsetsController?.isAppearanceLightNavigationBars = true\n```\n\nJava \n\n```java\nWindowInsetsControllerCompat windowInsetsController =\n ViewCompat.getWindowInsetsController(getWindow().getDecorView());\nif (windowInsetsController == null) {\n return;\n}\n\nwindowInsetsController.setAppearanceLightNavigationBars(true);\n```"]]