Borderless/notch devices doesn't display a fully fullscreen mode

[Faksprod]

Bug Report

Hello, I'm not sure where I should open this issue. I have already tried here but the issue has been closed quickly because:

it appears to be a wider Cordova issue rather than a plugin issue.

Problem

The webview isn't taking the whole space on new Android wide and borderless devices (such as Samsung Galaxy s10, Google Pixel 3XL or OnePlus 6T). As you can see on the attached file, the app is disturbed/displaced from the left side (or top side in portait) which is displaying a black area.

Of course I use the <preference name="Fullscreen" value="true" /> in my config.xml.

What is expected to happen?

The app webview should be displayed correctly, 100% fullscreen, without that black area. My app works and displays well on all 'normal' Android devices.

Information

I found some help on StackOverflow about how to let the webview taking 100% of the screen. First you have to create a new styles.xml at the www/ root folder. The styles.xml files contains:

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

Then in the config.xml files you have to custom/edit with:

<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>

Ok well, this fix the problem. But! This causes new issues such as (see attached file below):

1 - the Status Bar can't be hidden anymore during app launch. I tried all methods with StatusBar.hide() and the immersiveMode() fullscreen plugin but nothing helps.

2 - Also, the Splaschreen can't appears fully fullscreen. There is still an empty area on left side even if the app will fit all the screen area after the Splaschreen sequence. I tried to create a splash image larger than the device, it doesn't works. Plus, you get the UI (buttons bar) displaying on the right side for a few seconds at the app launch.

Did you guys encountered same issues with those borderless devices? What method we should use to let the webview taking 100% of the screen? Any suggestions would be really welcome. Thanks.

Environment, Platform, Device

Mac OS Mojave 10.14.6 I do my test on devices by uploading APK on the Live App service from Browserstack (which launch real devices through the cloud, not emulators).

Version information

• Cordova 9.0.1
• Android 8.1.0

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[breautek]

Transferred to cordova-android because of:

it appears to be a wider Cordova issue rather than a plugin issue.

[dpogue]

@Faksprod Do you have a meta name="viewport" tag in your HTML, and does the content include viewport-fit=cover?

This probably won't help with the splashscreen issue, but it should be possible to make your web content go edge-to-edge.

[Faksprod]

@dpogue Yes I have a viewport meta tag in my HTML and yes I use fit cover. <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width, height=device-height, viewport-fit=cover" />

This doesn't help to make the app edge-to-edge on new Android wide and borderless devices...

[breautek]

I think the next step to help move this forward is to create a reproduction repo that demonstrates this issue. I don't own an android device that has notches, but something like that should reproduce in an emulator.

https://github.com/apache/cordova-contribute/blob/master/create-reproduction.md

[onelsonic]

hi there, not sure if this can help, I see that the AndroidManifest.xml generated by cordova contains the following :

            android:launchMode="singleTop"
            android:theme="@android:style/Theme.DeviceDefault.NoActionBar"

then a native correct full screen android app contains the following in the AndroidManifest.xml :

	android:launchMode="singleTask"
	android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"

I may be wrong here but this worth checking, then AndroidManifest.xml is automatically generated by cordova so not sure where this can be changed in order to check it.

[Faksprod]

@onelsonic Thanks for help. If I use @android:style/Theme.Black.NoTitleBar.Fullscreen instead of @style/Full in my AndroidManifest.xml then the webview can't take the whole space on new Android wide and borderless devices, which is what I'm trying to get.

However the @android:style/Theme.Black.NoTitleBar.Fullscreen works great for non wide bordeless device.

[onelsonic]

@Faksprod try to add the following in the config file and let me know.

	<platform name="android">
		<preference name="android-minSdkVersion" value="23" />
		<preference name="android-targetSdkVersion" value="26" />
		<preference name="android-maxSdkVersion" value="29" />
	</platform>

[Faksprod]

@onelsonic I tried but it doesn't change anything. During app launch, still having the statusbar and UI displayed during 5 seconds then dismiss.

To use 100% of the available screen on borderless device, no choice, I have to add in my config.xml lines of codes below :

<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>

Because of that, no way to remove statusbar and UI at app launch...

[onelsonic]

alright, this need more digging then. probably useful to package a repo and the devise details.

[Rigwarl]

StatusBar and UI show in splashscreen can be related to this pr https://github.com/apache/cordova-android/pull/733

[karimlahbach]

Hi everyone is this a solution for this problem because i'm still having this issue

[Faksprod]

Users on a borderless device can choose the display behavior of any apps from their settings (see attached capture). Go to Settings > Display > Full Screen apps > Choose you app > Select Fullscreen instead of Auto

Bad point #1: Some device doesn't propose this option from their settings (such as Google Pixel phone). So you will be stuck with a non 100% full screen app on these devices.

Bad point #2: Users have to set this behavior manually and most of them never heard about this option. So you will have for exemple to display a message in your app saying "if the app doesn't fit 100% of your device go to change your display settings, bla bla bla..." = very poor user experience.

Any chance the Cordova Android team investigate on that point? Today most of device are borderless and even your Hello World app demo doesn't fit 100% of a borderless screen.

Thanks.

[Faksprod]

@karimlahbach after a day of test I finally found something for a 100% fullscreen app (even on bordeless devices), no title bar and no navigation bar.

You have to re-write/overwrite the default Android theme which can be find in the file app/src/main/AndroidManifest.xml. We will ask the app to take our own theme with its own rules written in the files app/src/main/res/values/strings.xml.

Yo can do this manually or you can do it using the helpful <edit-config> tag in the Cordova config.xml file.

<platform name="android">

    ...your code...

    <!--
        The first edit-config tag will replace the Theme.AppCompat.NoActionBar in the file app/src/main/AndroidManifest.xml
        We indicate that we want to use our own style called MyFullTheme (or whatever you want)
    -->
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
        <activity android:theme="@style/MyFullTheme"/>
    </edit-config>

    <!--
        In this second edit-config tag we can write our new theme rules/spec
        This rules will be written in the file app/src/main/res/values/strings.xml and will overwrite the Theme.AppCompat.NoActionBar default theme
    -->

    <edit-config file="strings.xml" mode="add" target="/resources">
        <style name="MyFullTheme" parent="@style/Theme.AppCompat.NoActionBar">
            <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item><!-- Use 100% screen size even on borderless device / notch device -->
            <item name="android:windowTranslucentStatus">true</item>
            <item name="android:windowTranslucentNavigation">true</item>
            <item name="android:windowFullscreen">true</item><!-- Use 100% screen size -->
            <item name="android:windowActionBar">false</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowContentOverlay">@null</item>
        </style>
    </edit-config>

    ...your code...

</platform>

Very important: using the <edit-config>tag will throw a parsing error when you will try to build the app. Before building, you have to add a key:value at the <widget> tag at the top of the config.xml file. Add the xmlns:android="http://schemas.android.com/apk/res/android key in the <widget tag> like below.

<?xml version='1.0' encoding='utf-8'?>
    <widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

    ...your code...

</widget>

Hope this can help!