Android Splash Screen not working with Cordova 5.0.0

Question

I can't get the splash screen images to load? It flashes white, then goes black and after a few seconds the app loads. My config.xml is as follows:

I'm building using Cordova 5.0.0 targeting Android. I have ported my app over from PhoneGap where it builds successfully and splash screen works.

config.xml

<platform name="android">
    <splash src="www/images/openingscenehdpi.png" density="hdpi"/>
    <splash src="www/images/openingsceneldpi.png" density="ldpi"/>
    <splash src="www/images/openingscenemdpi.png" density="mdpi"/>
    <splash src="www/images/openingscenexhdpi.png" density="xhdpi"/>                
    <preference name="android-minSdkVersion" value="14"/>
    <preference name="android-targetSdkVersion" value="19"/>
    <preference name="SetFullscreen" value="true"/>
    <preference name="orientation"  value="landscape"/>
</platform>

After reading all the other similar problems I have unsuccessfully tried the following, all resulting in no change to app behaviour:

1. Only having splash elements inside tags
2. Adding preference name="SplashScreen" value="screen" inside and outside platform tags
3. Adding preference name="SplashScreen" value="splash" inside and outside platform tags
4. Adding files direct into folders found in platforms/android/res
5. Adding spashscreen javscipt into index.html

I've followed the documentation and tried others advice, now I'm totally stumped..

Can anyone help ?

Answer 1

I tried the solutions in this page and still didn't work for me. I don't know if it's because of my Android or Cordova version. What I tried and worked (the first 2 steps are similar to the other solutions in this question, the difference is in the 3^rd point):

1. Installing the splash screen plugin:

   cordova plugin add cordova-plugin-splashscreen
   

2. Adding this line at the beginning of the onDeviceReady function:

   navigator.splashscreen.show();
   

   and this line at the end of the same function (when all the loading has been done):

   navigator.splashscreen.hide();
   

3. Defining every density splash screen indicating landscape or portrait (in my case I use the same image for all of them):

   <splash src="www/img/splash.png" density="land-hdpi"/>
   <splash src="www/img/splash.png" density="land-ldpi"/>
   <splash src="www/img/splash.png" density="land-mdpi"/>
   <splash src="www/img/splash.png" density="land-xhdpi"/>
   <splash src="www/img/splash.png" density="port-hdpi"/>
   <splash src="www/img/splash.png" density="port-ldpi"/>
   <splash src="www/img/splash.png" density="port-mdpi"/>
   <splash src="www/img/splash.png" density="port-xhdpi"/>
   

---

This is how the config.xml file looks in the parts related to the splash screen:

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="FadeSplashScreen" value="false"/>
<platform name="android">
    <allow-intent href="market:*" />
    <splash src="www/img/splash/splash.png" density="land-hdpi"/>
    <splash src="www/img/splash/splash.png" density="land-ldpi"/>
    <splash src="www/img/splash/splash.png" density="land-mdpi"/>
    <splash src="www/img/splash/splash.png" density="land-xhdpi"/>
    <splash src="www/img/splash/splash.png" density="port-hdpi"/>
    <splash src="www/img/splash/splash.png" density="port-ldpi"/>
    <splash src="www/img/splash/splash.png" density="port-mdpi"/>
    <splash src="www/img/splash/splash.png" density="port-xhdpi"/>
</platform>

(and the splash screen is hidden before the 5 seconds, because I hide it at the end of the onDeviceReady function)

Answer 2

Building on @Ben Jones' answer, I added the following Javascript to hide the splash screen at a point in my app where I know it is safe to show HTML content. If you omit this step, the splash screen will show for an arbitrary amount of time (5 seconds in sample XML).

navigator.splashscreen.hide();

Footnote: I test my application in a local browser, so I also check if plug-in exists, but this is optional:

if (navigator.splashscreen)
    navigator.splashscreen.hide();

Answer 3

Fixed! Documentation is lacking, you must to install the Plugin:

cordova plugin add cordova-plugin-splashscreen

Have a res folder at the root of your project with the files in the correct folders (next to config.xml) and the following in your config.xml:

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<platform name="android">
        <splash src="res/drawable-hdpi/screen.png" density="hdpi"/>
    <splash src="res/drawable-ldpi/screen.png" density="ldpi"/>
    <splash src="res/drawable-mdpi/screen.png" density="mdpi"/>
    <splash src="res/drawable-xhdpi/screen.png" density="xhdpi"/>
    <splash src="res/drawable-xhdpi/screen.png" density="xxhdpi"/>
    <splash src="res/drawable-xhdpi/screen.png" density="xxxhdpi"/> 
</platform>