A large wave of Android notch screens is coming, and the whole network is fully adapted!

[[225814]]

1. Preface

Hi, everyone, I am Chengxiang Moying!

Apple has always been following the design trend. The "notch screen" has been controversial since the release of iPhone X. But no matter what, Android is also joining the ranks of "notch screens", especially after the release of Android P, which also supports the top notch screen design from the system level.

Many manufacturers are also gradually launching mobile phones with "notch screen" design. The more common ones in China are OPPO x21 and Huawei P20.

The screen is different, and there are some adaptation issues. Today, let's talk about Android's "notch screen" and how we can adapt to it.

2. Background introduction of notch screen

2.1 Background

I think everyone should have an idea of ​​the appearance of the notch screen, but different manufacturers have different ways of implementing the notch screen, so you need to have an idea of ​​this first.

As for the current situation in the market, it can be divided into two categories: one is the standard Android P Api, and the other is the special adaptation made by manufacturers on systems below Android P.

For example: Huawei P20 adopts the Android P standard API, but OPPO x21 is different, it has its own adaptation API.

2.2 Those that need to be adapted separately

Even if a notch screen is added, you can also find that most of the area is "cut" from the status bar, so there are three situations.

1. Pages with a status bar will not be affected by the notch screen.
2. For full-screen pages that are not adapted to the notch screen, the system will cut the notch screen area and move the entire UI page downward to avoid the notch screen display.
3. The full-screen page has been adapted to the notch screen and is compatible with the notch screen to achieve true full-screen display.

The differences between these methods will be explained separately later.

2.3 Be the first to experience Android P

When you don't have a device with the corresponding system at hand, the emulator is a good way. Recently, Google also released the Android P emulator. Another way is to find some platforms that support real-device cloud testing and rent a required remote device, which is also a solution.

I choose the Android P emulator here. If you need to update the SDK yourself, just download and update it without any hassle.

The notch area is mostly used to leave space for cameras or other sensors. On devices or simulators without notches, you can enable notch support by going to "Simulate a display with a cutout" in the developer options.

If you try all the modes, you will find that the notch of the notch screen on Android P has multiple styles and is not uniform.

2.4 Notch screen adaptation

2.2 also made it clear that the cutting area of ​​the notch screen exists on the status bar, so on the page with the status bar, we do not need to deal with it specially, the system will help us handle it.

For full-screen pages, they need to be handled separately. Here, I simply made a full-screen page, and each horizontal bar is of equal width so that you can see the difference in layout.

From left to right: turn off the notch screen, turn on the notch screen but not supported, and adapt to the notch screen.

A full-screen page that does not support the notch screen but encounters a notch screen will cause the UI to sink. If this is not a list layout, the controls at the bottom will be blocked.

For example, the following situation:

Image from: Huawei Adaptation Guide

There are also some effects of areas blocked by bangs, which actually mainly rely on UI designers to avoid. Do not design operable areas where bangs may cut, which will affect user operations.

3. Technical Adaptation for Notch Screen

After saying so much, we still need to use technical methods to adapt the notch screen. Android P's notch screen has a standard API for adaptation, and for some manufacturers' own notch screen devices, such as OPPO x21, you need to follow its development documentation for separate adaptation.

Android P provides a dedicated API to support the latest notch screen: DisplayCutout.

3.1 Turn on the notch screen

We need to enable the notch screen support separately for full-screen pages. The adaptation solution provided by Google can set whether to use the notch screen area in full-screen mode.

 WindowManager.LayoutParams lp
                =getWindow().getAttributes();
 lp.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS;
 getWindow().setAttributes(lp);

The new layout attribute layoutInDisplayCutoutMode contains three optional modes:

 public   static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS = 1;
 public   static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT = 0;
 public   static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER = 2;

3.2 Notch screen height

In full-screen mode, we need a way to get the height of the notch so that we can leave a safe distance when designing and laying out.

Although Google requires that the notch of the notch screen must be consistent with the height of the notch, and the notch screen is hidden in the status bar, one idea is to directly obtain the height of the status bar to determine the safe area that can be laid out outside the notch.

However, Android P has reserved a standard API for measuring the notch of the notch screen: DisplayCutout.

The notch of the notch screen is in the middle of the screen, so only the result returned by the getSafeInsetTop() method is what we need, while the other getSafeInsetXxx() methods directly return 0.

 view .postDelayed(new Runnable() {
 @Override
 public void run() {
        DisplayCutout displayCutout = view .getRootWindowInsets().getDisplayCutout();
        Log.i( "cxmyDev" , "SafeInsetBottom:" + displayCutout.getSafeInsetBottom());
        Log.i( "cxmyDev" , "SafeInsetLeft:" + displayCutout.getSafeInsetLeft());
        Log.i( "cxmyDev" , "SafeInsetRight:" + displayCutout.getSafeInsetRight());
        Log.i( "cxmyDev" , "SafeInsetTop:" + displayCutout.getSafeInsetTop());
 }
 }, 100);

You can also look at the results obtained:

 I/cxmyDev: SafeInsetBottom:0
 I/cxmyDev: SafeInsetLeft:0
 I/cxmyDev: SafeInsetRight:0
 I/cxmyDev: SafeInsetTop:112

3.3 Non-standard APIs

Manufacturers like OPPO do not implement the notch screen in accordance with the Android P standard. They completely modify the notch screen implementation method. Fortunately, they all provide complete adaptation documents, which requires us to directly read the development documents they provide to adapt.

Oppo's notch screen adaptation document:

• https://open.oppomobile.com/wiki/doc#id=10139

For OPPO, the height of its bangs is fixed, which is 80px.

To determine whether the current device has a notch screen, a corresponding API is also provided, which can be obtained using the following method.

 context.getPackageManager().hasSystemFeature("com.oppo.feature.screen.heteromorphism")

Returns true if it is a notch screen, but this method can only identify the notch screen supported by the OPPO brand.

IV. Conclusion

After reading this article, I think you have a certain understanding of Android's notch screen. This is a brand new adaptation technology, and it is not yet certain whether different manufacturers will fine-tune it, so if you encounter any problems, you may leave a message in the comment area to discuss.

[This article is an original article by 51CTO columnist "Zhang Yang". Please contact the author through WeChat official account to obtain authorization for reprinting]

Click here to read more articles by this author