How to get splash screens to show in android apps generated by Phonegap Build

I have lost time trying to figure out what ought to be a simple task, and hopefully, you will have found this post before doing the same.

I am part of a team developing the Kidoju web site and mobile application.

We are running the Phonegap CLI version 6.3.4 with cordova-plugin-splashscreen version 4.0.0. Our Phonegap application was started from a skeleton generated using phonegap create and all files in the www/res directory have been replaced with Kidoju assets.

After pushing to Github and updating code on Phonegap Build (PGB), we successfully installed application packages that would display a splash screen on iOS devices but not on Android devices.

Searching the web yields several recommendations among which:

1. Do not use the npm version of cordova-plugin-splashscreen, instead install using phonegap plugin add https://github.com/apache/cordova-plugin-splashscreen.git;
2. Manually copy files to the platforms subdirectories;
3. Add <preference name="SplashScreen" value="screen" /> to config.xml
4. Remove cordova-plugin-crosswalk-webview since Crosswalk is the culprit;

These do not work.

First step

Update: This is now fixed in Phonegap/Cordova 7 which properly uses density. Go to step 2 if using v7.

We have changed the file extension of our application package for Android from .apk to .zip and realized that the package generated by PGB was missing our splash screen resources although they were copied to platforms/android/res in our development environment.

The config.xml file generated by the Phonegap CLI is wrong, especially:

<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />

land-ldpi is not a density but a qualifier as documented at http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/

Therefore the correct splash tag is:

<splash qualifier="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />

After correcting all splash tags for the Android platform in config.xml, we confirmed that our splash screen resources were copied into the application package generated by PGB for Android but a splash screen would still not show.

Second step

We have then noticed that our splash screens were named screen.png in the subdirectories of platforms/android/res in our development environment, but splash.png in the corresponding subdirectories of res in the application package generated by PGB for Android:

We have therefore added the following preference to config.xml:

<platform name="android">
    <preference name="SplashScreen" value="splash" />
</platform>

This is how we got splash screens to show in android apps generated by Phonegap Build. I hope this helps.