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
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With