Megan Potoski, User Interface Product Manager for Android
As smartphones have evolved, the bezels have gotten narrower and the horizontal ratio on the screen has gotten larger. The concave screen (also known as “bangs “) has become a new tool for device makers: it allows users to enjoy the full screen experience while leaving enough space for sensors. So far, 11 manufacturers have released 16 phones with bangs, some of them Android P Beta devices. More notch screens are expected to be introduced to consumers in the future.
On the one hand, the notch screen creates the perfect conditions for developers to show off the unique appeal of their apps. On the other hand, it highlights the importance of adaptation, whether the device has one screen gap or two, an 18:9 screen or some other size, to ensure that the app provides the same user experience on all devices.
Concave screen adaptation solution
As device manufacturers continue to join the ranks of notch screens, what can developers do to ensure quick adaptation?
The good news: even on notch devices, most apps won’t be affected. By default, if you don’t set any special flag bits for the status bar in portrait mode, the status bar will adjust its height based on the screen gap (gap height ≤ status bar height), and the app will appear below the status bar. In landscape and full screen mode, the system keeps a black edge around the app window to avoid displaying app content in the gap area.
However, there are a few things developers need to be aware of in order to avoid application adaptation problems on notched screens:
- Do not set the height of the status bar to a fixed value, or problems can easily occur. When conditions permit, you can call the WindowInsetsCompat to get the status bar height.
- In full screen mode, the screen doesn’t take up the entire screen because of the black edges around the app, and developers have to make a careful choice between window or screen coordinates. For example, if you call motionEvent.getrawx /Y() to get touch point coordinates relative to the screen origin, don’t forget to use getLocationOnScreen() to convert them to view coordinates;
- Pay special attention to the application’s view transition when entering and exiting full-screen mode.
Please refer to the Screen Notch Support Guide to learn about the problems you may encounter during adaptation and the corresponding solutions.
Flexible use of gap areas
By displaying app content in the gap area, especially content such as video, images, maps or games, developers can significantly increase app engagement and create a truly full-screen experience for users.
You can take advantage of the new window layout attribute layoutInDisplayCutoutMode management applications in the layout of the notch screen display. By default, applications will only be allowed to extend into the gap area if the gap is fully contained in the status bar, otherwise the window will not overlap the gap. In addition, you can change the layoutInDisplayCutoutMode parameters, make equipment (or not) allowed applications use gap area. If you want to take advantage of the entire display area, and you don’t mind the gap location not showing the application content, the SHORT_EDGES mode is a good choice, in which the system always allows the application window to extend into the gap area.
During adaptation, you can call getDisplayCutout() to get the margins and bounding box values for the non-displayable notch and use these values to determine whether the application content coincides with the notch and whether the content needs to be repositioned.
If your app needs to lay out content for multiple API levels, you can download the AndroidX library through the SDK manager and use the DisplayCutoutCompat in the library to simplify the management process.
Test your application against notched screens
It is highly recommended that you test all interface and operation of your app to ensure that it runs smoothly on a notched screen device. It is recommended that you select an Android P Beta device with a notched screen, such as the Essential PH-1, as your debugging device.
Notch screen all know
Android P introduces official platform support for notched screens, as well as a number of apis to help developers lay out their app content within and outside the notched area. To ensure consistency and application compatibility, we are actively working with our device partners to develop industry standards.
First, manufacturers need to ensure that the device’s notched screen does not adversely affect the application. This involves two key requirements:
- In portrait mode, if no special flag bit is set, the status bar height must be greater than or equal to the notch height;
- In full-screen or landscape mode, the notch area must fall entirely within the black fill area.
Second, the number of gaps on each short edge of the screen should not exceed 1, namely:
- It is not allowed to have 2 or more gaps on a short edge, that is, each device has a maximum of 2 screen gaps;
- No gaps are allowed on the left or right side of the screen.
On the premise of satisfying the above conditions, manufacturers can design the location and shape of the notch according to their own requirements.
Special mode
On some devices running Android 8.1 (API level 27) or earlier, users can enable a “special mode” that allows the system to extend the app window into the gap area in either full or landscape mode. The user can select the mode in the navigation bar, and a confirmation dialog box will be displayed. The mode takes effect only after the user agrees.
Don’t forget: Be prepared for long-screen devices
While adapting to the notch screen, you might want to consider how to ensure that your app will work well on devices with a longer screen (aspect ratio 18:9 or greater), especially as there are more and more long-screen phones on the market that also feature a notch screen.
It is strongly recommended that you choose flexible adaptation solutions to ensure that applications are not limited by running devices and use all display areas efficiently. You can perform compatibility tests for different screen sizes to ensure that your application performs well both in terms of function and view.
It is recommended that you consult the recommendations listed in “Adaptation for Long Screen Devices” and “How to Optimize Your Application for Long Screen Devices” to develop accordingly. If your application cannot accommodate the aspect ratio of a long screen, you can set the maximum aspect ratio supported by your application and ask the system to fill the display space around the edges of your application with black.
Hope the above content can be helpful to you, so that you are not afraid of “bangs”, just for a better experience!
Click here “We’d like to hear you better”
