Cordova : How to display splash screen on Android and iOS with one configuration?

Question

I'm trying to display splash screen using the cordova splashscreen plugin:

https://github.com/apache/cordova-plugin-splashscreen

So i added in top level config.xml file following lines:

    <platform name="android">
      <icon src="res/android/drawable-ldpi/ic_launcher.png" density="ldpi" />
      <icon src="res/android/drawable-mdpi/ic_launcher.png" density="mdpi" />
      <icon src="res/android/drawable-hdpi/ic_launcher.png" density="hdpi" />
      <icon src="res/android/drawable-xhdpi/ic_launcher.png" density="xhdpi" />
      <!-- you can use any density that exists in the Android project -->
      <splash src="www/images/test.png" density="land-hdpi"/>
      <splash src="www/images/test.png" density="land-ldpi"/>
      <splash src="www/images/test.png" density="land-mdpi"/>
      <splash src="www/images/test.png" density="land-xhdpi"/>
      <splash src="www/images/test.png" density="port-hdpi"/>
      <splash src="www/images/test.png" density="port-ldpi"/>
      <splash src="www/images/test.png" density="port-mdpi"/>
      <splash src="www/images/test.png" density="port-xhdpi"/>
    </platform>
    <platform name="ios">
      <!-- images are determined by width and height. The following are supported -->
      <splash src="www/images/test.png" width="320" height="480"/>
      <splash src="www/images/test.png" width="640" height="960"/>
      <splash src="www/images/test.png" width="768" height="1024"/>
      <splash src="www/images/test.png" width="1536" height="2048"/>
      <splash src="www/images/test.png" width="1024" height="768"/>
      <splash src="www/images/test.png" width="2048" height="1536"/>
      <splash src="www/images/test.png" width="640" height="1136"/>
      <splash src="www/images/test.png" width="750" height="1334"/>
      <splash src="www/images/test.png" width="1242" height="2208"/>
      <splash src="www/images/test.png" width="2208" height="1242"/>
    </platform>
 <preference name="SplashScreen" value="screen" />
  <preference name="SplashScreenDelay" value="20000" />

And into app.js

.run(function($ionicPlatform, $rootScope) {
  $ionicPlatform.ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
      navigator.splashscreen.show();
    }

Problem is that no splash screen is displayed. I tried to find any working solution here:

http://forum.ionicframework.com/t/need-help-with-displaying-splash-screen-on-android-cordova-3-6/10436/11

But without luck.

Plugin documentation is pretty unclear.

How can i solve it please?

Many thanks for any advice.

No, i'm using only the Cordova, with combination with Ionic framework. — redrom

nvhdab nvhdab · Accepted Answer · 2016-03-16T19:41:56

TL;WR solution: try removing your iOS platform and add it again.

Have time? I had the same problem when upgrading cordova 5.x to 6.0. This is what I did to solve it:

Removed the platforms cordova platform remove ios or phonegap platform remove iOS if you are using Phonegap.
(for those using Phonegap): I removed the
Added the plugin cordova plugin add cordova-plugin-splashscreen
Added the platforms using cordova CLI: cordova platform add ios

Added the following lines to the main config.xml:

<platform name="android">
<icon src="res/android/drawable-ldpi/ic_launcher.png" density="ldpi" />
<icon src="res/android/drawable-mdpi/ic_launcher.png" density="mdpi" />
<icon src="res/android/drawable-hdpi/ic_launcher.png" density="hdpi" />
<icon src="res/android/drawable-xhdpi/ic_launcher.png" density="xhdpi" />
<!-- you can use any density that exists in the Android project -->
<splash src="www/images/test.png" density="land-hdpi"/>
<splash src="www/images/test.png" density="land-ldpi"/>
<splash src="www/images/test.png" density="land-mdpi"/>
<splash src="www/images/test.png" density="land-xhdpi"/>
<splash src="www/images/test.png" density="port-hdpi"/>
<splash src="www/images/test.png" density="port-ldpi"/>
<splash src="www/images/test.png" density="port-mdpi"/>
<splash src="www/images/test.png" density="port-xhdpi"/>
</platform>
<platform name="ios">
<!-- images are determined by width and height. The following are supported -->
<splash src="www/images/test.png" width="320" height="480"/>
<splash src="www/images/test.png" width="640" height="960"/>
<splash src="www/images/test.png" width="768" height="1024"/>
<splash src="www/images/test.png" width="1536" height="2048"/>
<splash src="www/images/test.png" width="1024" height="768"/>
<splash src="www/images/test.png" width="2048" height="1536"/>
<splash src="www/images/test.png" width="640" height="1136"/>
<splash src="www/images/test.png" width="750" height="1334"/>
<splash src="www/images/test.png" width="1242" height="2208"/>
<splash src="www/images/test.png" width="2208" height="1242"/>
</platform>
<preference name="SplashScreen" value="screen" />

I ran cordova build ios

Make sure www/images/test.png is a path and it contains the resource.

Also, I did not try using only one image for all the resolutions (you only appear to be using test.png), so not sure if that's a problem, I actually created all the images with their proper dimensions and resolutions.

Hope it helps.

Cordova : How to display splash screen on Android and iOS with one configuration?

1 Answers