Chris CACI Chris CACI - 5 months ago 7
Android Question

Phonegap / ionic app splash screen are not shown

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

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