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="[email protected]" 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>

Solution 1

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

Solution 2

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

Solution 3

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

Comments

[Peter Saxton]

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

[Sergiu]

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.

[Subjective Effect]

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.

[mrak]

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

[tribe84]

<preference name="SplashScreen" value="screen"/> solved it for me (screen vs. splash).

[Akronix]

@Sergiu See if this post in Adobe forums helps you: forums.adobe.com/message/9147052#9147052

[Akronix]

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]

Where value is the directory where your splash screens are located in. See this post for more info