Making an Android app fullscreen with Cordova

Question

I'm a newcomer to Cordova, and am trying to make an app that appears full screen (hiding the taskbar at the bottom of Android).

I have looked online and there seem to be two different techniques.... I have tried adding

<preference name="Fullscreen" value="true" /> to my config.xml

so that it reads

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <preference name="loglevel" value="DEBUG" />
    <preference name="AndroidLaunchMode" value="singleTop" />
    <feature name="App">
        <param name="android-package" value="org.apache.cordova.App" />
    </feature>
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="Fullscreen" value="true" />
    <preference name="WebViewBounce" value="true" />
    <preference name="Orientation" value="landscape" />
    <preference name="HideKeyboardFormAccessoryBar" value="true" />
</widget>

The status bar still remains at the bottom (although the app does fix at landscape). I have also tried the other advice which involves adding lines to hellocordova.java. This imports android.view.WindowManager; and then adds lines after loading index.html:

(WindowManager.LayoutParams.FLAG_FULLSCREEN,                   WindowManager.LayoutParams.FLAG_FULLSCREEN WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

This method stops the app from compiling with cordova build android.

Any tips of where I can be looking.

I'm using Android 4.1.1

Pylorus

Answer 1

Unfortunately the Plugin didn't work for me, so I managed it with these steps:

Add the Fullscreen preference in your config.xml file:

<preference name="Fullscreen" value="true" />

Find the AndroidManifest.xml in platforms/android/ and add the Fullscreen Theme

<manifest ...>
    <application ...>
        <activity ... android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">

Finally, and this was the harder step, use the Immersive Full-Screen Mode. The only way I got it to work was directly extending the CordovaApp.java file in plattforms/android/src/com/example/hello/

...
import android.view.View;

//Cordova onCreate function....
//public void onCreate()
//...    

//this is the important thing:
@Override
public void onWindowFocusChanged(boolean hasFocus) {
  super.onWindowFocusChanged(hasFocus);
  View decorView = getWindow().getDecorView();
  if(hasFocus) {
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_FULLSCREEN
                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
    }
}

I am not an Java Developer (jet) so I can't explain in detail what happend, but it seems to work. Keep in mind that Cordova creates the platforms/android folder, so its possible that it will be overwritten by some actions.

Britnibrito

I've added a fullscreen preference in config.xml and StatusBar.hide() in platform.ready() and the application is started at fullscreen and everything is ok. But when i click on some input field and start typing and hide the keyboard, the soft keys don't disappear anymore and i don't know how to hide them. Also the soft keys shows at the bottom and hide small part of the screen content. – Betjeman

Yes, we discovered the same thing. Finally we root the device and disable the system ui completely. As a super user on the device run pm disable com.android.systemui - but you will need to provide some controls to your users. – Britnibrito

I've found there's nothing you can do about this except replace the input field with your own keyboard! Seems crazy but thats where I'm at. I already am using a numpad from mobiscroll and select box inputs so whats the difference really. – Chrissa

Answer 2

The bottom bar on Android is called the Navigation Bar and the mode you are looking for is called Immersive Mode. Those terms may help you with future web searches. Try using this plugin https://github.com/mesmotronic/cordova-fullscreen-plugin

Dripstone

<preference name="Fullscreen" value="true" /> added to config.xml and the plugin "cordova - plugin - fullscreen" worked for me. – Grimace

Answer 3

As of Android 5.0.0 you don't need the cordova-fullscreen-plugin anymore! Only adding <preference name="Fullscreen" value="true" /> to config.xml works great!

Kaye