Support display cutouts

Try the Compose way
Jetpack Compose is the recommended UI toolkit for Android. Learn how to work with display cutouts in Compose.
Display cutouts in Compose →

A display cutout is an area on some devices that extends into the display surface. It allows for an edge-to-edge experience while providing space for important sensors on the front of the device.

Android supports display cutouts on devices running Android 9 (API level 28) and higher. However, device manufacturers can also support display cutouts on devices running Android 8.1 or lower.

This document describes how to implement support for devices with cutouts, including how to work with the cutout area—that is, the edge-to-edge rectangle on the display surface that contains the cutout.

An image showing an example of top-center display cutout
Figure 1. 1 Display cutout.

Choose how your app handles cutout areas

If you don't want your content to overlap with a cutout area, it's generally sufficient to make sure your content doesn't overlap with the status bar and the navigation bar. If you're rendering into the cutout area, use WindowInsetsCompat.getDisplayCutout() to retrieve a DisplayCutout object that contains the safe insets and bounding box for each cutout. These APIs let you check whether your content overlaps with the cutout so that you can reposition if needed.

You can also determine whether content is laid out behind the cutout area. The layoutInDisplayCutoutMode window layout attribute controls how your content is drawn in the cutout area. You can set layoutInDisplayCutoutMode to one of the following values:

You can set the cutout mode either programmatically or by setting a style in your activity. The following example defines a style to apply the LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES attribute to the activity.

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

The following sections describe the different cutout modes in more detail.

Default behavior

By default, in portrait mode with no special flags set, the status bar on a device with a cutout is resized to be at least as tall as the cutout, and your content displays in the area below. In landscape or fullscreen mode, your app window is letterboxed so that none of your content displays in the cutout area.

Render content in short edge cutout areas

For some content, such as video, photos, maps, and games, rendering in the cutout area can be a great way to provide a more immersive, edge-to-edge experience for users. With LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, the content extends into the cutout area on the short edge of the display in both portrait and landscape, regardless of whether the system bars are hidden or visible. When using this mode, be sure that no important content overlaps with the cutout area.

The following image is an example of LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES for a device in portrait:

An image showing content rendering into the cutout area while in portrait mode
Figure 2. Content rendering into the cutout area while in portrait mode.

The following image is an example of LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES for a device in landscape:

An image showing content rendering into the cutout area while in landscape mode
Figure 3. Content rendering into the cutout area while in landscape mode.

In this mode, the window extends under cutouts on the short edge of the display in both portrait and landscape, regardless of whether the window is hiding the system bars.

A cutout in the corner is considered to be on the short edge:

An image showing a device with a corner cutout
Figure 4. A device with a corner cutout.

Never render content in the display cutout area

With LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER, the window is never allowed to overlap with the cutout area.

The following is an example of LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER in portrait:

An image showing the LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER for portrait
Figure 5. Example of LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER for portrait mode.

The following is an example of LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER in landscape mode:

An image showing the LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER for landscape
Figure 6. Example of LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER in landscape mode.

Best practices for display cutout support

When working with display cutouts, consider the following:

  • Be mindful of the placement of critical elements of the UI. Don't let the cutout area obscure any important text, controls, or other information.
  • Don't place or extend any interactive elements that require fine-touch recognition into the cutout area. Touch sensitivity might be lower in the cutout area.

  • Where possible, use WindowInsetsCompat to retrieve the status bar height and determine the appropriate padding to apply to your content. Avoid hardcoding the status bar height, as this can lead to overlapping or cut-off content.

    An image showing content cut at the top for improper insets setup
    Figure 7. Use WindowInsetsCompat to avoid overlapping or cutting off content.

  • Use View.getLocationInWindow() to determine how much window space your app is using. Don't assume the app is using the entire window, and don't use View.getLocationOnScreen().

  • Use shortEdges or never cutout modes if your app needs to transition into and out of immersive mode. Default cutout behavior can cause content in your app to render in the cutout area while the system bars are present, but not while in immersive mode. This results in the content moving up and down during transitions, as demonstrated in the following example.

    An image showing content moving up and down during transitions.
    Figure 8. Example of content moving up and down during transitions.

  • In immersive mode, be careful using window versus screen coordinates, since your app doesn't use the whole screen when letterboxed. Because of the letterbox, coordinates from the screen origin aren't the same as coordinates from the window origin. You can transform screen coordinates to the view's coordinates as needed by using getLocationOnScreen(). The following image shows how coordinates differ when content is letterboxed:

    An image showing window versus screen coordinates when content is letterboxed.
    Figure 9. Window versus screen coordinates when content is letterboxed.

  • When handling MotionEvent, use MotionEvent.getX() and MotionEvent.getY() to avoid similar coordinate issues. Don't use MotionEvent.getRawX() or MotionEvent.getRawY().

Test how your content renders

Test all of your app's screens and experiences. Test on devices with different types of cutouts, if possible. If you don't have a device with a cutout, you can simulate common cutout configurations on any device or emulator running Android 9 or higher by doing the following:

  1. Enable Developer options.
  2. In the Developer options screen, scroll down to the Drawing section and select Simulate a display with a cutout.

  3. Select the cutout type.

    An image showing how to simulate a display cutout in the emulator
    Figure 10. Developer options to test how your content renders.

Additional resources