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.)
Archived Comments
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!
I wonder if that last gap splash conflicts with the one for iOS? Have you tried posting back to the support forum too?
Yeah I am working with them now. I have the opposite problem of everyone else. Android works but iOS will not work. Very odd.
Ok. Let me know when it gets fixed? Sorry I couldn't help more.
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.
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.
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
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.
<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?
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.
Not really sure - sorry. I haven't messed w/ Android splash screens in a while.
I have the exact same problem.
Not sure but the preference names might be case sensitive?
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.
try to use <preference name="splashscreen" value="screen"/> instead of <preference name="splashscreen" value="splash"/>
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
Not really sure - but I can tell you there is no reason to delay your deviceReady for 6K ms.
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 ????
Working for me!
Regards!