Having trouble with splash screens, Cordova, and Android?

This post is more than 2 years old.

Yesterday I struggled to get - what I thought - was a simple thing working in Cordova - adding a splash screen to Android. According to the docs, at minimum, you should be able to do this:

<splash src="res/splash.png" />

This worked fine for me in iOS but in Android, just gave me a blank screen. (Not for the app, what I mean is, when the app loaded, no splash screen was used.)

I did some Googling, and came across this bug: Splash screen does not display on Android. Within this bug, it was said that in order to use a splash screen on Android, you must specify the Android-only preference SplashScreen:

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

Now - if you read the Android specific configuration docs, it has this to say about the setting:

SplashScreen (string, defaults to splash): The name of the file minus its extension in the res/drawable directory. Various assets must share this common name in various subdirectories.

This - to me anyway - does not imply in any way that it enables the use of a splash screen. Rather, it says what the file name should be (minus extension) for a splash screen. But as soon as I tested by adding this value it worked right.

So we have two issues here. First - this tag is required to use a splash screen, which I don't think is documented well. Secondly - even though it says it defaults to splash, you still have to specify it anyway. (Err, ok, maybe that's still one issue. ;)

If you read that bug report, you can see my comments about this, and note that it looks like behavior will be changing (possibly) in the future, so please keep that in mind if you are reading this blog entry in the future. (And as always, I have been, and always will be, a firm supporter of our robotic overlords.)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Jeremy Callahan posted on 3/26/2015 at 6:35 PM

Thanks for posting this. I wish it helped me. I'm dying out here trying to get this same issue resolved... Well sort or the same.

I cannot get my splash screen to show up on iOS. Its very frustrating.

I'm using PG Build and have everything correct (according to the documentation).

Not really sure where to turn at this point

I was getting the default PG splash screen with this method:

<platform name="ios">
<splash src="res/splash/ios320x480.png" width="320" height="480"/>
</platform>

PG Support told me to use this method for PG Build:

<gap:splash src="res/splash/ios320x480.png" gap:platform="ios" width="320" height="480"/>

But I get nothing with that method... Let me know if you have any thoughts. I'm using the standard other tags:

<gap:plugin name="org.apache.cordova.splashscreen"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="SplashScreen" value="splash"/>
<preference name="SplashScreenDelay" value="10000"/>
<gap:splash src="splash.png"/>

Any help is appreciated!

