Android Phonegap Compilations Adds Bar At The Bottom Of App That Should Not Be There?

I've looked everywhere and tried just about everything, but I can't get rid of this random black bar appearing at the bottom of my PhoneGap App. This is what I am seeing when I run

Solution 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 in your other thread, I stumbled upon a plugin:

https://github.com/mesmotronic/cordova-plugin-fullscreen

I'm now using this in the confix.xml

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

And this directly in first playe 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 harware navigation and software navigation devices. Maybe that could help you aswell.

Solution 2:

I am making a JS game using Phaser 2.6.2 and Cordova 6.3.1. I implemented all of @devjsp's suggestions but it didn't change anything for me, even though I thought it was working at first.

Edit: I originally had a different solution, but it did not work.

The issue is the title bar (an android specific construction) is not being hidden. @devjsp's suggestions all target the status bar. To fix this, I keep the fullscreen preference (not the plugin) to hide the status bar. Then I added the cordova-custom-config plugin to allow me to easily edit platform specific files from my config.xml. Then I turned off the titlebar in my config.xml.

Installation

cordova plugin add cordova-custom-config -save

Config.xml Setup

<preferencename="fullscreen"value="true" /><!-- Keep this --><platformname="android"><!-- cordova-custom-config plugin pref below --><preferencename="android-manifest/application/activity/@android:theme"value="@android:style/Theme.Black.NoTitleBar" /><!-- ... --></platform>

You can check that the title bar preference works successfully by building the application, opening platforms/android/AndroidManifest.xml and searching for the android:theme="@android:style/Theme.Black.NoTitleBar" string.

Update: It looks like Cordova 6.4.0 adds support for edit-config, which should replace the custom-config plugin. Haven't had time to play with it, but you can read the release notes here, and the edit-config documentation here.

Solution 3:

I had the exact same problem, fixed by not using the full screen setting at all and instead using the cordova status bar plugin: http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-statusbar/index.html#installation

Camparison Screenshot - Before and After

Install the plugin:

cordova plugin add cordova-plugin-statusbar

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

<pluginname="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);
});