Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making an Android app fullscreen with Cordova

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

like image 804
user2406993 Avatar asked Jun 19 '14 08:06

user2406993


People also ask

What SDK should install to use by the cordova for building Android application?

If you are using cordova-android 10.0. 0 or greater, install the Java Development Kit (JDK) 11. If you are using any version below cordova-android 10.0. 0, install the Java Development Kit (JDK) 8.

How do I test my cordova app on Android?

To run your app, all you have to do is enable USB debugging and Developer Mode on your Android device, then run ionic cordova run android --device from the command line. Enabling USB debugging and Developer Mode can vary between devices, but is easy to look up with a Google search.


2 Answers

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.

like image 90
paul Avatar answered Nov 07 '22 22:11

paul


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

like image 8
storm_to Avatar answered Nov 07 '22 23:11

storm_to