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

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

• javascript
• android
• cordova
• config
• statusbar

• 1 Can you provide details on cordova versions, android versions any frameworks etc? – Mark Commented May 29, 2016 at 3:17
• Did you ever find a solution? I have the exact same problem. – rockstardev Commented Jun 11, 2016 at 18:48
• @coderama It may sound crazy but can you try setting proper size launch iamges and check once as this causes issue in iOS – Gandhi Commented Jun 12, 2016 at 13:02
• This specifically happens to me in Android. I haven't gotten around to testing IOS yet. I added bounty to this question and started another question summarizing my efforts here --> stackoverflow.com/questions/37768186/… ... I can't be the only one stick on this... – rockstardev Commented Jun 12, 2016 at 15:25

7 Answers 7

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.

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

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%;
}

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.

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

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

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