tobspr / cordova-plugin-android-notch

Plugin to query android notch insets

cordova-plugin-android-notch

This plugin allows to query android notch insets.

For iOs, the insets are available as constant() and env() variables. However this doesn't work on android 9, which is where this plugin can help.

Usage

window.AndroidNotch.hasCutout(success => function(cutout) => {
    alert("Cutout: " + cutout);
}));

window.AndroidNotch.getInsetTop(success => function(insetSize) => {
    alert("Top Inset: " + insetSize);
}));

// There is also getInsetRight, getInsetBottom, getInsetLeft

If you want to use those variables in css, here's a possibility:

// Call this on resize or orientationchange, but *after* the deviceready event
function detectInsets() {
    if (window.AndroidNotch) {
        const style = document.documentElement.style;

        // Apply insets as css variables

        window.AndroidNotch.getInsetTop(px => {
            style.setProperty("--notch-inset-top", px + "px");
        }, (err) => console.error("Failed to get insets top:", err));
        
        window.AndroidNotch.getInsetRight(px => {
            style.setProperty("--notch-inset-right", px + "px");
        }, (err) => console.error("Failed to get insets right:", err));
        
        window.AndroidNotch.getInsetBottom(px => {
            style.setProperty("--notch-inset-bottom", px + "px");
        }, (err) => console.error("Failed to get insets bottom:", err));
        
        window.AndroidNotch.getInsetLeft(px => {
            style.setProperty("--notch-inset-left", px + "px");
        }, (err) => console.error("Failed to get insets left:", err));
    }
}

Then in your css:

:root {
    --notch-inset-top: 0px;
    --notch-inset-right: 0px;
    --notch-inset-bottom: 0px;
    --notch-inset-left: 0px;
}

/* Use it with var(--notch-inset-top) now, for example: */
body {
    padding-top: var(--notch-inset-top);
}

Compatibility

This plugin works on all android versions, but we can only detect notches starting from Android 9. They have been available on Android 8 as vendor specific additions, but I haven't figured how to detect those yet. Feel free to make a PR!

SCSS Snippet

Assuming you set the --notch-inset-top variables as described above, you can use this SCSS snippet to make the notch work on android and iOs:

// ----------------------------------------
/* Defines a property which is affected by the safe area */
@mixin SafeAreaTop($propToModify, $add: 0px, $important: false) {
    $importantStr: "";
    @if ($important) {
        $importantStr: "!important";
    }
    #{$propToModify}: #{$add} #{$importantStr};
    #{$propToModify}: calc(#{$add} + var(--notch-inset-top)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + constant(safe-area-inset-top) + var(--notch-inset-top)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + env(safe-area-inset-top, 0px) + var(--notch-inset-top)) #{$importantStr};
}

// ----------------------------------------
/* Defines a property which is affected by the safe area */
@mixin SafeAreaRight($propToModify, $add: 0px, $important: false) {
    $importantStr: "";
    @if ($important) {
        $importantStr: " !important";
    }
    #{$propToModify}: #{$add} #{$importantStr};
    #{$propToModify}: calc(#{$add} + var(--notch-inset-right)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + constant(safe-area-inset-right) + var(--notch-inset-right)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + env(safe-area-inset-right, 0px) + var(--notch-inset-right)) #{$importantStr};
}

// ----------------------------------------
/* Defines a property which is affected by the safe area */
@mixin SafeAreaBottom($propToModify, $add: 0px, $important: false) {
    $importantStr: "";
    @if ($important) {
        $importantStr: " !important";
    }
    #{$propToModify}: #{$add} #{$importantStr};
    #{$propToModify}: calc(#{$add} + var(--notch-inset-bottom)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + constant(safe-area-inset-bottom) + var(--notch-inset-bottom)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + env(safe-area-inset-bottom, 0px) + var(--notch-inset-bottom)) #{$importantStr};
}

// ----------------------------------------
/* Defines a property which is affected by the safe area */
@mixin SafeAreaLeft($propToModify, $add: 0px, $important: false) {
    $importantStr: "";
    @if ($important) {
        $importantStr: " !important";
    }
    #{$propToModify}: #{$add} #{$importantStr};
    #{$propToModify}: calc(#{$add} + var(--notch-inset-left)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + constant(safe-area-inset-left) + var(--notch-inset-left)) #{$importantStr};
    #{$propToModify}: calc(#{$add} + env(safe-area-inset-left, 0px) + var(--notch-inset-left)) #{$importantStr};
}

Usage Example:

body {
  @include SafeAreaTop(padding-top, 20px);
}

cordova-plugin-android-notch's Issues

Question : set css safe-area-inset-top

Hi @tobspr , thank you for this plugin !

Instead of using custom css variable, can it set safe-area-inset instead ?

In my case i set StatusBar.overlaysWebView(true), but Android doesn't set a safe-area-inset-top (i didn't installed youe plugin, i just want to make my app full screen, i also don't want to use an other variable than safe-area-insets to don't overload 40 files of my css)

Plugin generates error in PhoneGap Build

I'm getting the following error when using PhoneGap Build and PhoneGap version 8.x.x:

Error: /var/gimlet/tmp/47027227847620/3613023/gradlew: Command failed with exit code 1 Error output:
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
/var/gimlet/tmp/47027227847620/3613023/app/src/main/java/com/tobspr/androidnotch/AndroidNotch.java:10: error: cannot find symbol
import android.view.DisplayCutout;
^
symbol: class DisplayCutout
location: package android.view
/var/gimlet/tmp/47027227847620/3613023/app/src/main/java/com/tobspr/androidnotch/AndroidNotch.java:57: error: cannot find symbol
final DisplayCutout cutout = insets.getDisplayCutout();

Android simulator compatability

I just installed this plugin and am testing with Android simulator, specificallly the Pixel 3XL with the Notch skin enabled, and the notch detection is coming back false.

Will this plugin work detecting simulator Android notches?

    window.AndroidNotch.hasCutout(function(result) {
      console.log("Android Notch: "+result) ;  // result = false ;
      deviceData.hasNotch = result ;
      $scope.centerHomeDiv() ;
    }) ;