Phonegap Cordova - Black status bar on bottom after fullscreen

Question

I've been having this issue for as long as I can remember. I thought it might have just been from my phone or the emulation, but after publishing my app I still see this black rectangle at the bottom of screen, which looks like the status bar.

This happens after I have this in my config.xml

<preference name="android-build-tool"      value="gradle"   />   
<preference name="Fullscreen"              value="true"     />
<preference name="Orientation"             value="portrait" />

Screenshot:

UPDATE

I noticed the bottom black bar goes away if I MINIMIZE the game and click it right back up (weird).

I tried creating a new project and same thing happens once I put the full screen preference in config.xml.

It seems like the top bar transfers to the bottom >_>

Answer 1

I experienced the very same issue using only <preference name="Fullscreen" value="true" /> in my config.xml.

I initially thought of the Android status bar, but had some research on that topic and now got a very strong believe, that this issue comes from some other Android system UI not being hidden until the Cordova wrapper finished init, resulting in a wrong calculated size for the wrapper.

After a long search and trying out nearly everything you also mentioned, I stumbled upon a plugin:

cordova-plugin-fullscreen

I'm now using this in the config.xml

<preference name="Fullscreen" value="true" />
<preference name="AndroidLaunchMode" value="singleInstance" />
<preference name="DisallowOverscroll" value="true" />
<preference name="KeepRunning" value="true" />

And this directly in first play of the method triggered on deviceready

if (AndroidFullScreen) {
    // Extend your app underneath the status bar (Android 4.4+ only)
    AndroidFullScreen.showUnderStatusBar();

    // Extend your app underneath the system UI (Android 4.4+ only)
    AndroidFullScreen.showUnderSystemUI();

    // Hide system UI and keep it hidden (Android 4.4+ only)
    AndroidFullScreen.immersiveMode();
}

Tested so far with Android 6.0, 5.0.1 with hardware navigation and software navigation devices. Maybe that could help you aswell.

Answer 2

You can use cordova hooks to apply the android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen" fix to AndroidManifest.xml or you can use <edit-config> in config.xml starting with [email protected]:

<widget ... xmlns:android="http://schemas.android.com/apk/res/android"> ... <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:theme="@android:style/Theme.NoTitleBar.Fullscreen" /> </edit-config> ... </widget>

Source: Cordova fullscreen splash screen on Android still shows title bar

Answer 3

By default the DOM will only fill the space required to render its contents. Setting an element height:100%; is setting it's height relative to its parent element's height. If you want the visible element to be the height of the screen, you can set the element height:1vh; which is the height of your screen. This might cause some unexpected scrolling behavior though, so another method is to set all the parent elements height:100%;, starting with the html document. in css:

html, body, ... other parent elements ... {
   height:100%;
}

Answer 4

You might want to poll the display/canvas size for changes.

That black band looks like it's about the same size as the system's top status bar, so I suspect that your app is receiving the viewport size just before the status bar is removed/animated by the system.

Answer 5

Seems that the problem is with defining the dimensions of the canvas. Solved this a while ago so I'm not sure if this is what fixed it:

var c  = document.getElementById("canvas1");
var ctx  = c.getContext("2d");
var pixelRatio = window.devicePixelRatio || 1; // get pixel ratio of device
c.width = window.screen.width * pixelRatio;
c.height = window.screen.height * pixelRatio;
c.style.width = window.screen.width + 'px';
c.style.height = window.screen.height + 'px';

Also try deleting your index.css file