More and more mobile devices feature a notch (or display cutout, as it is called on Android). To handle this little monster, mobile app developers now face many new challenges. The trend is spreading fast and many manufacturers already announced new 2018 models with edge-to-edge screens. For example with Android P devices like Essential Phone, OnePlus 6, Oppo R15 Pro, Vivo X21, LG G7, Huawei P20 or Asus Zenfone 5. Similar to the iPhone X, Apple’s new iPad Pro model, the iPad X, will also include a notch and feature Face ID. “ ” How hard can it be to support the notch — maybe one or two days to optimize existing apps for it? That’s what we initially thought. As it turned out, it was a . We ran into many bumps along the road of porting 20+ apps & games to support it. lot harder than expected properly As a native iOS and Android developer, you will experience similar issues yourself when you start to develop for devices with edge-to-edge screens. For iOS, Apple even you to support iOS 11 and the notch: All new apps & app updates submitted after get rejected otherwise. requires July 2018 So we put up our sleeves and prepared this guide to show you how to support the notch in your apps. Thus the sooner you start following this guide the better you are prepared for the Apple change coming in July and for upcoming Android P changes. The tips provided in this guide apply for both iOS and Android and are useful for cross-platform developers as well. Along the way, we also modified all the components in V-Play, a cross-platform framework for app & game development. It now supports the notch out-of-the-box, so you don’t need to go through this „notch hell“ yourself. Here we go! We hope you enjoy the „Ultimate Guide to Survive the Notch“: User Interface Challenges of Devices with Edge-to-Edge Displays Many manufacturers already announced new models with edge-to-edge screens, which became even more popular after the release of the iPhone X: Such screens allow to get the most out of the available space the device offers. In addition to the rounded edges, there is a main pain point for mobile app developers: the notch. Instead of a clear rectangular frame, app developers now face arbitrary shaped screens. Also, hardware buttons at the front no longer exist. They got replaced by on-screen buttons and gestures provided by the OS. The following sections describe how to create adaptive layouts to handle those challenges for both iOS & Android. While this post uses examples for iPhone X, the same concepts and suggested solutions also apply for other devices & platforms with similar screens, like upcoming Android P devices. Bigger Screen Size and Safe Area of iPhone X For the iPhone X, the new screen holds two major factors to account for in your mobile app: The screen is bigger in general, so there’s more space your app can use. Your app content should not cover areas with a notch or native on-screen buttons. Otherwise, the elements you place at these parts of the screen are not accessible. To support different device models and screens, most apps use a responsive layout. This means that the pages use the full height and width to show as much content as possible. This is a good thing. But if the notch and reserved areas are not taken into consideration, some parts of your app are covered or inaccessible. In the example screenshots shown above for the iPhone X, the notch covers the top navigation bar in portrait mode and your page content, the list item text, in landscape mode. For both orientations, the area for the home swipe gesture overlays your app at the bottom. Also note that the new screen comes with rounded corners. To solve this problem, your app needs to consider the of the screen. It is the part of your app, which won’t be covered by the notch or on-screen gestures. The required top and bottom screen insets determine the safe area in portrait mode: safe area For example, the navigation bar requires more padding at the top to be within the safe area. In landscape mode it looks a bit different. We then require margins to the left and right (for the rounded corners and the notch), as well as a small inset at the bottom (for the home swipe gesture): How Do Existing Apps Look on iPhone X? If you are worrying that your published app is already affected by the notch, you can relax. Only apps configured to target iPhone X will run full-screen. Your existing iOS apps will come with as shown on the right in this image, to not overlay areas with a notch or screen gestures: black borders The disadvantages are that the borders do not look good and the app does not match the style of other iPhone X apps — your user’s will realize this and your app will get a worse rating. The black border fallback is simply a backwards compatibility feature by Apple to not break anything. However, it also means some work for us app developers to support the new screen. How to Create iPhone X Apps with Xcode Enable iPhone X Support for Your App Unless your app enables support for iPhone X, it will show with black borders by default. This also means, that your . However, if you want to fully support iPhone X and let your app fill the whole screen, you need to add an additional launch image for the iPhone X resolution in Xcode: existing apps won’t be affected by the notch Add one image with 2436 x 1125 pixels for landscape mode, and one with 1125 x 2436 pixels if you want to support portrait. Position Your Content to the Safe Area Layout Guide Many iOS apps use a navigation bar at the top and a tab bar at the bottom. With iOS 7, Apple decided to add the and properties, which match the insets for these bars in the view. Developers can thus align their content to match these insets. topLayoutGuide bottomLayoutGuide For iPhone X, it is not enough to only take care of the top and bottom margins. We also have insets to the left and right of the screen, e.g. when in landscape mode. So Apple introduced the new property with iOS 11. The top and bottom layout guides are now . safeAreaLayoutGuide deprecated To make sure your content isn’t covered by the notch, position it to the safe area layout guide. Similar to the previous top and bottom layout guides, this can be done with constraints. But this simple solution is still far from perfect. Especially in landscape mode, constraining your content area can leave some ugly margins. To avoid this, you can instead add custom insets to your content only where necessary. The new property gives access to the exact pixel inset for the safe area. You can thus tweak the layout to look exactly as you want. For example, you can design the cells of your list items to account for the safe area with a bigger indent. The view content can then cover the whole screen. safeAreaInsets How to Migrate Existing Native iOS Apps to work with Safe Area Insets To make updating your apps a bit easier, you have the option to activate the setting for each of your Storyboards in Xcode. Use Safe Area Layout Guides The Storyboard then replaces the top and bottom layout guides with a safe area and updates the constraints. This is a quick first measure to get your app ready for iPhone X. But as mentioned above, you will still need to check all your views to provide the best possible user experience. For example, to: Let the background of a sub-view use the full screen while keeping the content safe. Decide how to handle the insets when flicking a UIScrollView. Set up your UITableView or UICollectionView to correctly layout for iPhone X. Also, you might not be happy with the result of the default setting in case your app : Use Safe Area Layout Guides hides the system status bar Due to a bug within the latest iOS 11 SDK, the navigation bar does not account for the notch in this case. Except for some workarounds, there is no simple solution for this issue at the moment of writing this guide. At least when relying on native iOS development with Xcode. Android P Developer Preview: Display Cutouts Many Android phone manufacturers already announced their upcoming device models with edge-to-edge displays and rounded corners. For example: Google also already released the developer preview for Android P. It comes with the ability to handle these so-called display cutouts. In the iOS world, display cutout is equivalent to notch. How to Test Apps with Display Cutout in Android P The Android P Developer Preview allows simulation of display cutout. Android P is available with the SDK Manager of Android Studio. It is sufficient to install the Android P SDK and System Image to test on a virtual Android P device: After installation is complete, you can start an emulator running Android P. The developer settings on Android P offer four different display cutout options to choose from: After selecting this option, the Android device will show with a bigger status bar that also includes a display cutout: The attribute controls how the window is laid out if there is a display cutout. By default your Android P app never extends into cutout areas — with a single exception. As visible on the image above, your app can safely cover the full screen for cutouts that do not exceed the status bar area. layoutInDisplayCutoutMode The window will lose this ability to extend into the cutout area when or is set. Note: FLAG_FULLSCREEN SYSTEM_UI_FLAG_FULLSCREEN To let your app always take advantage of the full screen, you can set the value . You are then responsible to keep your app content within the safe area of the screen. For example, when the device is in landscape mode or if the cutout exceeds the status bar in portrait. LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS Custom Layouts with Safe Area Insets in Android P Like iOS 11, Android P includes features to determine the safe area of the screen and work with the given insets. The new class lets you find out the location and shape of the non-functional areas where content shouldn’t be displayed. DisplayCutout To determine the existence and placement of the cutouts areas, use the method. You can then access the following fields for the : getDisplayCutout() DisplayCutout — Returns the bottom safe area inset of the screen. getSafeInsetBottom() — Returns the left safe area inset of the screen.. getSafeInsetLeft() — Returns the right safe area inset of the screen.. getSafeInsetRight() — Returns the top safe area inset of the screen.. getSafeInsetTop() — Returns a list of objects that describe non-functional areas of the screen. getBoundingRects() Rect Overall it means quite some work to let your app layout adapt to these new displays. Especially for developers that target both iOS and Android. By using a cross-platform framework with notch support, you can save time and Effort for buidling mobile apps. Create iOS and Android Apps that Support The Notches and Display Cutouts V-Play Engine focuses on making mobile app development easy. And it also supports the iPhone X notch and Android P devices with display cutouts out-of-the-box. You can write your app once, and build for iOS, Android or even Desktop with a single button press from 1 IDE. The source code is 100% shared across all platforms. V-Play builds upon C++ & Qt and utilizes QML & JavaScript. QML is a fast and easy-to-use declarative UI language. With only a few lines of code, it is possible to create native iOS and Android apps that look native on every device: This is how the above example app looks like on an iPhone X: The used components like and are prepared to work with safe area insets: They automatically include extra margins for the tab and navigation bar if required. Navigation NavigationStack In contrast to the native iOS SDK it is also possible to hide the status bar without any issues. You can do this by setting a single property in your code: The top navigation bar in V-Play always supports the notch automatically, even with a hidden status bar. Like the setting for Xcode Storyboards, the content of your pages does not overlap reserved areas of the screen. But V-Play requires no extra setting to achieve this. The page content aligns with the safe area out-of-the box. For devices without a notch, the app does not show any extra margins or insets: Use Safe Area Layout Guide Note: Configure iPhone X launch images for your iOS app to get full-screen support on iPhone X if you have an existing V-Play app. For new apps, this is set up automatically. Optimize your User Interface with Adaptive Layouts For most use cases, the default settings are fine to let your app look good on devices with and without display cutouts. If you want more control over how to display your content, you can disable the setting of each . You then have two options to work with the safe area: useSafeArea Page Configure only certain content items within the Page to align with the safe area. Retrieve the exact safe area inset of the screen and layout items as required. The following example deactivates the setting and shows both options: useSafeArea The page content can now cover the full screen by default. You can use the property of the to align items with the safe area of the screen. In the above example, we use this to fill the safe area with a green rectangle. This is where you can place your content items. safeArea Page The hold the exact safe area insets of the screen in pixels. Devices without a notch do not have any insets and thus return 0. For iPhone X, the yellow rectangle will cover the top inset, which includes the status bar. To also support older devices, you fill the status bar if no inset is returned by . nativeUtils.safeAreaInsets nativeUtils.safeAreaInsets.top The available properties are: safeAreaInsets nativeUtils.safeAreaInsets.top nativeUtils.safeAreaInsets.right nativeUtils.safeAreaInsets.bottom nativeUtils.safeAreaInsets.left Running this app on iOS or Android produces the following result: Developing adaptive user interfaces this way is very convenient. The following example shows how you could use to add more indent for the cells of a list. nativeUtils.safeAreaInsets.left With such simple additions, you can make sure that your app looks pixel-perfect on screens with and without safe area insets. You don’t need to add such tweaks for apps that offer the default UI with a navigation bar and tab bar. The V-Play page and navigation components look good on all devices and adapt their style automatically. Support for Display Cutout on Android P Devices V-Play Engine is a cross-platform development tool that supports both Android and iOS. You can take the QML code of your iOS app and directly build for Android, or vice-versa. All components change their look and behavior then. They match the native style and user experience of the given platform: The above image shows the Android and iOS style for the same example app. The Android style is already prepared to support edge-to-edge screens. No extra work is required, to make your app work cross-platform for iOS & Android with display cutouts, safe area and a notch! Simulate Safe Area Insets while Developing on Desktop It takes quite some time to always build and deploy to your phone or the simulator. With V-Play you can run and test your app directly on Desktop. It is even possible to simulate different devices and resolutions to see how your app will look like. You can change the resolution at runtime, This is a huge time-saver for UI development & testing! Native development for Android or iOS requires deployment to another real or virtual device to test the UI. without having to restart your app. Along with the support for a display notch, V-Play also comes with a new resolution simulator entry for iPhone X. And the best thing is: It even covers the safe area insets you get on a real device: V-Play Engine is thus a huge time-saver when developing for iOS and Android. The V-Play SDK is free to use, so make sure to check it out! If you enjoyed this post, please leave a comment or share it on Facebook or Twitter. More Relevant App Development Resources How to Create Mobile Games for Devices with Safe Areas like iPhone X How to support multiple screen sizes & screen densities — Responsive App Guide Guide for App Layout Guide for App Navigation iPhone X Human Interface Guidelines iOS Documentation: Positioning Content Relative to the Safe Area Safe Area Development Guide for iOS Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Android P Documentation: Display Cutout Support Exploring Android P Display Cutouts The Best App Development Tutorials & Free App Templates All of these tutorials come with full source code of the mobile apps! You can copy the code to make your own apps for free! How to create a mobile app for iOS & Android with a single code base How to support multiple languages and internationalization in your mobile app Common Widgets & Controls in a cross-platform App How to add native code to your mobile App How to easily style your App with Themes How to add Animations to your App How to add a Chat to your Mobile App How to make a Weather App accessing a REST weather service Conference App Template Widget Gallery App Template Twitter App Template Messenger App Template Property Finder App Template App Development Video Tutorials Thanks for reading & scrolling that far! Do you have suggestions for posts or tutorials about app development?Simply send us a message which tutorial you’d like to see . here More Posts Like This How to Make Cross-Platform Mobile Apps with Qt — V-Play Apps Release 2.16.0: iPhone X Support and Runtime Screen Orientation Changes How to Expose a Qt C++ Class with Signals and Slots to QML Originally published at v-play.net on May 17, 2018.
