Android Splash Screen not working with Cordova 5.0.0

4
votes

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 ?

3
androidcordova
You didn't explained the problem. – Murtaza Khursheed Hussain
I mean, what you are actually trying to achieve ? You post is not clear still – Murtaza Khursheed Hussain
ohhh now I got the thing. Well check you front page after splash, it probably have some thing which is taking time to load. Best practice is to load resources after you page load. – Murtaza Khursheed Hussain
did you add the splashscreen plugin – Mr. N.V.Rao
No not using splashscreen plugin, I'm wanting to keep it simple using config.xml which works nicely with PhoneGap and the docuemntaion says it should work but not for me :-(. – Ben Jones

3 Answers

10
votes

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>
0
votes

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();
0
votes

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 3rd 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)