Phonegap Cordova - Black status bar on bottom afte

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

I am facing the same problem. It happens mostly in landscape mode for me. I have a samsung s7 and a samsung tab2. on the s7 it happens once over 20 times on the tab2 it happens all the time. I can detect when something is wrong by checking the body height versus the screenheight ( in correlation with the pixel ratio )

I applied the AndroidFullScreen and the trick So far everything is fixed on the tablet, no more dark bar at the bottom. But for the s7 I still have this issue. The s7 has a pixel ratio of 4 the tab2 the pixel ratio is 1

Answer 4

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 5

I had the same problem. Using the cordova status bar plugin fixed it for me: http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-statusbar/index.html#installation

Install the plugin:

cordova plugin add cordova-plugin-statusbar

Remove the fullscreen setting in config.xml and add the plugin instead:

<plugin name="cordova-plugin-statusbar" spec="2.2.2" />

Call the StatusBar.hide() to hide the status bar in JavaScript. Example:

$(document).ready(function(){
    document.addEventListener("deviceready", function(){
        StatusBar.hide();
    }, false);
});

Camparison Screenshot - Before and After

Answer 6

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