[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-08-06 (世界標準時間)。"],[],[],null,["# Android system bars\n\nTogether, the status bar, caption bar, and navigation bar are called the\n*system bars*. They display important information such as battery level, the\ntime, and notification alerts, and provide direct device interaction from\nanywhere.\n\nIt's critical to take the prominence of system bars into account, whether you're\ndesigning UI for interactions with the Android OS, input methods, or other\ndevice capabilities.\n**Figure 1.** Images behind system bars. **Note:** System bars and navigation can vary by device manufacturer. Older devices may have hardware navigation buttons instead of software buttons.\n\nTakeaways\n---------\n\n- Include system bars when designing your app. Account for UI safe zones,\n system interactions, input methods, display cutouts, status bars, caption\n bars, navigation bars, and other device capabilities.\n\n- Keep the system status and navigation bars transparent or translucent and\n draw content behind these bars to go edge-to-edge.\n\nStatus bar\n----------\n\nOn Android, the status bar contains notification icons and system icons. The\nuser interacts with the status bar by pulling it down to access the notification\nshade. Status bar styles can be transparent or translucent.\n**Figure 2.** Status bar region highlighted above top app bar.\n\n### Status bar icons\n\nStatus bar icons can appear differently depending on the context, time of day,\nuser-set preferences or themes, and other parameters. For more information, see\n[System bar icons](/develop/ui/compose/layouts/insets#system-bar-icons).\n**Figure 3.** Status bar icons in light and dark theme.\n\nWhen a notification arrives, an icon usually appears in the status bar. This\nsignals to the user that there's something to see in the notification drawer.\nThis can be your app icon or symbol to represent the channel. See\n[Notifications design](/design/ui/mobile/guides/home-screen/notifications).\n**Figure 4.** Notification icon in the status bar.\n\n### Set the status bar style\n\nMake the status bar transparent or translucent to ensure your app content spans\nthe entire screen. Then, set the style of your system bar icons so that the\nicons have proper contrast.\n\nEdge-to-edge is enforced on Android 15 making the status bar transparent by\ndefault. Call `enableEdgeToEdge()` for backward compatibility.\n\nIn the following left-side image, the status bar is transparent and the\n`TopAppBar`'s green background draws behind the status bar.\n**Figure 5.** Do go edge-to-edge to enhance your content. Don't have opaque system bars.\n\nTransparent status bars are ideal when the UI doesn't appear underneath the\nstatus bar or an image draws underneath the status bar. Translucent status bars\nare ideal when the UI scrolls underneath the status bar. For more on gradient\nprotection see [Edge-to-edge design](/design/ui/mobile/guides/layout-and-content/edge-to-edge).\n**Figure 6.** An edge-to-edge app with dual tone gradient protection spanning two panes behind the system status bar.\n\nNavigation bar\n--------------\n\nAndroid lets users control navigation using back, home, and overview controls:\n\n- Back returns directly back to the previous view.\n- Home transitions out of the app and to the device's home screen.\n- Overview shows active apps and recent undismissed apps.\n\nUsers can choose from various navigation bar configurations including gesture\nnavigation (recommended) and three-button navigation. To deliver the best\nexperience, account for multiple types of navigation.\n\n### Gesture navigation\n\nGesture navigation doesn't use buttons for back, home, and\noverview, instead it shows a single gesture handle for affordance. Users\ninteract by swiping from the left or right edge of the screen to go back and up\nfrom the bottom to go home. Swiping up and holding opens the overview.\n\nGesture navigation is a more scalable navigation pattern for designing across\nmobile and larger screens. To provide the best user experience, account for\ngesture navigation by doing the following:\n\n- Supporting edge-to-edge content.\n- Avoid adding interactions or touch targets under gesture navigation insets.\n\nFor more information, see [Add support for gesture navigation](/develop/ui/views/touch-and-input/gestures/gesturenav).\n**Figure 7.** Gesture handle navigation bar.\n\n### Three-button navigation\n\nThree-button navigation provides three buttons for back, home, and overview.\n**Figure 8.** Three-button navigation bar.\n\n### Other navigation bar variations\n\nDepending on Android version and device other navigation bar configurations may\nbe available to your users. Two-button navigation, for example, provides two\nbuttons for home and back.\n**Figure 9.** Two-button navigation bar.\n\n#### Navigation bar icons\n\nNavigation bar icons can also appear differently depending on user-set\npreferences or themes. For more information, see [System bar icons](/develop/ui/compose/layouts/insets#system-bar-icons).\n\n### Set a navigation bar style\n\nAndroid handles visual protection of the user interface in gesture navigation\nmode and in the button modes. The system applies dynamic color adaptation, in\nwhich the contents of the system bars change color based on the content behind\nthem.\n\n#### Gesture navigation mode\n\nAfter targeting Android 15 or calling `enableEdgeToEdge` on the `Activity`, the\nsystem draws a transparent gesture navigation bar and applies dynamic color\nadaptation. In the following example, the handle in the navigation bar changes\nto a dark color if it's placed above light content, and vice-versa.\n**Figure 10.** Dynamic color adaptation.\n\nTransparent gesture navigation bars are always recommended. \ncheck_circle\n\n### Do\n\nKeep the gesture navigation bar transparent. \ncancel\n\n### Don't\n\nAdd a background to the gesture navigation bar.\n\n#### Button modes\n\nAfter targeting Android 15 or calling `enableEdgeToEdge` on the `Activity`, the\nsystem applies a translucent scrim behind button navigation bars, which you can\nremove by setting `Window.setNavigationBarContrastEnforced()` to false.\n**Figure 11.** Dynamic color adaptation, with a transparent scrim.\n\nWe recommend transparent three button navigation bars when there is a bottom\napp bar or bottom app navigation bar, or when the UI doesn't scroll underneath\nthe three button navigation bar. To get a transparent navigation bar, set\n`Window.setNavigationBarContrastEnforced()` to false and pad bottom app bars to\ndraw underneath system navigation bars, as seen in Figure 7, 8, and 9. See\n[System bar protection](/develop/ui/compose/layouts/insets#system_bar_protection) for more information.\n\nUse a translucent three-button navigation for scrolling content. For more on\ntranslucent navigation bar considerations, see [Edge-to-edge design](/design/ui/mobile/guides/layout-and-content/edge-to-edge).\n\n### Keyboard and navigation\n\n**Figure 12.** On-screen keyboard with navigation bars.\n\nEach navigation type reacts appropriately to the [on-screen keyboard](/develop/ui/views/layout/sw-keyboard) to\nallow the user to perform actions such as dismissing or even changing the\nkeyboard type. To ensure a smooth transition that synchronizes the transition of\nthe app with the keyboard sliding up and down from the bottom of the screen, use\n[`WindowInsetsAnimationCompat`](/reference/kotlin/androidx/core/view/WindowInsetsAnimationCompat).\n\nDisplay cutouts\n---------------\n\nA display cutout is an area on some devices that extends into the display\nsurface to provide space for front-facing sensors. Display cutouts can vary\ndepending on the manufacturer. Consider how display cutouts will interact with\ncontent, orientation, and edge-to-edge.\n**Figure 13.** Examples of display cutouts.\n\nImmersive mode\n--------------\n\n**Figure 14.** Immersive mode showing a full-screen experience on a landscape-oriented mobile device.\n\nYou can hide system bars when you need a full-screen experience, for example\nwhen the user is watching a movie. The user should still be able to tap to\nreveal system bars and navigate or interact with system controls. Learn more\nabout designing for [full screen modes](/design/ui/mobile/guides/layout-and-content/immersive-content), or read about how to\n[hide the system bars for immersive mode](/develop/ui/views/layout/immersive)."]]