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:
- Do not use the npm version of cordova-plugin-splashscreen, instead install using
phonegap plugin add https://github.com/apache/cordova-plugin-splashscreen.git;
- Manually copy files to the
<preference name="SplashScreen" value="screen" />to
- Remove cordova-plugin-crosswalk-webview since Crosswalk is the culprit;
These do not work.
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
.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.
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.
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
<preference name="SplashScreen" value="splash" />
This is how we got splash screens to show in android apps generated by Phonegap Build. I hope this helps.