Brtdku

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:

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.

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

Thank you.

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