Apache Cordova splash screens not showing in Andro

Question

I am running Apache Cordova 3.6.3-0.2.13. And I try to get the splash screens working. I have followed the documentation on http://cordova.apache.org/docs/en/3.6.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens. And the icons are working, but no success for the splash screens. We are also using the Ionic framework (version 1.2.8) on top of Cordova.

What I have done:

Added icons and splash screens to config.xml from the project root:

<preference name="SplashScreen" value="splash"/>
<preference name="SplashScreenDelay" value="10000"/>
<platform name="android">
  <icon src="icons/icon.png"/>

  <!-- you can use any density that exists in the Android project -->
  <splash src="icons/android-splash-land-hdpi.png" density="land-hdpi"/>
  <splash src="icons/android-splash-land-ldpi.png" density="land-ldpi"/>
  <splash src="icons/android-splash-land-mdpi.png" density="land-mdpi"/>
  <splash src="icons/android-splash-land-xhdpi.png" density="land-xhdpi"/>

  <splash src="icons/android-splash-port-hdpi.png" density="port-hdpi"/>
  <splash src="icons/android-splash-port-ldpi.png" density="port-ldpi"/>
  <splash src="icons/android-splash-port-mdpi.png" density="port-mdpi"/>
  <splash src="icons/android-splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

Ofcourse the icons directory exists and also the files are in place. When I build the project with ionic run android or cordova run android. The build process also creates the icons and splash screens into the platforms/android/res/drawable directory!

Also the config file located at platforms/android/res/xml/config.xml is correctly updated and the <preference> and <icon> and <splash> elements are in place.

I also tried with the org.apache.cordova.splashscreen plugin and also no success. I have added the plugin with ionic plugin add org.apache.cordova.splashscreen and also added onDeviceReady the code navigator.splashscreen.show();. But this also shows nothing.

What am I missing here?

Answer 1

After carefully following the PhoneGap CLI splash screen instructions, my Android splash screen was still not showing up. I then looked at build.gradle under platforms/android and noticed that changes I made to the defaultConfig block were causing changes to AndroidManifest.xml that ultimately prevented the splash screen from working. Below is the defaultConfig block I was using:

defaultConfig {
    applicationId "com.leadingedje"
    minSdkVersion 17
    targetSdkVersion 21
    versionCode getAppVersionCode()
    versionName getAppVersionName()
}

When I removed this block from build.gradle, the splash screen started working again.

Answer 2

I'd faced same issue and I've fixed it by using following configuration :-

install splash screen plugin

cordova plugin add cordova-plugin-splashscreen

Next we need to add following preference in config.xml,

<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true" />

Add the Splashscreen images to folders like below

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

land-ldpi is not a density but a qualifier

Therefore the correct each splash tag as below:

<splash qualifier="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />

After above configuration, below step is very important,

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

Answer 3

I had to install the splash screen plugin to make it work

cordova plugin add cordova-plugin-splashscreen

as well as adding

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

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

Answer 4

Just had this problem myself. Change this

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

to

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

This fixed it.

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

Answer 5

2019 February end:

Only two things I did and it worked:

• Install plugin:

  cordova plugin add cordova-plugin-splashscreen

• Add below to config.xml, have corresponding images

(1st splash line is a generic screen size, if you want)

<platform name="android">
    <splash src="res/screen/android/splash-2732x2732.png" />

    <splash density="land-ldpi" src="res/screen/android/splash-land-320x200-ldpi.png" />
    <splash density="land-mdpi" src="res/screen/android/splash-land-480x320-mdpi.png" />
    <splash density="land-hdpi" src="res/screen/android/splash-land-800x480-hdpi.png" />
    <splash density="land-xhdpi" src="res/screen/android/splash-land-1280x720-xhdpi.png" />
    <splash density="land-xxhdpi" src="res/screen/android/splash-land-1600x960-xxhdpi.png" />
    <splash density="land-xxxhdpi" src="res/screen/android/splash-land-1920x1280-xxxhdpi.png" />
    <splash density="port-ldpi" src="res/screen/android/splash-port-200x320-ldpi.png" />
    <splash density="port-mdpi" src="res/screen/android/splash-port-320x480-mdpi.png" />
    <splash density="port-hdpi" src="res/screen/android/splash-port-480x800-hdpi.png" />
    <splash density="port-xhdpi" src="res/screen/android/splash-port-720x1280-xhdpi.png" />
    <splash density="port-xxhdpi" src="res/screen/android/splash-port-960x1600-xxhdpi.png" />
    <splash density="port-xxxhdpi" src="res/screen/android/splash-port-1280x1920-xxxhdpi.png" />
</platform>

Answer 6

I solved the problem by adding default splash tag

Add this to config.xml in the root destination or in www/config.xml

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