Android P is nearing release and so Google has set out its guidelines for how the ‘notch’ found on many new devices should be accommodated.
Love it or hate it, the notch has become mainstream. First marketed by the first ‘Essential’ smartphone and quickly followed by other Android manufacturers to maximise the screen-to-device ratio, even Apple has adopted it with the iPhone X.
On the Android Developers blog, Google wrote:
“Smartphones are quickly moving towards smaller bezels and larger aspect ratios. On these devices, display cutouts are a popular way to achieve an edge-to-edge experience while providing space for important sensors on the front of the device.
There are currently 16 cutout devices from 11 OEMs already released, including several Android P beta devices, with more on the way.”
The small cutout left for vital components including the front camera and light sensor has presented a slight design challenge. Some consumers prefer content to wrap around it to maximise space, while others prefer a black bar to cover it up at the cost of display size.
Manufacturers like Huawei often provide the option to support either preference:
Developers will not have to do much to accommodate the notch. The status bar will automatically be resized to the appropriate dimensions in portrait, while content in landscape mode will feature a letterbox to avoid content from being hidden.
If they choose, developers can specifically tailor their experiences to take advantage of the notch for a more “immersive experience.”
Google recommends testing your apps to see how they look on devices with notches either on actual hardware or simulated.
The company has some things for developers to look out for:
-
Watch out for any sort of hard-coding of status bar height — this will likely cause problems. If possible, use WindowInsetsCompat to get status bar height.
-
In fullscreen, be careful to consider when to use window vs. screen coordinates, as your app will not take up the whole screen when letterboxed. For example, if you use MotionEvent.getRawX/Y() to get screen coordinates for touch events, make sure to transform them to the view's coordinates using getLocationOnScreen().
-
Pay special attention to transitions in and out of fullscreen mode.
Device manufacturers will have a bit more work to do, mostly because of the various sizes and styles of notches that are being implemented. Google says it’s up to manufacturers to ensure their “cutouts do not negatively affect apps.”
To that end, Google has set a couple of ground rules:
-
In portrait orientation, with no special flags set, the status bar must extend to at least the height of the cutout.
-
In fullscreen or landscape orientation, the entire cutout area must be letterboxed.
Also, it perhaps goes without saying, but only a single cutout is able to be implemented on the short edges of a device. No cutouts can be featured on the long edges.
What are your thoughts on Google’s guidelines? Let us know in the comments.
