apache / apache/cordova-android

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

Open
#844 13 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
3.8k
Forks
1.6k
Avg merge
16h 18m
Merged PRs (30d)
11

Description

# Bug Report
Hello, I'm not sure where I should open this issue. I have already tried [here](https://github.com/mesmotronic/cordova-plugin-fullscreen/issues/38) 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.

![android-bordeless-fullscreen-ultrawide](https://user-images.githubusercontent.com/21133515/65510499-5fe8bf80-ded5-11e9-9230-3c8b3059f577.png)

Of course I use the `` 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](https://stackoverflow.com/a/54369068/2908227) 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:

```xml


<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

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

```xml










```

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()](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/#statusbarhide) and the [immersiveMode() fullscreen plugin](https://github.com/mesmotronic/cordova-plugin-fullscreen) 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.

![android-theme-full](https://user-images.githubusercontent.com/21133515/65511395-6a0bbd80-ded7-11e9-935a-67b4ce0adb80.png)

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

Contributor guide

Open the contributing guide

Research direction

Begin with the config.xml and AndroidManifest.xml edits described in the report, then inspect styles.xml and the StatusBar.hide()/immersiveMode() launch behavior on Android 8.1 devices. Reproduce the black inset, status-bar, splash-screen, and UI-bar symptoms on a borderless device; done means the WebView and splash screen use the full display while fullscreen bars remain hidden.

Written by the indexing model from the issue text.

Assessment

Tech stack
android
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.