How to Detect If Device Support Notch Display

How to detect if device support notch display?

Some Oreo devices also have notch display if you are targeting to support all OS then you can use my solution. As per material design guidelines the status bar height for Android devices is 24dp. You can get device status bar height and device density by using the following and check if status bar height is more than 24dp. If its height is more than 24dp then it has the notch on display and then you can handle your view position as per your requirement. This will work on Oreo as well.

int statusBarHeight = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
    statusBarHeight = getResources().getDimensionPixelSize(resourceId);
}

// DP to Pixels

public static int convertDpToPixel ( float dp){
    DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return Math.round(px);
}

// Make UI adjustments as per your requirement

if (statusBarHeight > convertDpToPixel(24)) {
    RelativeLayout.LayoutParams topbarLp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    topbarlp.setMargins(0, statusBarHeight, 0, 0);

    //Set above layout params to your layout which was getting cut because of notch
    topbar.setLayoutParams(topbarlp)
}

How to find out if mobile has a notch or not

You can get the DisplayCutout object by :

WindowInsets.getDisplayCutout()

Refer this display cutout support document.

Detect screen notch from prefersStatusBarHidden

I'm not familiar with Obj-c but that looks like a computed property/function. Every time you access it, it will get the current safe area inset and return a Bool.

But the problem is that you are then setting prefersStatusBarHidden based on that Bool. If the status bar is hidden, the safe area will get smaller. Then, the next time you access the hasTopNotch property, it will return an incorrect value.

Instead, what I do is check the safe area once and only once the app starts. Your user's device isn't ever going to change, so you don't need a function. In Swift:

var deviceHasNotch = false /// outside any class

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        deviceHasNotch = window?.safeAreaInsets.bottom ?? 0 > 0 /// set it here
    }
}

Check if current device has notch in Extension

You can try

return self.view.safeAreaInsets.bottom > 20

BTW you can check model of device if it's over Iphone-X , also you can save that boolean in a shared suite defaults of the main app and check it inside the extension

React-Native Detect Screen Notch

Since the problem is on android, maybe you should try looking into StatusBar.currentHeight. Since the notch generally is part of the status bar, adding a padding on top of the header the size of the status bar should probably do it.

Detecting mobile device notch

This might be a little hacky however, obtaining the screen available heights and widths and matching them to this specifications would allow us to determine if it is an iPhone X.

Please note

In portrait orientation, the width of the display on iPhone X matches
the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8.
The display on iPhone X, however, is 145pt taller than a 4.7"
display...

So, firstly, you want to check if it is an iPhone via the userAgent, secondly you would check the area of the actual screen (excluding the orientation which defaults to portrait), lastly, once we know that it is an iPhoneX via it's screen dimensions you can determine the orientation (based on the table under the iPhone X diagram above)

if (navigator.userAgent.match(/(iPhone)/)){
  if((screen.availHeight == 812) && (screen.availWidth == 375)){

    if((window.innerHeight == "375") && (window.innerWidth == "812")){
      // iPhone X Landscape

    }else{
      // iPhone X Portrait
    }
  }
}

References:

avilHeight

avilWidth

iPhoneX Specs

As for CSS solution, I have found an interesting article about it yesterday which might be of use

Let’s say you have a fixed position header bar, and your CSS for iOS
10 currently looks like this:

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    padding-top: 20px; /* Status bar height */
}

To make that adjust automatically for iPhone X and other iOS 11
devices, you would add a viewport-fit=cover option to your viewport
meta tag, and change the CSS to reference the constant:

header {
    /* ... */

    /* Status bar height on iOS 10 */
    padding-top: 20px;

    /* Status bar height on iOS 11+ */
    padding-top: constant(safe-area-inset-top);
}

It’s important to keep the fallback value there for older devices that
won’t know how to interpret the constant() syntax. You can also use
constants in CSS calc() expressions.

Article

Xamarin (Android): Detect if the device has a display notch or not

I managed to 'solve' this issue by measuring the size of the status bar and comparing it against a known/safe threshold.

Won't claim this to be the best solution to this question but it holds up against the devices I've tested so far.

        private const int __NOTCH_SIZE_THRESHHOLD = 40; //dp

        /// <summary>
        /// Device has a notched display (or not)
        /// </summary>
        public bool HasNotch
        {
            get
            {

                // The 'solution' is to measure the size of the status bar; on devices without a notch, it returns 24dp.. on devices with a notch, it should be > __NOTCH_SIZE_THRESHHOLD (tested on emulator / S10)
                int id = MainActivity.Current.Resources.GetIdentifier("status_bar_height", "dimen", "android");
                if (id > 0)
                {
                    int height = MainActivity.Current.Resources.GetDimensionPixelSize(id);
                    if (pxToDp(height) > __NOTCH_SIZE_THRESHHOLD)
                        return true;
                }
                return false;
            }
        }
        /// <summary>
        /// Helper method to convert PX to DP
        /// </summary>
        private int pxToDp(int px)
        {
            return (int)(px / Android.App.Application.Context.Resources.DisplayMetrics.Density);
        }

---

Related Topics