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

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.

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