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

Flowered

Have you placed your splash screen images in the correct folders? Which platforms are you building for? – Concerning

@Dawson Loudon I build it for android and there are default .png images in www/res/screen and android\assets\www\res\screen wich aren't showing... And there are also some default images in android\res\drawable-xhdpi... Not sure why, or if they need to be there because they are already in the res folder.. – Flowered

you will want to add your images (specifically named screen.png) to android\res\drawable and all of the \drawable- directories. The www\res\screen is only if you are using build.phonegap.com service, their docs aren't very clear on that. – Concerning

@Dawson Loudon but I was told in this post #21831895 that the splashscreen also works for the CLI build...!? – Flowered

@DawsonLoudon Loudon anyway, I added the filed to drawable folders but nothing happend. This applies for onlinebuild, cli build or eclipse build? – Flowered

@DawsonLoudon so.. do you have any idea what am i doing wrong? – Flowered

Did you add navigator.splashscreen.show(); into your javascript to onDeviceReady event? – Colorfast

possible duplicate of phonegap - splash screen for Android app – Banditry

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

Seclusion

Everything compiles good, but the moment I open the app it crashes without any message. – Peccadillo

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

Lepsy