Splashscreen on Android doesn't work (only showing white screen for 2 seconds)

bend0303 · January 13, 2015, 3:36pm

Hey,
I’m using the splashscreen plugin for cordova + the new resources cli to make the splashscreen work.

It works on iPhone but does not work on Android, all I see is a white screen for 2 seconds and the app appears.

This are my configurations:

Config.xml

<preference name="SplashScreen" value="screen"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashScreenDelay" value="10000"/>
<feature name="SplashScreen">
    <param name="ios-package" value="CDVSplashScreen"/>
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
    <param name="onload" value="true"/>
  </feature>
  <platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
    <icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
    <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
    <icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
    <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
    <icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
    <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
    <icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
    <icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
    <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
    <icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
    <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
    <icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
    <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
    <icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
    <splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
    <splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
  </platform>

Thanks!
Ben

tobika · January 18, 2015, 12:04am

it seems like I have the same problem, all the images are in the right folders, but I never see the splashscreen, 2 seconds of white and the my first screen is rendered

tried all the tips I found concerning the android splashscreen problems

Cheers,
Tobias

mcknight · January 18, 2015, 3:44pm

I’m also having the same problem, I’ve followed the instructions from http://ionicframework.com/docs/cli/icon-splashscreen.html, However I just see a white screen for a few seconds on Android. However it displays correctly on IOS.

I’m thinking it must not moving the assets to the correct place.

Does anyone have any ideas?

WidawskiJ · January 18, 2015, 3:49pm

Same problem here, maybe @mhartington has an idea ?

mcknight · January 18, 2015, 4:04pm

I’ve figured it out. I don’t know if everyone has the same issue but mine was because I installed corsswalk which has a different API which breaks the splashscreen. After some messing around with GIT I was able to remove crosswalk and it all works now.

Hope this helps.

Mike

WidawskiJ · January 18, 2015, 4:07pm

Thanks @mcknight, I also use crosswalk but don’t plan on removing it at all…

EDIT : found this https://crosswalk-project.org/documentation/manifest/launch_screen.html will look into it

mcknight · January 18, 2015, 4:19pm

That looks very promising, Let me know if you mange to get it working. It would be really great to put crosswalk back in to my project at some point

tobika · January 18, 2015, 9:02pm

Just to confirm, I guess we are all using crosswalk here

PS: there is already a discussion about this problem in another post

rdb · January 20, 2015, 1:46pm

I don’t use Crosswalk, i have this in my config.xml file :

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="splash/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="splash/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="splash/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="splash/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<preference name="SplashScreenDelay" value="10000" />

When i build my app, files ( splash/splash-port-hdpi.png etc … ) are well copied in the platform/android/res/drawable-port… folders, but when i run app i don’t see splash screen, just a black screen for 2 seconds…

My files like splash-port-xhdpi.png are original cordova splashscreen images so they have good format and size…

I don’t know what to do…

seanhill · January 20, 2015, 11:02pm

I’m having the exact same problem too. I thought it may have been because of crosswalk, but I downloaded the basic tabs application, emulated onto an android device, and BOOM, no splashscreen. WHERE HAS IT GONE??? @mhartington WE NEED YOUR HELP

mhartington · January 20, 2015, 11:05pm

In your config.xml, you need to add the following preferences:

<preference name="SplashScreen" value="foo" />
<preference name="SplashScreenDelay" value="10000" />

Where foo is the name of the splash screen file.
Make sure you’re including the first preference

http://plugins.cordova.io/#/package/org.apache.cordova.splashscreen

seanhill · January 20, 2015, 11:08pm

@mhartington I already have that in my config.xml file.

...
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<platform name="android">
  <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
...

mhartington · January 20, 2015, 11:12pm

So lets go over what going on

Are you using crosswalk?
Do you have the splash screen plugin install?

If you have crosswalk installed, that is a known bug, which the cordova team needs to fix.

seanhill · January 21, 2015, 2:01am

Yes
Yes

So it looks like we need to wait for the cordova team to fix it for my application.

However, I tested with the default tabs application, and the splashscreen doesn’t show either.

$ ionic start myapp tabs
$ ionic plugin add org.apache.cordova.splashscreen
$ ionic platform add android
$ ionic build android
$ ionic run android

No splashscreens.

Thanks @mhartington for the help.

mhartington · January 21, 2015, 2:11am

Well you missed a step @seanhill

$ ionic start myapp tabs
$ ionic plugin add org.apache.cordova.splashscreen
$ ionic platform add android
$ vi config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.tmp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>tmp</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>

  <!-- You still need to add this to the config.xml -->
  <preference name="SplashScreen" value="screen" />
  <preference name="SplashScreenDelay" value="10000" />
  
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

$ ionic build android
$ ionic run android

This will give you a splash screen on android w/o crosswalk

seanhill · January 21, 2015, 2:15am

@mhartington you’re right. Once again. Thanks!

In the meantime, I’ll just :`( while cordova updates…

mhartington · January 21, 2015, 4:06am

We all will, le sigh

dkeane · January 26, 2015, 2:40pm

I also had the same issue but checking through commits for the splash screen plugin it looks like they added support for Cordova 4.0 in this commit:

Updating to latest has removed the white screen during launch from within my app.

Now I only have a white screen when animating to the multitasking app list on Lollipop.

seanhill · January 26, 2015, 3:34pm

@dkeane it looks like the code on the github repo for Splashscreen.java is different then when I install it via the command line. Is their code out of date with the cordova registry?

WidawskiJ · January 26, 2015, 4:25pm

@dkeane can you explain the process you used to display a splashscreen? Thanks a lot