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

Answer 1

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

Answer 2

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.