This article is sponsored by Yu Gang Said Writing Platform

April Grapes

Copyright notice: The copyright of this article belongs to the wechat public account Yu Gangshuo

1. Introduction

Just to be fair, bangs are ugly. However, as the developer of helpless pain, or to match bangs screen. All right, enough teasing, let’s get to the point.

2. Bangs screen adaptation in Android P

2.1 Introduction of Google’s support for bangs

Google has named the bangs “Screen Notch”, and this section is taken from Android’s official introduction: Screen Notch Support.

Android P supports the latest full-screen and a concave screen with room for cameras and speakers. With the new DisplayCutout class, you can determine the position and shape of non-functional areas where content should not be displayed. To determine whether these notched screen areas exist and where they are, use the getDisplayCutout() function.

New window layout attribute layoutInDisplayCutoutMode lets your application for equipment around the notch screen content layout. You can set this property to one of the following values:

  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER

You can simulate the screen notch on any device or emulator running Android P as follows:

  1. Enable the developer option.
  2. In the Developer Options screen, scroll down to the Drawing section and select Simulate a Display with a Cutout.
  3. Select the size of the notch screen.

2.2 Fringe screen Adaptation solution provided by Android P

  1. Pages with a status bar are not affected by the bangs feature because the bangs are included in the status bar.
  2. If the page is displayed in full screen, the system’s fringe screen scheme will move the application interface down to avoid the display of the fringe area. At this time, the fringe area will turn into a black edge, and the fringe will not be seen at all.
  3. The full-screen page that has been adapted to Android P application can be used in The Liu Hai area through the adaptation solution provided by Google to truly achieve full-screen display.

2.3 Notched screen types supported in Android P

Currently, Android supports three types of notch screen types: corner screen notch (oblique bangs), double screen notch (bangs + beard), and long screen notch (bangs), as shown below:

Current mobile phone is still main long screen notch, namely bangs screen. I don’t think there are any other phones with sloping bangs and moustaches yet? Well, I guess it was a bit of a blind eye.

2.4 Bangs Layout and security zone description

2.5 Android P notched screen-related interfaces

Note that the following interfaces can only be called if build.version.sdk_int >= 28.

2.5.1 DisplayCutout Class interface

It is mainly used to obtain the position of notch and safety area. The main interfaces are as follows:

methods Interface specification
getBoundingRects() Returns a list of Rects, each of which is a bounding rectangle for a non-functional area on the display.
getSafeInsetLeft () Returns the distance from the safe zone to the left of the screen, in px.
getSafeInsetRight () Returns the distance from the security zone to the right of the screen, in px.
getSafeInsetTop () Returns the distance, in px, from the top of the screen to the security zone.
getSafeInsetBottom() Returns the distance from the security zone to the bottom of the screen, in px.

Let’s do an example. Here change the developer option to simulate a screen with a notch to a double screen notch, that is, there should be two bangs, and then go directly to the code:

public class NotchActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Start with a background image
        setContentView(R.layout.notch);

        getNotchParams();
    }

    @TargetApi(28)
    public void getNotchParams(a) {
        final View decorView = getWindow().getDecorView();

        decorView.post(new Runnable() {
            @Override
            public void run(a) {
                DisplayCutout displayCutout = decorView.getRootWindowInsets().getDisplayCutout();
                Log.e("TAG"."Distance from the safe zone to the left of screen SafeInsetLeft:" + displayCutout.getSafeInsetLeft());
                Log.e("TAG".SafeInsetRight: + displayCutout.getSafeInsetRight());
                Log.e("TAG"."Distance of the security zone from the top of the screen SafeInsetTop:" + displayCutout.getSafeInsetTop());
                Log.e("TAG"."Distance of the safe zone from the bottom of the screen SafeInsetBottom:" + displayCutout.getSafeInsetBottom());
                
                List<Rect> rects = displayCutout.getBoundingRects();
                if (rects == null || rects.size() == 0) {
                    Log.e("TAG"."Not bangs.");
                } else {
                    Log.e("TAG"."Bangs number :" + rects.size());
                    for (Rect rect : rects) {
                        Log.e("TAG"."Fringe area:"+ rect); }}}}); }}Copy the code

The output is:

06-04 21:57:10.120 5698-5698/? E/TAG: the distance between the security zone and the left side of the screen0
06-04 21:57:10.120 5698-5698/? E/TAG: distance between the security zone and the right part of the screen0
06-04 21:57:10.120 5698-5698/? E/TAG: Distance between the security zone and the top of the screen SafeInsetTop:112
06-04 21:57:10.120 5698-5698/? E/TAG: Distance of the security zone from the bottom of the screen SafeInsetBottom:112
06-04 21:57:10.120 5698-5698/? E/TAG: Bangs2
06-04 21:57:10.120 5698-5698/? E/TAG: Rect(468.0 - 972.112)
06-04 21:57:10.120 5698-5698/? E/TAG: Rect(468.2448 - 972.2560)
Copy the code

