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/icon@2x.png" 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/icon-40@2x.png" 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/icon-50@2x.png" 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/icon-60@2x.png" gap:platform="ios" width="120" height="120"/>
  <icon src="resources/ios/icon/icon-60@3x.png" 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/icon-72@2x.png" 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/icon-76@2x.png" 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/icon-small@2x.png" gap:platform="ios" width="58" height="58"/>
  <icon src="resources/ios/icon/icon-small@3x.png" 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="dev@cordova.apache.org" 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

Make sure you install the plugin:

cordova plugin add cordova-plugin-splashscreen

Answer 2

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.

Answer 3

For the future there is a better way of adding splash screens with ionic : All you need to do is edit the 2 images icon and splash located in resources folder.

after that type $ ionic resources and it will generate everything for you including config file Documentation can be found here.

This is for both android and IOS

NB: don't forget to add the cordova splashscreen plugin

ionic plugin add cordova-plugin-splashscreen

Answer 4

For anyone with the same problem,

I had to add an folder inside the www folder for example folder res. inside i put all my splash screens and configured my config.xml like this:

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

  <gap:plugin name="org.apache.cordova.splashscreen" />

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

  <preference name="SplashScreenDelay" value="4000" />

  <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/drawable-port-ldpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/drawable-port-mdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/drawable-port-hdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/drawable-port-xhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xxhdpi" src="res/drawable-port-xxhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xxxhdpi" src="res/drawable-port-xxxhdpi/screen.png" />

  <gap:splash gap:platform="android" gap:qualifier="land-ldpi" src="res/drawable-land-ldpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-mdpi" src="res/drawable-land-mdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-hdpi" src="res/drawable-land-hdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-xhdpi" src="res/drawable-land-xhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-xxhdpi" src="res/drawable-land-xxhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-xxxhdpi" src="res/drawable-land-xxxhdpi/screen.png" />

  <!-- iPhone 4 and iPod touch -->
  <gap:splash src="res/ios/iphone4/Default.png" gap:platform="ios" width="320" height="480" />
  <gap:splash src="res/ios/iphone4/Default@2x.png" gap:platform="ios" width="640" height="960" />

  <!-- iPhone 5 / iPod Touch (5th Generation) -->
  <gap:splash src="res/ios/iphone5/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />

  <!-- iPhone 6 -->
  <gap:splash src="res/ios/iphone6/Default-667h@2x.png" gap:platform="ios" width="750" height="1334" />
  <gap:splash src="res/ios/iphone6/Default-Portrait-736h@3x.png" gap:platform="ios" width="1242" height="2208" />
  <gap:splash src="res/ios/iphone6/Default-Landscape-736h@3x.png" gap:platform="ios" width="2208" height="1242" />

  <!-- iPad -->
  <gap:splash src="res/ios/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
  <gap:splash src="res/ios/Default-Landscape.png" gap:platform="ios" width="1024" height="768" />

  <!-- Retina iPad -->
  <gap:splash src="res/ios/Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2048" />
  <gap:splash src="res/ios/Default-Landscape@2x.png" gap:platform="ios" width="2048" height="1536" />

  <gap:splash src="splash.png" />

  <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"/>
  <platform name="ios">
    <icon src="resources/ios/icon/icon.png" gap:platform="ios" width="57" height="57"/>
    <icon src="resources/ios/icon/icon@2x.png" 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/icon-40@2x.png" 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/icon-50@2x.png" 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/icon-60@2x.png" gap:platform="ios" width="120" height="120"/>
    <icon src="resources/ios/icon/icon-60@3x.png" 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/icon-72@2x.png" 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/icon-76@2x.png" 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/icon-small@2x.png" gap:platform="ios" width="58" height="58"/>
    <icon src="resources/ios/icon/icon-small@3x.png" gap:platform="ios" width="87" height="87"/>
  </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"/>
  </platform>

  <icon src="icon.png" />

most input found in this tutorial (was very helpfull) https://www.youtube.com/watch?v=9KVvaZPhGWo