Posted By Megan Potoski, Product Manager, Android System UI
Smartphones are rapidly moving towards smaller bezels as well as larger aspect ratios. On these devices, display cutouts are a pop way to hit an edge-to-edge sense spell providing infinite for of import sensors on the front end of the device. There are currently xvi cutout devices from eleven OEMs already released, including several Android P beta devices, amongst to a greater extent than on the way.
These hitting displays nowadays a swell chance for you lot to showcase your app. They also hateful it's to a greater extent than of import than ever to brand certain your app provides a consistently swell sense across devices amongst i or 2 display cutouts, every bit good every bit devices amongst 18:9 as well as larger aspect ratios.
Examples of cutout devices: Essential PH-1 (left) as well as Huawei P20 (right).
Make your app compatible amongst display cutouts
With many pop as well as upcoming devices featuring display cutouts, what tin you lot create to brand certain your app is cutout-ready?
The skillful tidings is, for the most part your app should piece of employment every bit intended fifty-fifty on a cutout device. By default, inwards portrait manner amongst no special flags set, the condition bar volition hold upwards resized to hold upwards at to the lowest degree every bit tall every bit the cutout as well as your content volition display inwards the window below. In landscape or fullscreen mode, your app window volition hold upwards letterboxed therefore that none of your content is displayed inwards the cutout area.
However, in that place are a few areas where your app could get got issues on cutout devices.
- Watch out for whatsoever kind of hard-coding of condition bar tiptop -- this volition probable campaign problems. If possible, usage WindowInsetsCompat to teach condition bar height.
- In fullscreen, hold upwards careful to consider when to usage window vs. shroud coordinates, every bit your app volition non accept upwards the whole shroud when letterboxed. For example, if you lot usage MotionEvent.getRawX/Y() to teach shroud coordinates for touching events, brand certain to transform them to the view's coordinates using getLocationOnScreen().
- Pay special attending to transitions inwards as well as out of fullscreen mode.
Here are a few guidelines describing what issues to aspect out for as well as how to cook them.
Take payoff of the cutout area
Rendering your app content inwards the cutout expanse tin hold upwards a swell way to render a to a greater extent than immersive, edge-to-edge sense for users, particularly for content similar videos, photos, maps, as well as games.
An illustration of an app that has requested layout inwards the display cutout.
In Android P nosotros added APIs to allow you lot contend how your app uses the display cutout area, every bit good every bit to depository fiscal establishment fit for the presence of cutouts as well as teach their positions.
You tin usage layoutInDisplayCutoutMode, a novel window layout mode, to command how your content is displayed relative to the cutout. By default, the app's window is allowed to extend into the cutout expanse if the cutout is fully contained within a organization bar. Otherwise, the window is seat out such that it does non overlap amongst the cutout. You tin also seat layoutInDisplayCutoutMode to e'er or never homecoming into the cutout. Using SHORT_EDGES manner to e'er homecoming into the cutout is a swell choice if you lot desire to accept payoff of the sum display as well as don't heed if a flake of content gets obscured past times the cutout.
If you lot are rendering into the cutout, you lot tin usage getDisplayCutout() to shout out back a DisplayCutout that has the cutout's rubber insets as well as bounding box(es). These allow you lot depository fiscal establishment fit whether your content overlaps the cutout as well as reposition things if needed.
<style name="ActivityTheme"> <item name="android:windowLayoutInDisplayCutoutMode"> default/shortEdges/never </item> </style>
Attribute for setting layoutInDisplayCutoutMode from the Activity's theme.
For devices running Android 8.1 (API 27), we've also back-ported the layoutInDisplayCutoutMode activeness theme attribute therefore you lot tin command the display of your content inwards the cutout area. Note that back upwards on devices running Android 8.1 or lower is upwards to the device manufacturer, however.
To enter easier to contend your cutout implementation across API levels, we've also added DisplayCutoutCompat inwards the AndroidX library, which is instantly available through the SDK manager.
For to a greater extent than nearly the display cutout APIs, accept a aspect at the documentation.
Test your app amongst cutout
We strongly recommend testing all screens as well as experiences of your app to brand certain that they piece of employment good on cutout devices. We recommend using i of the Android P Beta Devices that features a cutout, such every bit the Essential PH-1.
If you lot don't get got a device, you lot tin also examine using a mistaken cutout on whatsoever device running Android P or inwards the Android Emulator. This should aid you lot uncover whatsoever issues that your app may come across on devices amongst cutouts, whether they are running Android 8.1 or Android P.
What to aspect on devices amongst display cutouts
Android P introduces official platform back upwards for display cutouts, amongst APIs that you lot tin usage to present your content within or exterior of the cutout. To ensure consistency as well as app compatibility, we're working amongst our device manufacturer partners to mandate a few requirements.
First, devices must ensure that their cutouts create non negatively touching on apps. There are 2 primal requirements:
- In portrait orientation, amongst no special flags set, the condition bar must extend to at to the lowest degree the tiptop of the cutout.
- In fullscreen or landscape orientation, the entire cutout expanse must hold upwards letterboxed.
Second, devices may entirely get got upwards to i cutout on each brusk border of the device. This way that:
- You won't take in multiple cutouts on a unmarried edge, or to a greater extent than than 2 cutouts on a device.
- You won't take in a cutout on the left or correct long border of the device.
Within these constraints, devices tin house cutouts wherever they want.
Special mode
Some devices running Android 8.1 (API marking 27) or before may optionally back upwards a "special mode" that lets users extend a letterboxed fullscreen or landscape app into the cutout area. Devices would typically offering this manner through a toggle inwards the navigation bar, which would as well as therefore convey upwards a confirmation dialog before extending the screen.
Devices that offering "special mode" allow users to optionally extend apps into the cutout expanse if supported past times the app.
If your app's targetSdkVersion is 27 or higher, you lot tin seat the layoutInDisplayCutoutMode activeness theme attribute to opt-out of special manner if needed.
Don't forget: larger aspect ratios too!
While you lot are working on cutout support, it's also a swell fourth dimension to brand certain your app plant good on devices amongst 18:9 or larger aspect ratios, particularly since these devices are becoming increasingly mutual as well as tin characteristic display cutouts.
We highly encourage you lot to back upwards flexible aspect ratios therefore that your app tin leverage the sum display area, no thing what device it's on. You should examine your app on dissimilar display ratios to brand certain it functions properly as well as looks good.
Here are or therefore guidelines on screens support to proceed inwards heed every bit you lot are developing, also refer to our earlier postal service on larger aspect ratios for tips on optimizing. If your app can't suit to the aspect ratios on long screens, you lot tin pick out to declare a max aspect ratio to asking letterboxing on those screens.
Thanks for reading, as well as nosotros promise this helps you lot deliver a delightful sense to all your users, whatever display they may have!
