phonegap build not showing splashscreen

Question

This question has been asked in the past but none of the answers that I have found have solved the problem for me.

I am trying to make a very simple phonegap app to show a splash screen and announce when it is ready. It is just a test app to work out how to use the splash screen.

• I am using phonegap build through the phonegap cli.
• phonegap version 3.5.0
• tested on android only

I have a www folder where config.xml is located. All the splashscreens are located within www/res/screen/<platform>/filename.png

my config file is

<?xml version='1.0' encoding='utf-8'?>
<widget id="uk.co.workshop14.splashscreen-example-app" version="0.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>splashscreen-example-app</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        Peter
    </author>

    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="7" />
    <preference name="android-installLocation" value="auto" />

    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.splashscreen" />

    <icon src="icon.png" />
    <icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
    <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />

    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />

    <access origin="*" />
</widget>

Answer 1

After much frustration, I thankfully found this thread that had various suggestions.

Simply changing the density attribute to qualifier on the splash elements in the config.xml file ended up fixing this issue for me. I'm including the plugin declaration in case it helps.

<plugin name="cordova-plugin-splashscreen" spec="~5.0.2" />

<platform name="android">
    <icon qualifier="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
    <icon qualifier="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
    <icon qualifier="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
    <icon qualifier="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
    <icon qualifier="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
    <icon qualifier="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
    <splash qualifier="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
    <splash qualifier="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
    <splash qualifier="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
    <splash qualifier="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
    <splash qualifier="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
    <splash qualifier="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
    <splash qualifier="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
    <splash qualifier="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
    <splash qualifier="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
    <splash qualifier="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
    <splash qualifier="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
    <splash qualifier="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>

Answer 2

Phonegap updates their build system regularly, so you may also want to keep in track of those changes. Till yesterday, I was seeing splash on android but didn't see it working today (on 6.5.0), even though I had not made any changes to config.xml

After adding the following preferences to their recently introduced builder version preference, it works again.

<preference name='phonegap-version' value='cli-6.5.0' />
<preference name='pgb-builder-version' value='2' />

builder-version 1 for old builder and 2 for the new which uses cordova like builder.

Read the following pgb blog post for more details.

https://blog.phonegap.com/phonegap-7-0-1-now-on-build-and-it-includes-some-important-changes-89087fe465f5

Answer 3

In my Case I just Added <preference name="ShowSplashScreenSpinner" value="false"/> it does the Magic.

Here is the Android part in my config.xml

    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="ShowSplashScreenSpinner" value="false"/>
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
   <splash src="res/screen/android/splash-land-hdpi.png" density="land-ldpi"/>
   <splash src="res/screen/android/splash-land-hdpi.png" density="land-mdpi"/>
   <splash src="res/screen/android/splash-land-hdpi.png" density="land-xhdpi"/>
   <splash src="res/screen/android/splash-land-hdpi.png" density="port-hdpi"/>
   <splash src="res/screen/android/splash-land-hdpi.png" density="port-ldpi"/>
   <splash src="res/screen/android/splash-land-hdpi.png" density="port-mdpi"/>
   <splash src="res/screen/android/splash-land-hdpi.png" density="port-xhdpi"/> 
 </platform>

Answer 4

After researching and trying a lot, finally this worked for me:

Add this to your preferences:

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

and add this before your first splash image src entry:

<splash src="splash.png" />

Maybe important to mention because i did not know it:

If you use the online phonegap apk converter with hydration enabled to your application, u'll have to rebuild your app completly instead of just update it. This will help you also with preferences like "orientation" or "fullscreen" !

Answer 5

You don't have the default splash tag which is

<splash src="splash.png" />

It's in the documentation: http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/

Update

If you are using phonegap version cli-5.1.1 or above, you need the new splashscreen plugin from npm.

Here's the new plugin on github, there you can find how to use it:

https://github.com/apache/cordova-plugin-splashscreen

Answer 6

You should (as in must) put your splash.png-s inside www/res/drawable-*/splash.png and icon.png-s inside www/res/drawable-*/icon.png so that to have this structure under www folder

res
├── drawable-hdpi
│   └── icon.png
├── drawable-land-hdpi
│   └── splash.png
├── drawable-land-ldpi
│   └── splash.png
├── drawable-land-mdpi
│   └── splash.png
├── drawable-land-xhdpi
│   └── splash.png
├── drawable-land-xxhdpi
│   └── splash.png
├── drawable-land-xxxhdpi
│   └── splash.png
├── drawable-ldpi
│   └── icon.png
├── drawable-mdpi
│   └── icon.png
├── drawable-port-hdpi
│   └── splash.png
├── drawable-port-ldpi
│   └── splash.png
├── drawable-port-mdpi
│   └── splash.png
├── drawable-port-xhdpi
│   └── splash.png
├── drawable-port-xxhdpi
│   └── splash.png
├── drawable-port-xxxhdpi
│   └── splash.png
├── drawable-xhdpi
│   └── icon.png
├── drawable-xxhdpi
│   └── icon.png
└── drawable-xxxhdpi
    └── icon.png

