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>

score 22 · Accepted Answer · edited Jun 20 '20 at 09:12

22

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 20 '14 at 17:00

Subjective Effect

1,465
2
17
37

1

this was the one. In the end I don't use the default splash screen (providing a resolution specific one) but the program throws odd errors if missing a default splash – Peter Saxton Oct 29 '14 at 10:56
2

This doesn't really solve the problem. The default splash screen image is added to the apk on build, but the other images are ignored. – Sergiu Feb 10 '15 at 18:07
If this doesn't help then there is something else wrong in your build. The solution I gave was and is specific to the OPs problem. – Subjective Effect Feb 10 '15 at 18:10
@Sergiu See if this post in Adobe forums helps you: https://forums.adobe.com/message/9147052#9147052 – Akronix Nov 18 '16 at 16:54
For me, the solution had to do with combining this answer with the one below. And some other minor changes. You can find my config.xml in the link of the reply I've posted just above this one. – Akronix Nov 18 '16 at 16:56

score 7 · Answer 2 · answered Aug 19 '14 at 14:22

7

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

answered Aug 19 '14 at 14:22

Peter Saxton

4,466
5
33
51

Some additional information for android: The only "documentation" on this topic I found was in the `CordovaLib/src/org/apache/cordova/CordovaActivity.java`. If you examine the method `loadUrl` the value for the splash screen is loaded from preferences.getString("SplashScreen", null) and than with `getResources().getIdentifier(splash, ...)`. The problem is that the value for `SplashScreen` is not always `"splash"`. In my case it was "screen". You can look up the value in `platforms/android/ant-build/R.txt` – mrak Mar 11 '15 at 23:49
1

solved it for me (screen vs. splash). – tribe84 Apr 29 '15 at 17:48
Where `value` is the directory where your splash screens are located in. [See this post for more info](https://forums.adobe.com/message/9147052#9147052) – Akronix Nov 18 '16 at 16:58

score 2 · Answer 3 · answered Jan 12 '17 at 20:14

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" !

score 0 · Answer 4 · answered Oct 29 '14 at 06:20

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

score 0 · Answer 5 · edited Nov 03 '15 at 22:35

0

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

edited Nov 03 '15 at 22:35

Roope Hakulinen

7,326
4
43
66

answered May 06 '15 at 15:15

jgleal

23
1
6

score 0 · Answer 6 · answered Jul 09 '16 at 17:42

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.

score 0 · Answer 7 · answered Aug 30 '17 at 14:19

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>

score 0 · Answer 8 · answered Jan 29 '18 at 00:06

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

score 0 · Answer 9 · answered Jun 01 '18 at 22:14

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>

phonegap build not showing splashscreen

9 Answers9

Update

Linked