The Android screen notch guide for developers

The screen notch on the iPhone X screen was unavoidable with the inclusion of the edge-to-edge OLED screen because the camera and sensors get in the way. So manufactures have to contour the screen around the sensors and camera area, which created the somewhat odd, but always funny “screen notch”.

Until now iOS developers were the only ones that had to deal with the extra area’s on the left and right side of the notch by either scaling the display space of your app upward, and carefully inserting app related buttons in those areas, or just blocking off the area at the bottom of the notch, and letting those area’s be occupied by the default phone signal and battery indicators.

For Android developers, the time for the battle of the notch is here. But coincidentally, Android actually got the display notch first with the introduction of the "Essential Phone PH-1". Other Android phone device manufactures now with notches on their Android displays include the Huawei P20 and P20 Pro, the OnePlus 6, LG's G7 ThinQ, Asus's ZenFone 5, Xiaomi's Mi 8, and the Vivo V9.

The sticky part for Android developers are display notches don't follow any specific pattern. Some are larger than others, some are taller, and some are downright weird. 

Google's Megan Potoski recently posted an article on the Android Developers Blog aimed at providing Android developers some tips and best practices for designing apps for devices with display cutouts.

Utilizing Special Mode for screen notch

Android apps also allow developers to extend their screens all the way to the top of the device to maximize the utility of the new screen to phone ratios. This is called "Special Mode" and can only be used with the user's permission. If Special Mode is not activated, then the user's screen will just appear as a regular non-cutout screen by chopping off the top of the screen to the extent which the cutout would exist.

Dealing with the cutout

When it comes to the handling the notch, you really have one of two options, either cut it out of the screen entirely by dropping all your content down or integrate it into your current UI by working right around it. And according to the Android blog post, many popular methods that developers would use to get things like status bar height or event press locations may no longer work for apps correctly and must be accessed in other ways in order to accommodate the new cutout design.

Test your app with multiple cutout sizes

An Android device has a fake notch overlay that can be found on the phone's developer settings in order to simulate what your app would look like with the various sized cutouts that exist for phones on the Android market. Be sure to use this for testing purposes in case you don't have the latest device.

Handling higher aspect ratios

Don't forget to tackle those higher aspect ratios as well! We've gone a long ways from the old 3:2 screen resolutions, and now with 18:9 coming out, it can be difficult trying to juggle both the cutout and the screen size. Android has guidelines on how you can support these screen sizes, so be sure to read them carefully. An additional option noted by the blog post is the ability to declare a maximum aspect ratio that your app will support, allowing you some wiggle room as a developer.