How to display Splashscreen in Phonegap 3.3

Question

How to display the splashscreen correctly? I'm using CLi local build and I heared it's compatible. I added the plugin with: phonegap plugin add org.apache.cordova.splashscreen And this is my config file:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.Snap.What" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>WhatSnap</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        PhoneGap Team
    </author>
    <feature name="http://api.phonegap.com/1.0/device" />
    <preference name="permissions" value="none" />
    <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="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="7" />
    <preference name="android-installLocation" value="auto" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="10000" />
    <icon src="icon.png" />
    <icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
    <icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
    <icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
    <icon gap:density="xhdpi" gap:platform="android" 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:density="ldpi" gap:platform="android" src="res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:density="mdpi" gap:platform="android" src="res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:density="hdpi" gap:platform="android" src="res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:density="xhdpi" gap:platform="android" 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="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="http://127.0.0.1*" />
</widget>

What else should I add because the splashscreen isn't displaying?

Answer 1

Is it safe to assume that you are building for Android? If so, follow the instructions on the PhoneGap documentation page: http://docs.phonegap.com/en/3.4.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

Make sure you have these in config.xml:

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />

then put copies of your splash screen image (each having the correct resolution for the target platform) in the drawable* folders, like this:

platforms/android/res/drawable/screen.png
platforms/android/res/drawable-hdpi/screen.png
platforms/android/res/drawable-ldpi/screen.png
platforms/android/res/drawable-mdpi/screen.png
platforms/android/res/drawable-xhdpi/screen.png

Also, suggest removing this from your config file:

<preference name="auto-hide-splash-screen" value="true" />

Answer 2

You need to following these steps:

 Add these to res/config.xml
 <preference name="SplashScreen" value="screen" />
 <preference name="SplashScreenDelay" value="10000" />

Then Add your screens in png format to the following folders

"Your Project Directory"\platforms\android\bin\res\crunch\drawable-land-hdpi
"Your Project Directory"\platforms\android\bin\res\crunch\drawable-land-ldpi
"Your Project Directory"\platforms\android\bin\res\crunch\drawable-land-mdpi
"Your Project Directory"\platforms\android\bin\res\crunch\drawable-land-xhdpi
"Your Project Directory"\platforms\android\bin\res\crunch\drawable-port-hdpi
"Your Project Directory"\platforms\android\bin\res\crunch\drawable-port-ldpi
"Your Project Directory"\platforms\android\bin\res\crunch\drawable-port-mdpi
"Your Project Directory"\platforms\android\bin\res\crunch\drawable-port-xhdpi

An also in these folders

 "Your Project Directory"\platforms\android\res\crunch\drawable-land-hdpi
"Your Project Directory"\platforms\android\res\crunch\drawable-land-ldpi
"Your Project Directory"\platforms\android\res\crunch\drawable-land-mdpi
"Your Project Directory"\platforms\android\res\crunch\drawable-land-xhdpi
"Your Project Directory"\platforms\android\res\crunch\drawable-port-hdpi
"Your Project Directory"\platforms\android\res\crunch\drawable-port-ldpi
"Your Project Directory"\platforms\android\res\crunch\drawable-port-mdpi
"Your Project Directory"\platforms\android\res\crunch\drawable-port-xhdpi

Refresh Your Project and then "Run".You are DONE.

Make sure the name of your screens is "screen.png" otherwise you may got an error in androidmanifest.xml and you have to change androidmanifest.xml also best approach is that your screens must b name as "screen.png".