And your config.xml should contain these lines

    <splash qualifier="land-hdpi" src="res/drawable-land-hdpi/splash.png" />
    <splash qualifier="land-ldpi" src="res/drawable-land-ldpi/splash.png" />
    <splash qualifier="land-mdpi" src="res/drawable-land-mdpi/splash.png" />
    <splash qualifier="land-xhdpi" src="res/drawable-land-xhdpi/splash.png" />
    <splash qualifier="land-xxhdpi" src="res/drawable-land-xxhdpi/splash.png" />
    <splash qualifier="land-xxxhdpi" src="res/drawable-land-xxxhdpi/splash.png" />
    <splash qualifier="port-hdpi" src="res/drawable-port-hdpi/splash.png" />
    <splash qualifier="port-ldpi" src="res/drawable-port-ldpi/splash.png" />
    <splash qualifier="port-mdpi" src="res/drawable-port-mdpi/splash.png" />
    <splash qualifier="port-xhdpi" src="res/drawable-port-xhdpi/splash.png" />
    <splash qualifier="port-xxhdpi" src="res/drawable-port-xxhdpi/splash.png" />
    <splash qualifier="port-xxxhdpi" src="res/drawable-port-xxxhdpi/splash.png" />
    <icon qualifier="hdpi" src="res/drawable-hdpi/icon.png" />
    <icon qualifier="ldpi" src="res/drawable-ldpi/icon.png" />
    <icon qualifier="mdpi" src="res/drawable-mdpi/icon.png" />
    <icon qualifier="xhdpi" src="res/drawable-xhdpi/icon.png" />
    <icon qualifier="xxhdpi" src="res/drawable-xxhdpi/icon.png" />
    <icon qualifier="xxxhdpi" src="res/drawable-xxxhdpi/icon.png" />

For full picture, here is the android section of my config.xml

<platform name="android">
    <allow-intent href="market:*" />
    <preference name="android-minSdkVersion" value="14" />
    <preference name="android-targetSdkVersion" value="22" />
    <preference name="SplashScreen" value="splash" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <splash qualifier="land-hdpi" src="res/drawable-land-hdpi/splash.png" />
    <splash qualifier="land-ldpi" src="res/drawable-land-ldpi/splash.png" />
    <splash qualifier="land-mdpi" src="res/drawable-land-mdpi/splash.png" />
    <splash qualifier="land-xhdpi" src="res/drawable-land-xhdpi/splash.png" />
    <splash qualifier="land-xxhdpi" src="res/drawable-land-xxhdpi/splash.png" />
    <splash qualifier="land-xxxhdpi" src="res/drawable-land-xxxhdpi/splash.png" />
    <splash qualifier="port-hdpi" src="res/drawable-port-hdpi/splash.png" />
    <splash qualifier="port-ldpi" src="res/drawable-port-ldpi/splash.png" />
    <splash qualifier="port-mdpi" src="res/drawable-port-mdpi/splash.png" />
    <splash qualifier="port-xhdpi" src="res/drawable-port-xhdpi/splash.png" />
    <splash qualifier="port-xxhdpi" src="res/drawable-port-xxhdpi/splash.png" />
    <splash qualifier="port-xxxhdpi" src="res/drawable-port-xxxhdpi/splash.png" />
    <icon qualifier="hdpi" src="res/drawable-hdpi/icon.png" />
    <icon qualifier="ldpi" src="res/drawable-ldpi/icon.png" />
    <icon qualifier="mdpi" src="res/drawable-mdpi/icon.png" />
    <icon qualifier="xhdpi" src="res/drawable-xhdpi/icon.png" />
    <icon qualifier="xxhdpi" src="res/drawable-xxhdpi/icon.png" />
    <icon qualifier="xxxhdpi" src="res/drawable-xxxhdpi/icon.png" />
</platform>

Now execute phonegap remote build android and open the log file from phonegap build.

The log file is located at https://build.phonegap.com/apps/X/logs/android/build/ where X is your App ID

In the log you should see something like

...
[crunch] Processing image to cache: /project/res/drawable-hdpi/icon.png => /project/bin/res/drawable-hdpi/icon.png
[crunch]   (processed image to cache entry /project/bin/res/drawable-hdpi/icon.png: 0% size of source)
[crunch] Processing image to cache: /project/res/drawable-land-ldpi/splash.png => /project/bin/res/drawable-land-ldpi/splash.png
...

If you see these lines then your splash screen should work.

Also note this line in config.xml

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

This tells the phonegap build that your splash screen png files are named as splash.png. This way the system is able to locate them.

Answer 7

I had the same problem and I solved it by converting the splash image to be .png instead of .jpg.

Answer 8

Cordova implements device-level APIs as plugins. Use the CLI's plugin command, described in The Command-Line Interface, to add this feature for a project: Please use following link for more information

http://docs.phonegap.com/en/3.3.0/cordova_splashscreen_splashscreen.md.html

Answer 9

I solved the problem by adding

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

This is an additional preference to those generated when using phonegap create. I also can't find any good documentation on this.

In addition I do not require a default splashscreen as described in some questions when I add this preference