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
platforms
subdirectories; - Add
<preference name="SplashScreen" value="screen" />
toconfig.xml
- 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.