Black bars in Android with notch using cordova in Immersive mode

Question

I'm making an android app and I wanted it in immersive mode, I did it with a plugin but I can't make the immersive work on an android device with notch (black bars at top and bottom). How can I use the whole screen?

So I have been reading a lot of solutions:

I'm using this plugin and this did want I wanted in android devices without notch: https://github.com/mesmotronic/cordova-plugin-fullscreen

setTimeout(function(){
    if (window.AndroidFullScreen) { 
        window.AndroidFullScreen.immersiveMode(); 
        AndroidFullScreen.showUnderStatusBar();
        AndroidFullScreen.showUnderSystemUI();
}, 2000);

(also I need to use a timeout for changes to apply and I don't know why, anyway to apply the code on startup of the app, I'm using deviceready.

This made it use the fullscreen in notch. I put this in the javascript file, using the plugin.

AndroidFullScreen.setSystemUiVisibility(
        AndroidFullScreen.SYSTEM_UI_FLAG_LAYOUT_STABLE
        | AndroidFullScreen.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        | AndroidFullScreen.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
        | AndroidFullScreen.SYSTEM_UI_FLAG_HIDE_NAVIGATION
        | AndroidFullScreen.SYSTEM_UI_FLAG_FULLSCREEN
        | AndroidFullScreen.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
    , successFunction, errorFunction
);

But the problem is that the System UI doesn't hide, and when I drag from the top to open the notification menu and hide it, the UI finally dissapears but the screen goes back to have the black bars, so its like the old immersiveMode() (also this code is again in the setTimeOut).

my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.adia.security" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="AndroidLaunchMode" value="singleInstance" />
        <preference name="DisallowOverscroll" value="true" />
        <preference name="KeepRunning" value="true" />
    </platform>
    <edit-file parent="/manifest/application" target="AndroidManifest.xml">
        <meta-data android:name="android.max_aspect" android:value="2.1" />
        <activity android:resizeableActivity="false" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" />
    </edit-file>
    <preference name="Fullscreen" value="true" />
    <preference name="StatusBarOverlaysWebView" value="true" />
    <plugin name="cordova-plugin-fullscreen" spec="1.2.0" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <engine name="android" spec="^7.1.4" />
</widget>

So I have this when I apply immersiveMode() with the plugin:

Immersive Mode

And this with the other code, the UI doesn't go away, and when I open the notification menu and hide it, it goes back again to the first image.

Notification Menu

What I want is to have it like this but without the UI showing.

Thank you.

score 5 · Accepted Answer · answered Jan 25 '19 at 16:16

I got it working. So I just needed to add styles.xml with the following:

<resources>
    <style name="Full">
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

So I created styles.xml and I added it to my www folder, and then added this to my config.xml in my platform android section:

<platform name="android">
    <resource-file src="www/styles.xml" target="app/src/main/res/values-v28/styles.xml" />
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:resizeableActivity="false"/>
    </edit-config>
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
        <activity android:theme="@style/Full"/>
    </edit-config>
    <config-file parent="./application" target="AndroidManifest.xml">
        <meta-data android:name="android.max_aspect" android:value="5.0" />
    </config-file>
</platform>

The resource-file, adds the styles.xml in the folder values-v28 in the correct path, the v28 is for the 28 sdk, so Android 9.

Then I use edit-config twice, the first one I modify the application to add android:resizeableActivity="false" that's to make the meta-data android.max_aspect works, and android.max_aspect forces the android to use all of the aspect-ratio of the screen.

The another edit-config I add my custom style in the activity, if I put this in my application it will not work, so I put it here.

Then everything worked fine using the plugin function immersiveMode().

Android Notch Fullscreen Immersive

I got the solution in here: https://proandroiddev.com/making-notch-friendly-apps-for-android-75776272be5c

Thanks @Fradniev it works well! However, using this method displays the black StatusBar at the top of the screen for a few seconds at app launch. Any ideas about how to hide/remove it? I tried the cordova-plugin-statusbar and used StatusBar.hide() via JS but nothing seems to work. Since the android theme is set to "@style/Full" in the AndroidManifest.xml with your technic, it removes the line old theme "@android:style/Theme.NoTitleBar.Fullscreen" (this one was hiding well the StatusBar). — Faks, Sep 20 '19 at 14:15
After 2 days searching about how to hide the **StatusBar** during the **Splashscreen** launch on Android, [here is a solution](https://stackoverflow.com/questions/50976545/ionic-3-hide-status-bar-during-splash-screen-show) — Faks, Sep 23 '19 at 14:00
For those getting an "unbound prefix" error from Cordova: You need to add the Android namespace (xmlns:android="http://schemas.android.com/apk/res/android") to the root widget element in the file config.xml — CWBudde, Jan 28 '20 at 17:04
After a recent update of my Cordova plugins I was getting an IllegalStateException. I fixed it by adding a parent style to the suggested solution: ` — Christian Z., Mar 09 '22 at 11:49

Black bars in Android with notch using cordova in Immersive mode

1 Answers1