Cordova Splash Screen not displaying image

Question

I'm developing an app using Cordova, and I'm unable to get the plugin "cordova-plugin-splashscreen" to work on Android (and I've only tested on Android).

I've installed the plugin using the cordova cli tool:

$ cordova plugin add cordova-plugin-splashscreen

And these are my config.xml-entries related to the plugin:

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

    <splash src="res/screen/android/splash.png" density="land-hdpi" />
    <splash src="res/screen/android/splash.png" density="land-ldpi" />
    <splash src="res/screen/android/splash.png" density="land-mdpi" />
    <splash src="res/screen/android/splash.png" density="land-xhdpi" />
    <splash src="res/screen/android/splash.png" density="land-xxhdpi" />
    <splash src="res/screen/android/splash.png" density="land-xxxhdpi" />
</platform>
...
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />

Instead of displaying the intented "res/screen/android/splash.png", the splash screen instead shows the default cordova icon or simply a gray empty screen.

Answer 1

Add this cordova plugin in your project

cordova plugin add cordova-plugin-splashscreen

Splash Screen For Android :-

<platform name="android">

<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

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

Spalsh Screen For IOS:-

<platform name="ios">
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
<splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>

After that add this into config.xml page

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

Answer 2

Currently recommended solution:

Update cordova-android to version 6.1.0, where this bug is no longer present:

$ cordova platform rm android
$ cordova platform add android@6.1.0

Workaround, for the record:

"Solved" with workaround by manually replacing assets in:

platforms/android/res/*

Problem appears to be caused by the following bug: https://issues.apache.org/jira/browse/CB-12077

Answer 3

Complementing etoscnyl's answer, when using Cordova 6.4.0 don't type:

cordova platform add android

Instead, type:

cordova platform add android@6.1.0

Answer 4

Try edit your xml like this, for me it working. I had installed this package

cordova plugin add cordova-plugin-splashscreen

And I use this xml, but different images only, this include yours

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<platform name="android">
        <splash src="res/screen/android/splash.png" density="port-hdpi" />
    <splash src="res/screen/android/splash.png" density="port-ldpi" />
    <splash src="res/screen/android/splash.png" density="port-mdpi" />
    <splash src="res/screen/android/splash.png" density="port-xhdpi" />
    <splash src="res/screen/android/splash.png" density="port-xxhdpi" />
    <splash src="res/screen/android/splash.png" density="port-xxxhdpi" />

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

Try use also show() in deviceready event , maybe it will help.

navigator.splashscreen.show();