![](https://developer.android.com/static/images/design/ui/mobile/system-bars-hero.png)

Together, the status bar, caption bar, and navigation bar are called the
*system bars*. They display important information such as battery level, the
time, and notification alerts, and provide direct device interaction from
anywhere.

It's critical to take the prominence of system bars into account, whether you're
designing UI for interactions with the Android OS, input methods, or other
device capabilities.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-image-behind.png) **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.

## Takeaways

- Include system bars when designing your app. Account for UI safe zones,
  system interactions, input methods, display cutouts, status bars, caption
  bars, navigation bars, and other device capabilities.

- Keep the system status and navigation bars transparent or translucent and
  draw content behind these bars to go edge-to-edge.

## Status bar

On Android, the status bar contains notification icons and system icons. The
user interacts with the status bar by pulling it down to access the notification
shade. Status bar styles can be transparent or translucent.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-status-bar-region-highlighted.png) **Figure 2.** Status bar region highlighted above top app bar.

### Status bar icons

Status bar icons can appear differently depending on the context, time of day,
user-set preferences or themes, and other parameters. For more information, see
[System bar icons](https://developer.android.com/develop/ui/compose/layouts/insets#system-bar-icons).
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-status-bar-light-dark-theme.png) **Figure 3.** Status bar icons in light and dark theme.

When a notification arrives, an icon usually appears in the status bar. This
signals to the user that there's something to see in the notification drawer.
This can be your app icon or symbol to represent the channel. See
[Notifications design](https://developer.android.com/design/ui/mobile/guides/home-screen/notifications).
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-notification-icon.png) **Figure 4.** Notification icon in the status bar.

### Set the status bar style

Make the status bar transparent or translucent to ensure your app content spans
the entire screen. Then, set the style of your system bar icons so that the
icons have proper contrast.

Edge-to-edge is enforced on Android 15 making the status bar transparent by
default. Call `enableEdgeToEdge()` for backward compatibility.

In the following left-side image, the status bar is transparent and the
`TopAppBar`'s green background draws behind the status bar.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-do-and-dont.png) **Figure 5.** Do go edge-to-edge to enhance your content. Don't have opaque system bars.

Transparent status bars are ideal when the UI doesn't appear underneath the
status bar or an image draws underneath the status bar. Translucent status bars
are ideal when the UI scrolls underneath the status bar. For more on gradient
protection see [Edge-to-edge design](https://developer.android.com/design/ui/mobile/guides/layout-and-content/edge-to-edge).
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-gradient-protection.png) **Figure 6.** An edge-to-edge app with dual tone gradient protection spanning two panes behind the system status bar.

## Navigation bar

Android lets users control navigation using back, home, and overview controls:

- Back returns directly back to the previous view.
- Home transitions out of the app and to the device's home screen.
- Overview shows active apps and recent undismissed apps.

Users can choose from various navigation bar configurations including gesture
navigation (recommended) and three-button navigation. To deliver the best
experience, account for multiple types of navigation.

### Gesture navigation

Gesture navigation doesn't use buttons for back, home, and
overview, instead it shows a single gesture handle for affordance. Users
interact by swiping from the left or right edge of the screen to go back and up
from the bottom to go home. Swiping up and holding opens the overview.

Gesture navigation is a more scalable navigation pattern for designing across
mobile and larger screens. To provide the best user experience, account for
gesture navigation by doing the following:

- Supporting edge-to-edge content.
- Avoid adding interactions or touch targets under gesture navigation insets.

For more information, see [Add support for gesture navigation](https://developer.android.com/develop/ui/views/touch-and-input/gestures/gesturenav).
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-gesture-handle.png) **Figure 7.** Gesture handle navigation bar.

### Three-button navigation

Three-button navigation provides three buttons for back, home, and overview.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-3-button-nav.png) **Figure 8.** Three-button navigation bar.

### Other navigation bar variations

Depending on Android version and device other navigation bar configurations may
be available to your users. Two-button navigation, for example, provides two
buttons for home and back.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-2-button-nav.png) **Figure 9.** Two-button navigation bar.

#### Navigation bar icons

Navigation bar icons can also appear differently depending on user-set
preferences or themes. For more information, see [System bar icons](https://developer.android.com/develop/ui/compose/layouts/insets#system-bar-icons).

### Set a navigation bar style

Android handles visual protection of the user interface in gesture navigation
mode and in the button modes. The system applies dynamic color adaptation, in
which the contents of the system bars change color based on the content behind
them.

#### Gesture navigation mode

After targeting Android 15 or calling `enableEdgeToEdge` on the `Activity`, the
system draws a transparent gesture navigation bar and applies dynamic color
adaptation. In the following example, the handle in the navigation bar changes
to a dark color if it's placed above light content, and vice-versa.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-dynamic-color-adaptation.png) **Figure 10.** Dynamic color adaptation.

Transparent gesture navigation bars are always recommended.  
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-do.png)  
check_circle

### Do

Keep the gesture navigation bar transparent.  
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-dont.png)  
cancel

### Don't

Add a background to the gesture navigation bar.

#### Button modes

After targeting Android 15 or calling `enableEdgeToEdge` on the `Activity`, the
system applies a translucent scrim behind button navigation bars, which you can
remove by setting `Window.setNavigationBarContrastEnforced()` to false.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-translucent-scrim.png) **Figure 11.** Dynamic color adaptation, with a transparent scrim.

We recommend transparent three button navigation bars when there is a bottom
app bar or bottom app navigation bar, or when the UI doesn't scroll underneath
the three button navigation bar. To get a transparent navigation bar, set
`Window.setNavigationBarContrastEnforced()` to false and pad bottom app bars to
draw underneath system navigation bars, as seen in Figure 7, 8, and 9. See
[System bar protection](https://developer.android.com/develop/ui/compose/layouts/insets#system_bar_protection) for more information.

Use a translucent three-button navigation for scrolling content. For more on
translucent navigation bar considerations, see [Edge-to-edge design](https://developer.android.com/design/ui/mobile/guides/layout-and-content/edge-to-edge).

### Keyboard and navigation

![](https://developer.android.com/static/images/design/ui/mobile/system-bars-on-screen-keyboard.png) **Figure 12.** On-screen keyboard with navigation bars.

Each navigation type reacts appropriately to the [on-screen keyboard](https://developer.android.com/develop/ui/views/layout/sw-keyboard) to
allow the user to perform actions such as dismissing or even changing the
keyboard type. To ensure a smooth transition that synchronizes the transition of
the app with the keyboard sliding up and down from the bottom of the screen, use
[`WindowInsetsAnimationCompat`](https://developer.android.com/reference/kotlin/androidx/core/view/WindowInsetsAnimationCompat).

## Display cutouts

A display cutout is an area on some devices that extends into the display
surface to provide space for front-facing sensors. Display cutouts can vary
depending on the manufacturer. Consider how display cutouts will interact with
content, orientation, and edge-to-edge.
![](https://developer.android.com/static/images/design/ui/mobile/system-bars-display-cutouts.png) **Figure 13.** Examples of display cutouts.

## Immersive mode

![](https://developer.android.com/static/images/design/ui/mobile/system-bars-immersive-mode.png) **Figure 14.** Immersive mode showing a full-screen experience on a landscape-oriented mobile device.

You can hide system bars when you need a full-screen experience, for example
when the user is watching a movie. The user should still be able to tap to
reveal system bars and navigate or interact with system controls. Learn more
about designing for [full screen modes](https://developer.android.com/design/ui/mobile/guides/layout-and-content/immersive-content), or read about how to
[hide the system bars for immersive mode](https://developer.android.com/develop/ui/views/layout/immersive).