As you can see, the area 112px from the top and 112px from the bottom is the safe zone.

2.5.2 Set the screen display mode of the notch

Use examples:

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

A new layout parameters in Android P attribute layoutInDisplayCutoutMode, contains three different patterns, as shown below:

model Model specification
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT Windows are allowed to extend into the DisplayCutout area only when DisplayCutout is fully contained in the system bar. Otherwise, the window layout does not overlap the DisplayCutout area.
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER This window should never be allowed to overlap with the DisplayCutout area.
LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES The window is always allowed to extend to the DisplayCutout area on the short side of the screen.

Let’s write a Demo to look at the display effect of these three modes: Demo is very simple, just show a background image, the relevant background layout is not pasted, take a look at the main code:

public class NotchActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Remove the title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // Start with a background image
        setContentView(R.layout.notch);

        // Full screen display
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

        WindowManager.LayoutParams lp = getWindow().getAttributes();
        
        // Figure 1 below
        lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER;
        // Figure 2 below
// lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
        // Figure 3 below
// lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT;getWindow().setAttributes(lp); }}Copy the code

Here, the display effect is set to full screen, and the results of the three modes are shown as follows:

You can see:

  1. LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGESThe mode will put the screen in the area of yanshen fringe.
  2. LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVERMode does not place the screen in the Fringe area, leaving a black area.
  3. LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULTMode follows in full screen displayLAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVERThe same.

Let’s see what LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT looks like in the immersive status bar:

public class NotchActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Remove the title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // Start with a background image
        setContentView(R.layout.notch);

        // Full screen display
// getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

        // Immersive status bargetWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); WindowManager.LayoutParams lp = getWindow().getAttributes(); lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT; getWindow().setAttributes(lp); }}Copy the code

As shown below:

You can see:

When the bangs are completely in the status bar of the system, the LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT displays as the LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES.

So, when we Liu Haibing adapter, please according to actual condition to use different layoutInDisplayCutoutMode.

2.6 So how should bangs be adapted?

2.6.1 If the Page has a status bar

  • It’s easy, then, not to fit, because the bangs are included in the status bar.
  • Use if you don’t want to see the bangsLAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVERTurn the fringe area into a black border.

2.6.2 If the page is displayed in full screen

  • A black edge will be left if it does not fit.
  • If you want to achieve the real full screen, you should first obtain the bangs area (dangerous area), and the content part (operation button, etc.) should avoid dangerous area and ensure that it is displayed in the safe area. Be careful to avoid bangs on both sides of a horizontal screen (danger zone).

3. Fringe adaptation before Android P

The above is a solution for Android P. Before P, none of the above code is useful. However, our great domestic manufacturers used the high-end bangs long before Android P (mostly Android O), so this also created a variety of solutions before Android P. Next, let’s take a look at the solutions provided by the mainstream manufacturers: Huawei, Vivo, OPPO, Xiaomi, etc.

Note: the relevant code has been packaged, you can copy directly.

3.1 huawei

3.1.1 Display with fringe area

Use the new meta-data attribute android.notch_support. Add a meta-data attribute to the Application’s Androidmanifest.xml. This attribute applies not only to the Application, but also to the Activity configuration. As follows:

<meta-data android:name="android.notch_support" android:value="true"/>
Copy the code
  • rightApplicationIn effect, all pages of the application will not be moved down for portrait scenes or right for landscape scenes.
  • rightActivityEffect, meaning bangs can be adapted for a single page, set this propertyActivityThe system will not do any special processing.

In fact, there is a code implementation way, but more code, I will not post here, if you are interested in the link at the end of the article click in to see.

3.1.2 Whether there are bangs

You can check whether a Huawei phone has bangs by using the following code: true: bangs; false: no bangs.

    public static boolean hasNotchAtHuawei(Context context) {
        boolean ret = false;
        try {
            ClassLoader classLoader = context.getClassLoader();
            Class HwNotchSizeUtil = classLoader.loadClass("com.huawei.android.util.HwNotchSizeUtil");
            Method get = HwNotchSizeUtil.getMethod("hasNotchInScreen");
            ret = (boolean) get.invoke(HwNotchSizeUtil);
        } catch (ClassNotFoundException e) {
            Log.e("Notch"."hasNotchAtHuawei ClassNotFoundException");
        } catch (NoSuchMethodException e) {
            Log.e("Notch"."hasNotchAtHuawei NoSuchMethodException");
        } catch (Exception e) {
            Log.e("Notch"."hasNotchAtHuawei Exception");
        } finally {
            returnret; }}Copy the code

