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


#1

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


Ionic shows white screen after splash screen on android device
#2

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


#3

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?


#4

Same problem here, maybe @mhartington has an idea :slight_smile: ?


#5

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


#6

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


#7

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 :smile:


Crosswalk Integration Beta in Ionic CLI (v1.3.2)
#8

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

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


#9

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…


#10

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 :smile:


#11

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


#12

@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"/>
...


#13

So lets go over what going on

  1. Are you using crosswalk?
  2. 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.


#14
  1. Yes
  2. 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. :fearful:

Thanks @mhartington for the help.


#15

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


Navbar linear gradient and button backgrounds
#16

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

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


#17

We all will, le sigh


#18

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.


[SOLVED] Splash screen not showing, already tried answers on other posts and nothing!
#19

@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?


#20

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