[Solved] Splash screen blank

Hi, i followed this steps but the app splash screen is blank, it showed the splash before but now it doesn’t:

help?

To successfully add a splashscreen to your project follow these steps:

  1. Download the splash screen template from here: http://code.ionicframework.com/resources/splash.psd and do your edits.

  2. Save your splashscreen as splash.png inside your resources folder in your Ionic project.

  3. Run the command ionic resources --splash while you’re in the root directory of your project.

That command will take care of everything for you.

Reference: http://ionicframework.com/docs/cli/icon-splashscreen.html

4 Likes

Ok i have an issue, i’m in Ubuntu, that’s a psd, i can’t open a photoshop file from Ubuntu unless WineHQ fix the issues about Photoshop, and i don’t think i can use gimp for that, right?

You don’t need to use Photoshop.

Just make sure your splash.png file is 2208x2208px. Background color/image should fill the whole 2208px square. Your text and content must stay inside a 1200px x 1200px square (imaginary) that’s in the center of that 2208px square.

The PSD file I linked to is just a template with guides to show you where is the safe spot to put your content.

##Splash Screen Source Image
Save a splash.png, splash.psd or splash.ai file within the resources directory at the root of the Cordova project. Splash screen dimensions vary for each platform, device and orientation, so a square source image is required the generate each of various sizes. The source image’s minimum dimensions should be 2208x2208 px, and its artwork should be centered within the square, knowing that each generated image will be center cropped into landscape and portrait images. The splash screen’s artwork should roughly fit within a center square (1200x1200 px). This Photoshop splash screen template provides the recommended size and guidelines of the artwork’s safe zone. Additionally, when the Orientation preference config is set to either landscape or portrait mode, then only the necessary images will be generated.

$ ionic resources --splash

3 Likes

You know what I just realized my Ionic 2 apps have a blank splash screen as well. What I noticed is that my config.xml doesn’t have any tags for the splashscreen for some reason …

I will look into that and get back to you if I find anything.

Mine does have a lot of lines about the splash screen in the config.xml and yet still gives a blank screen before the actual app shows.

What versions of Cordova Android and Cordva iOS are you using?

I remember I had issues with the splash screen on Cordova Android 5+

Well here’s my ionic info:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-alpha.54
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS: Distributor ID: Ubuntu Description: Ubuntu 15.10
Node Version: v4.0.0

type in the command cordova platform to get the versions of the installed platforms

As a side note, you can open psd files in gimp no problem.

Installed platforms: android 5.1.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, ubuntu, webos

Say what? i didn’t know i could!!, let me check.

Yep, why didn’t i even dare to think if gimp could open that?, thanks for the info.

Ok i did fix the image with the psd template but still the same error.

Can’t figure out the cause of the issue yet but I kinda narrowed it down to be an issue with Ionic 2. Which doesn’t make sense since the files are there and all.

I had similar issue with Ionic 1 using Cordova Android 5.1.0 …

I’ll let you know if I reach a solution.

Have you made an issue in ionic 2.0 branch in github?

No I haven’t till I ensure it’s a problem with Ionic 2

Seems like the latest version of cordova-plugin-splashscreen fixed the issue

1 Like

Running the following commands fixed the issue for me:

ionic plugin rm cordova-plugin-splashscreen
ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git

This will get you the latest version from their repo.

8 Likes

That are great news, thanks for taking the time.

This worked for me as well except the splash screen starts fading out right after it loads. Is anyone else seeing this or know if there is a fix for it?

Cordova CLI: 6.0.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v4.3.0

[SOLVED 02/14/2016]

add the following to config.xml

<preference name="FadeSplashScreen" value="false"/>