CODEWITHSUNDEEP
androidcordovasplash-screen
DroidOS
DroidOS

Reputation: 8880

Phonegap CLI builds for Android not showing splash screens

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

Upvotes: 0

Views: 151

Answers (1)

DroidOS
DroidOS

Reputation: 8880

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.

Upvotes: 1

Related Questions