Comment 2 (In reply to #1) by Raymond Camden posted on 3/26/2015 at 6:41 PM

I wonder if that last gap splash conflicts with the one for iOS? Have you tried posting back to the support forum too?

Comment 3 (In reply to #2) by Jeremy Callahan posted on 3/26/2015 at 10:59 PM

Yeah I am working with them now. I have the opposite problem of everyone else. Android works but iOS will not work. Very odd.

Comment 4 (In reply to #3) by Raymond Camden posted on 3/27/2015 at 12:56 AM

Ok. Let me know when it gets fixed? Sorry I couldn't help more.

Comment 5 (In reply to #4) by Jeremy Callahan posted on 3/27/2015 at 1:02 AM

I found this interesting thread about 5 months ago where PG Build didn't support 6 and 6+ splash pages. At the end of the thread it was fixed.

http://community.phonegap.c...

They just rolled to version 3.7 on PG Build this week. I'm wondering if it was some how left out of the version.

I'll update this thread once I get it fixed. Thanks.

Comment 6 by Anders Borg posted on 4/20/2015 at 8:18 AM

The documentation is confusing and contradicting due to slightly different requirements for PhoneGap Build. I can't say I got it altogether right. E.g. I can't control the aspect ratio for Android (via 9-patch maybe?). Anywho, these are the settings I use in a project that needs splash screens for both Android and iOS (customer requirement; normally I don't use any splash for Android, as they make the app bloated for no real gain). I also list the icons I use. All created via my tool http://pgicons.abiro.com.

If I don't want a splash for Android, I skip splash.png and all Android settings. Works fine, even though the documentation sort of demands a splash.png.

<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<preference name="AutoHideSplashScreen" value="false"/>

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

<icon gap:platform="ios" src="res/icon/ios/icon-small.png" width="29" height="29"/>
<icon gap:platform="ios" src="res/icon/ios/icon-small_2x.png" width="58" height="58"/>
<icon gap:platform="ios" src="res/icon/ios/icon-40.png" width="40" height="40"/>
<icon gap:platform="ios" src="res/icon/ios/icon-40_2x.png" width="80" height="80"/>
<icon gap:platform="ios" src="res/icon/ios/icon-50.png" width="50" height="50"/>
<icon gap:platform="ios" src="res/icon/ios/icon-50_2x.png" width="100" height="100"/>
<icon gap:platform="ios" src="res/icon/ios/icon.png" width="57" height="57"/>
<icon gap:platform="ios" hsrc="res/icon/ios/icon_2x.png" width="114" eight="114"/>
<icon gap:platform="ios" src="res/icon/ios/icon-60.png" width="60" height="60"/>
<icon gap:platform="ios" src="res/icon/ios/icon-60_2x.png" width="120" height="120"/>
<icon gap:platform="ios" src="res/icon/ios/icon-60_3x.png" width="180" height="180"/>
<icon gap:platform="ios" src="res/icon/ios/icon-72.png" width="72" height="72"/>
<icon gap:platform="ios" src="res/icon/ios/icon-72_2x.png" width="144" height="144"/>
<icon gap:platform="ios" src="res/icon/ios/icon-76.png" width="76" height="76"/>
<icon gap:platform="ios" src="res/icon/ios/icon-76_2x.png" width="152" height="152"/>
<gap:splash gap:platform="ios" src="res/screen/ios/Default.png" width="320" height="480"/>
<gap:splash gap:platform="ios" src="res/screen/ios/Default_2x.png" width="640" height="960"/>

<gap:splash gap:platform="ios" src="res/screen/ios/Default-568h_2x.png" width="640" height="1136"/>
<gap:splash gap:platform="ios" src="res/screen/ios/Default-667h_2x.png" width="750" height="1334"/>
<gap:splash gap:platform="ios" src="res/screen/ios/Default-Portrait-736h_3x.png" width="1242" height="2208"/>
<gap:splash gap:platform="ios" src="res/screen/ios/Default-Portrait.png" width="768" height="1024"/>
<gap:splash gap:platform="ios" src="res/screen/ios/Default-Portrait_2x.png" width="1536" height="2048"/>

<icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/ldpi.png"/>
<icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/mdpi.png"/>
<icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/hdpi.png"/>
<icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/xhdpi.png"/>
<icon gap:platform="android" gap:qualifier="xxhdpi" src="res/icon/android/xxhdpi.png"/>
<icon gap:platform="android" gap:qualifier="xxxhdpi" src="res/icon/android/xxxhdpi.png"/>

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

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

(I call .hide after 3 seconds).

You also need .pgbomit under www/res to avoid bloat.

Comment 7 by Dmitry Isakov posted on 8/7/2015 at 7:22 AM

I also got my splash not working after updating to Cordova CLI 5.1.1 + Android 4.0.2
Tried many combinations but nothing works. I have splash.9.png in www/img folder

Comment 8 (In reply to #7) by Luciano Lima posted on 8/12/2015 at 2:15 AM

In my App with Cordova 5.1.1 + Android 4.0.2, in the first launch, the splash works nice. After the first launch, never show the splash again.

Comment 9 by Dmitry Isakov posted on 8/13/2015 at 6:24 AM

<preference name="splashscreen" value="splash"/>
<preference name="splashScreenDelay" value="10000"/>

this are the only options i use
my only splashscreen file is located at res/drawable folder and is named splash.9.png
my android doesnt show any splashscreen
what am i doing wrong?

Comment 10 (In reply to #8) by Raymond Camden posted on 8/13/2015 at 12:22 PM

That one I'm not sure about. I'd suggest maybe filing a bug report. I swear I saw something about this on the Cordova dev list, but now I can't find it.

Comment 11 (In reply to #9) by Raymond Camden posted on 8/13/2015 at 12:23 PM

Not really sure - sorry. I haven't messed w/ Android splash screens in a while.

Comment 12 (In reply to #8) by Mathieu Datez posted on 8/25/2015 at 2:20 PM

I have the exact same problem.

Comment 13 (In reply to #9) by Mathieu Datez posted on 8/25/2015 at 2:21 PM

Not sure but the preference names might be case sensitive?

Comment 14 (In reply to #12) by Mathieu Datez posted on 8/25/2015 at 3:50 PM

I just edited the splashscreen.java class and re-added my customized plugin instead. The splashscreen.java class does not get the parameter to hide the splashscreen and starts the method showSplashScreen with true instead. I changed this to false and it's working as expected now. A better fix would be to get the bool from the preferences.

Comment 15 (In reply to #9) by Nivas posted on 9/10/2015 at 11:44 AM

try to use <preference name="splashscreen" value="screen"/> instead of <preference name="splashscreen" value="splash"/>

Comment 16 by nissar posted on 10/7/2015 at 7:29 AM

I am using spalshscreen plugin for container app (loading inappbrowser url ) after complete launch of splash Screen . First time splashscreen launching as expected . But seconed ime onwards white screen displaying . If application removed from the device stack then it will display splash screen . I want to display splash screen once exit the app and relaunch it.

config.xml

<preference name="splashScreen" value="splash"/>
<preference name="splashScreenDelay" value="6000"/>
(i tried without commenting also)

even i aded set timeout for odevice ready

setTimeout(function () {
document.addEventListener('deviceready', onDeviceReady, false);
}, 6000);

please help me for this issue

Comment 17 (In reply to #16) by Raymond Camden posted on 10/7/2015 at 2:51 PM

Not really sure - but I can tell you there is no reason to delay your deviceReady for 6K ms.

Comment 18 by Fernando posted on 2/12/2016 at 8:05 PM

Gracias por compartir tus conocimientos..
Tengo un problema con el splash no me funciona aparece la pantalla negra al inicar la app, lugo si el index pero muestra la imagen de splash y el icono si lo muestra que puedo hacer para solucionarlo ????

Comment 19 (In reply to #15) by s1lviu posted on 3/2/2016 at 10:51 PM

Working for me!
Regards!