CODEWITHSUNDEEP
androidapachecordovafullscreensplash-screen
obscure
obscure

Reputation: 12891

On Android the statusbar and the navigation bar are still visible while the splashscreen is showing. How to get rid of it?

This is a weird problem with Apache Cordova. I've set up an application to be packaged for Android. Since Android 4.4 there's the immersive mode. So when I add:

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

to config.xml and start the application, I can see the status bar going out of the screen to the top and the navigation bar gets out of the screen to the bottom - as expected.

As soon as I utilize Cordova's splashscreen plugin using:

cordova plugin add cordova-plugin-splashscreen

and add a splashscreen to config.xml like so:

<splash src="res/screen/android/splashScreen.png" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />

things are a little different.

During the time the splashscreen is visible, the screen looks like this:

Screenshot showing splashscreen

As you can see, the navigation and status bar are still visible. Well, as soon as the splashscreen disappears, I can see the status/navigation bar moving out of the screen - thus it looks like now it's switching to immersive mode. Unfortunately this messes up the layout of the application. It seems like the actual application is now put in-between the area, where the status bar and the navigation bar have been. So instead of something fullscreen I have black borders at the top and the bottom. This looks a little something like this:

Screenshot of the application

Obviously Android returns the wrong screen dimensions because the status and the navigation bar were still there. How can I force Cordova to switch to immersive mode as soon as the splashscreen is on screen?

Upvotes: 1

Views: 588

Answers (1)

MetaSnarf
MetaSnarf

Reputation: 6187

Question: does cordova have uses the Android native's styles and Manifest(pretty sure it does)? If so you can:

Use a full screen theme/style on your activity.

On your styles.xml:

<style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

and then use it in Manifest.

<activity android:name=".ActivityName"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar.Fullscreen"/>

Upvotes: 1

Related Questions