Phonegap / ionic app splash screen are not shown

Question

I have been trying over and over to add a splashscreen to my Ionic App. We are using Phonegap 3.7.0 to deploy it to ios and android devices, but nothing seems to work.The strange thing is, when I run the app inside an emulator the splashscreen is displayed (example: ionic emulate android)

with this configuration the icons does work but the splashscreen aint working. It's displaying a blank screen, not even the cordova default splashscreen.

my config.xml :

<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SplashScreenDelay" value="5000"/>
<preference name="SplashScreen" value="screen"/>

<gap:plugin name="org.apache.cordova.device"/>
<gap:plugin name="org.apache.cordova.network-information"/>
<gap:plugin name="org.apache.cordova.inappbrowser"/>
<gap:plugin name="uk.co.whiteoctober.cordova.appversion" version="0.1.4"/>
<gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" source="pgb"/>
<gap:plugin name="com.ionic.keyboard" version="1.0.3" source="pgb"/>
<gap:plugin name="nl.x-services.plugins.socialsharing" version="4.3.8" source="pgb"/>
<gap:plugin name="fi.avaus.cordova.geolocation"/>
<gap:plugin name="org.apache.cordova.splashscreen" version="0.3.4"/>
<platform name="ios">
  <icon src="resources/ios/icon/icon.png" gap:platform="ios" width="57" height="57"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="114" height="114"/>
  <icon src="resources/ios/icon/icon-40.png" gap:platform="ios" width="40" height="40"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="80" height="80"/>
  <icon src="resources/ios/icon/icon-50.png" gap:platform="ios" width="50" height="50"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="100" height="100"/>
  <icon src="resources/ios/icon/icon-60.png" gap:platform="ios" width="60" height="60"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="120" height="120"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="180" height="180"/>
  <icon src="resources/ios/icon/icon-72.png" gap:platform="ios" width="72" height="72"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="144" height="144"/>
  <icon src="resources/ios/icon/icon-76.png" gap:platform="ios" width="76" height="76"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="152" height="152"/>
  <icon src="resources/ios/icon/icon-small.png" gap:platform="ios" width="29" height="29"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="58" height="58"/>
  <icon src="resources/ios/icon/[email protected]" gap:platform="ios" width="87" height="87"/>
  <gap:splash src="resources/ios/splash/Default-568h@2x~iphone.png" gap:platform="ios" width="640" height="1136"/>
  <gap:splash src="resources/ios/splash/Default-667h.png" gap:platform="ios" width="750" height="1334"/>
  <gap:splash src="resources/ios/splash/Default-736h.png" gap:platform="ios" width="1242" height="2208"/>
  <gap:splash src="resources/ios/splash/Default-Landscape-736h.png" gap:platform="ios" width="2208" height="1242"/>
  <gap:splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" gap:platform="ios" width="2048" height="1536"/>
  <gap:splash src="resources/ios/splash/Default-Landscape~ipad.png" gap:platform="ios" width="1024" height="768"/>
  <gap:splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" gap:platform="ios" width="1536" height="2048"/>
  <gap:splash src="resources/ios/splash/Default-Portrait~ipad.png" gap:platform="ios" width="768" height="1024"/>
  <gap:splash src="resources/ios/splash/Default@2x~iphone.png" gap:platform="ios" width="640" height="960"/>
  <gap:splash src="resources/ios/splash/Default~iphone.png" gap:platform="ios" width="320" height="480"/>
