Lay out your app within window insets

Stay organized with collections Save and categorize content based on your preferences.
Figure 1: The status bar and navigation bar (collectively called the system bars)

By default, apps are laid out below the status bar at the top, and above the navigation bar at the bottom. Together, the status bar and the navigation bar are called the system bars. The system bars are areas that are generally dedicated to the display of notifications, communication of device status, and device navigation. However, your app can also be configured to display content in these areas.

The overlaps between these areas where system UI is displayed and your app is one example of window insets, which represent the parts of your screen where your app can intersect with system UI. Intersecting with these parts of the UI can mean simply being displayed above the content, but it can also inform your app about system gestures, too.

The following types of window insets are available.

  • Apps can opt in to expand their window to extend across the entire screen and draw their content edge-to-edge behind the system bars.

  • Apps that display content such as movies or images can temporarily hide the system bars for a more immersive experience. You should carefully consider your users' needs and expectations before modifying the system bars, since they give users a standard way of navigating a device and viewing its status.

  • A display cutout is an area on some devices that extends into the display surface to provide space for sensors on the front of the device. Apps can support display cutouts by querying their positions so that no important content overlaps the cutout area.

  • One common example where window insets are dynamically updated is the keyboard transition. Apps can observe the current keyboard state, programmatically toggle the states, and also support animations for window insets and make app content animate seamlessly between keyboard transitions.