3.1.3 Bangs size

Huawei provides interfaces to obtain the bangs as follows:

    // Get the bangs size: width, height
    //int[0] value is bangs width int[1] value is bangs height
    public static int[] getNotchSizeAtHuawei(Context context) {
        int[] ret = new int[] {0.0};
        try {
            ClassLoader cl = context.getClassLoader();
            Class HwNotchSizeUtil = cl.loadClass("com.huawei.android.util.HwNotchSizeUtil");
            Method get = HwNotchSizeUtil.getMethod("getNotchSize");
            ret = (int[]) get.invoke(HwNotchSizeUtil);
        } catch (ClassNotFoundException e) {
            Log.e("Notch"."getNotchSizeAtHuawei ClassNotFoundException");
        } catch (NoSuchMethodException e) {
            Log.e("Notch"."getNotchSizeAtHuawei NoSuchMethodException");
        } catch (Exception e) {
            Log.e("Notch"."getNotchSizeAtHuawei Exception");
        } finally {
            returnret; }}Copy the code

3.2 vivo

Vivo can toggle full screen display or safe zone display in Settings — Display and Brightness — third-party app display ratio.

3.2.1 Is there a fringe screen

    public static final int VIVO_NOTCH = 0x00000020;// Does it have bangs
    public static final int VIVO_FILLET = 0x00000008;// Whether there are rounded corners

    public static boolean hasNotchAtVoio(Context context) {
        boolean ret = false;
        try {
            ClassLoader classLoader = context.getClassLoader();
            Class FtFeature = classLoader.loadClass("android.util.FtFeature");
            Method method = FtFeature.getMethod("isFeatureSupport".int.class);
            ret = (boolean) method.invoke(FtFeature, VIVO_NOTCH);
        } catch (ClassNotFoundException e) {
            Log.e("Notch"."hasNotchAtVoio ClassNotFoundException");
        } catch (NoSuchMethodException e) {
            Log.e("Notch"."hasNotchAtVoio NoSuchMethodException");
        } catch (Exception e) {
            Log.e("Notch"."hasNotchAtVoio Exception");
        } finally {
            returnret; }}Copy the code

3.2.2 Bangs size

Vivo does not provide an interface to obtain the size of the bangs. Currently, Vivo’s bangs are 100dp wide and 27DP high.

3.3 OPPO

OPPO currently applies the Settings – Display – full screen display – Concave area display control, which has a switch to turn off the concave area.

3.3.1 Whether there are bangs

    public static boolean hasNotchInScreenAtOPPO(Context context) {
        return context.getPackageManager().hasSystemFeature("com.oppo.feature.screen.heteromorphism");
    }
Copy the code

3.3.2 Bang size

OPPO does not provide an interface to obtain the size of bangs. Currently, the size and specifications of its models with bangs are unified. Do not rule out the future model will have a change. Its display is 1080px wide and 2280px high. The bangs are 324px wide and 80px high.

3.4 millet

3.4.1 Whether there are bangs

The system added property ro.miui.notch. If the value is 1, notch is the cell phone.

There is no mi 8 mobile phone on hand, temporarily unable to verify, here will not post the code, so as not to mislead everyone. Test it later before you release it.

3.4.2 Bang size

The height of Xiaomi’s status bar is slightly higher than that of the bang screen, so it can indirectly avoid the bang screen by obtaining the height of the status bar. The code for obtaining the height of the status bar is as follows:

    public static int getStatusBarHeight(Context context) {
        int statusBarHeight = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height"."dimen"."android");
        if (resourceId > 0) {
            statusBarHeight = context.getResources().getDimensionPixelSize(resourceId);
        }
        return statusBarHeight;
    }
Copy the code

Other phones can also use this method to indirectly avoid the bangs, but some phones may have a higher height than the status bar, so the results obtained by this method are not necessarily safe.

3.5 Other Vendors

If you want to adapt to the bangs of other manufacturers, you can check out their developer documentation, generally will provide, not detailed here.

4 References:

1.Android P features and apis

2. Huawei Liu Haiscreen Mobile phone Android O version adaptation guide

3. Vivo full screen application adaptation guide

4.OPPO concave screen adaptation description

5.MIUI Notch screen adaptation

Welcome to follow the wechat official account