</platform>
<platform name="android">
  <icon src="resources/android/icon/drawable-ldpi-icon.png" gap:platform="android" density="ldpi"/>
  <icon src="resources/android/icon/drawable-mdpi-icon.png" gap:platform="android" density="mdpi"/>
  <icon src="resources/android/icon/drawable-hdpi-icon.png" gap:platform="android" density="hdpi"/>
  <icon src="resources/android/icon/drawable-xhdpi-icon.png" gap:platform="android" density="xhdpi"/>
  <icon src="resources/android/icon/drawable-xxhdpi-icon.png" gap:platform="android" density="xxhdpi"/>
  <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" gap:platform="android" density="xxxhdpi"/>
  <gap:splash src="resources/android/splash/drawable-land-ldpi-screen.png" gap:platform="android" density="land-ldpi"/>
  <gap:splash src="resources/android/splash/drawable-land-mdpi-screen.png" gap:platform="android" density="land-mdpi"/>
  <gap:splash src="resources/android/splash/drawable-land-hdpi-screen.png" gap:platform="android" density="land-hdpi"/>
  <gap:splash src="resources/android/splash/drawable-land-xhdpi-screen.png" gap:platform="android" density="land-xhdpi"/>
  <gap:splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" gap:platform="android" density="land-xxhdpi"/>
  <gap:splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" gap:platform="android" density="land-xxxhdpi"/>
  <gap:splash src="resources/android/splash/drawable-port-ldpi-screen.png" gap:platform="android" density="port-ldpi"/>
  <gap:splash src="resources/android/splash/drawable-port-mdpi-screen.png" gap:platform="android" density="port-mdpi"/>
  <gap:splash src="resources/android/splash/drawable-port-hdpi-screen.png" gap:platform="android" density="port-hdpi"/>
  <gap:splash src="resources/android/splash/drawable-port-xhdpi-screen.png" gap:platform="android" density="port-xhdpi"/>
  <gap:splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" gap:platform="android" density="port-xxhdpi"/>
  <gap:splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" gap:platform="android" density="port-xxxhdpi"/>
</platform>
<icon src="icon.png" />
<gap:splash src="splash.png" />

as the phonegap docs states: your splash screens should be saved as png files. which they are and i have added the platform tag "gap:platform"

and The default splash must be named splash.png and must reside in the root of your application folder.

here is my project tree

root
- bower_components
- hooks
- node_modules
- platforms
- plugins

- resources
-- android
--- icon
--- splash
  drawable-land-hdpi-screen.png
  drawable-land-ldpi-screen.png
  drawable-land-mdpi-screen.png
  etc...
-- ios
--- icon
--- splash
  Default-568h@2x~iphone.png
  Default-667h.png
  Default-736h.png
  etc...
-- icon.png
-- splash.png
- scss
- www

bower.json
config.xml
gulpfile.js
icon.png
ionic.project
package.json
splash.png

http://i59.tinypic.com/9bhbw5.jpg

I hope someone can give me a solution thank you in advance

EDIT:

I have decompiled the APK file from the emulator where the splashscreens works and the APK file from phonegap build. As it seems phonegap does NOT copy the splashscreen folders and does not use a correct config.xml file.

config.xml from the phonegap build

    <?xml version="1.0" encoding="utf-8"?>
<widget id="io.cordova.helloCordova" version="2.0.0" xmlns="http://www.w3.org/ns/widgets">
    <name> Hello Cordova
</name>
    <description> A sample Apache Cordova application that responds to the deviceready
        event. </description>
    <author email="[email protected]" href="http://cordova.io"> Apache Cordova Team </author>
    <access origin="http://*/*" />
    <access origin="https://*/*" />
    <access launch-external="yes" origin="tel:*" />
    <access launch-external="yes" origin="geo:*" />
    <access launch-external="yes" origin="mailto:*" />
    <access launch-external="yes" origin="sms:*" />
    <access launch-external="yes" origin="market:*" />
    <preference name="loglevel" value="DEBUG" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <preference name="SplashScreenDelay" value="5000" />
    <content src="index.html" />
    <feature name="StatusBar">
        <param name="android-package" onload="true" value="org.apache.cordova.statusbar.StatusBar" />
    </feature>
    <feature name="AppVersion">
        <param name="android-package" value="uk.co.whiteoctober.cordova.AppVersion" />
    </feature>
    <feature name="Keyboard">
        <param name="android-package" value="com.ionic.keyboard.IonicKeyboard" />
        <param name="onload" value="true" />
    </feature>
    <feature name="InAppBrowser">
        <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
    </feature>
    <feature name="NetworkStatus">
        <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />
    </feature>
    <feature name="Device">
        <param name="android-package" value="org.apache.cordova.device.Device" />
    </feature>
    <feature name="SocialSharing">
        <param name="android-package" value="nl.xservices.plugins.SocialSharing" />
    </feature>
    <feature name="SplashScreen">
        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
    </feature>
    <feature name="GeolocationAvailabilityChecker">
        <param name="android-package" value="org.apache.cordova.geolocation.GeolocationAvailabilityChecker" />
    </feature>
</widget>

It looks like the phonegap build is not configured properly

Answer 1

If anyone's still having this issue, after running ionic resources command just make sure you add the following to the config.xml:

  <preference name="ShowSplashScreen" value="true" />
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="true" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false"/>
  <feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
  </feature>

Then run:

ionic build android
ionic run android

Done.