8

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?

Alex Stanese
  • 735
  • 4
  • 16
  • 33
  • Have you placed your splash screen images in the correct folders? Which platforms are you building for? – Dawson Loudon Feb 18 '14 at 21:39
  • @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.. – Alex Stanese Feb 18 '14 at 22:57
  • 2
    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. – Dawson Loudon Feb 18 '14 at 22:59
  • @Dawson Loudon but I was told in this post http://stackoverflow.com/questions/21831395/phonegap-plugins-work-on-cli that the splashscreen also works for the CLI build...!? – Alex Stanese Feb 19 '14 at 11:22
  • @DawsonLoudon Loudon anyway, I added the filed to drawable folders but nothing happend. This applies for onlinebuild, cli build or eclipse build? – Alex Stanese Feb 19 '14 at 23:50
  • @DawsonLoudon so.. do you have any idea what am i doing wrong? – Alex Stanese Feb 20 '14 at 09:52
  • Did you add navigator.splashscreen.show(); into your javascript to onDeviceReady event? – Glogo May 04 '14 at 07:57
  • possible duplicate of [phonegap - splash screen for Android app](http://stackoverflow.com/questions/8156841/phonegap-splash-screen-for-android-app) – givanse May 28 '14 at 18:42

2 Answers2

5

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

Adam Stanley
  • 1,875
  • 1
  • 15
  • 16
0

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

Numair
  • 69
  • 8