Phonegap CLI builds for Android not showing splash screens

Question

The Phonegap CLI documentation on the subject of Splashscreens and Icons suggests the following

SplashScreen (string, defaults to splash): The name of the file minus its extension in the res/drawable directory. Various assets must share this common name in various subdirectories.

<preference name="SplashScreen" value="mySplash"/>

I configured my Phonegap CLI project as follows

project folder
|
res
  |
  ---port-ldpi.png
  |
  ---land-ldpi.png
  |
  --- ...
  |
  --- land-xhdpi.png

With that done I wrote up my project level config.xml file

<preference name="SplashScreenDelay" value="12000"/>
<preference name="SplashScreen" value="screen"/>        
<splash src="res/port-ldpi.png" density="port-ldpi"/>
<splash src="res/land-ldpi.png" density="land-ldpi"/>
<splash src="res/port-mdpi.png" density="port-mdpi"/>
<splash src="res/land-mdpi.png" density="land-mdpi"/>
<splash src="res/port-hdpi.png" density="port-hdpi"/>
<splash src="res/land-hdpi.png" density="land-hdpi"/>
<splash src="res/port-xhdpi.png" density="port-xhdpi"/>
<splash src="res/land-xhdpi.png" density="land-xhdpi"/>

I then issued a phonegap build android --release -d >> /tmp/result.txt and examined the output in /tmp/result.txt. I showed the following lines

copying image from /path/to/my/project/res/port-ldpi.png to     
/path/to/my/project/platforms/android/res/drawable-port-ldpi/screen.png

copying image from /path/to/my/project/res/land-ldpi.png to     
/path/to/my/project/platforms/android/res/drawable-land-ldpi/screen.png

.....

copying image from /path/to/my/project/res/land-xhdpi.png to     
/path/to/my/project/platforms/android/res/drawable-land-xhdpi/screen.png

Finally, I examined the generated APK by opening it in 7-zip. In the res folder I found the following

drawable-port-ldpi-v4/screen.png
drawable-land-ldpi-v4/screen.png
...
drawable-land-xhdpi-v4/screen.png

The images beign the ones I supplied in my /project/res folder. Finally, I checked the output to ensure that it was terminating with a Command finished with error code 0: line.

I then installed my application and ran it - no splash screen.

For good measure - though it makes little sense as a requirement - I retried the above after wrapping the splash & icon bits of the config.xml file in a

<platform name='android'>


</platform>

section - it made no difference. The strange thing is that icons assigned in precisely the same way work perfectly. I wanted to be sure that I was in fact supplying a splash screen for the resolution of my Huwaei Holly phone where I was testing it all so I used slightly different icon images. The installation displayed the XHDPI icon so by rights when the app starts up it should display the XHDPI splash screen

This is a frequently discussed subject but I fail to see that I am doing something wrong here.

For completeness I should mention

Phonegap CLI version : 5.3.6
Tested on Honor Holly, Android version 4.4.2

DroidOS DroidOS · Accepted Answer · 2015-11-20T18:09:20

I am posting the answer for the benefit of anyone running into this thread. The Cordova/Phonegap CLI documentation on the subject of splashscreens is very confusing. Here are a few tips to help you along

When you build the config.xml file you need to specify the locations of the various splashscreen images in the format <splash src="res/{$name}.9.png" density="{$name}"/>. The .9. is optional - use if if you are using 9 patch images
You also need to have the line <preference name="SplashScreen" value="screen"/>. This is invariant. Contrary to what the documentation seems to imply you have no choice over the value - screen and only screen will work.
The original location of the images does not matter - it is best to place it in a folder inside the project folder, res in my case. If you place it inside the www folder you end up with two copies of your image - one of which is never used.
When Phonegap CLI builds your project it will copy your images to platforms/android/res/drawable-port|land-??dpi-v4. I am not sure why v4 but that is the wya it is. It is these images that are used to show the splash screen
most important of all On the Android splash screens do not show up at startup automatically. For them to show up you must do two things
1. Include the cordova-plugin-splashscreen plugin in your project
2. Call navigator.splashscreen.show() - typically from the deviceReady event

Finally, to control the duration of the splash display you need to specify <preference name="SplashScreenDelay" value="..."/> where the value is in milliseconds.

It would help a lot of developers if the Cordova documentation had the grace to mention that on the Android the splashscreen does not display automatically.

Phonegap CLI builds for Android not showing splash screens

1 Answers