How to create a splash screen

1

I am trying to create a splashscreen in Ionic. Is there any reference tutorial for creating splashscreen ??

1 Like
2

Hey,

I didn’t use it now, but I planned to do it later.

Have a look here : http://ngcordova.com/docs/#Splashscreen

and here : http://cordova.apache.org/docs/fr/3.1.0/cordova_splashscreen_splashscreen.md.html

1 Like
3

And here: http://learn.ionicframework.com/formulas/splash-screen/

1 Like
4

Hi, I wouldn’t use the ionic formula, it’s out of date. I have asked them to update it.

Take a look at this post Customizing the splashscreen / launch image

Also, the link posted by @kai23 is for Cordova 3.1. and there have been changes since then. Here’s a link to the latest docs:

http://cordova.apache.org/docs/en/4.0.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

5

Thanks for the headsup! I was planning to use it this week :smile:

6

@edd this is how i have configured my config.xml for android

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.xxx.shiphit" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>ShipHit</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"/>
  
  <platform name="android">
	<icon src="/res/drawable-hdpi/icon.png" density="port-hdpi"/>
	<icon src="/res/drawable-mdpi/icon.png" density="port-mdpi"/>
  </platform>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

this is the js file

.run(function($cordovaSplashscreen, $timeout, $state) {

	$timeout(function() {
		$state.go('main')
		$cordovaSplashscreen.hide()
	}, 2500)

But it still do not shows up only a black screen

7

@edd
This is how it worked:
1->Create project
2->Add Platform
3->Add Plugin
4>Add the following in config.xml

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

5->Now perform the ionic build

8

Hi @protocol10 - glad you got it working!

1 Like
9

I want to hide my splash screen after getting some data, but it seems http://learn.ionicframework.com/formulas/splash-screen/ is outdated.

The only way i get the splash screen to appear is adding <preference name="SplashScreen" value="screen" /> to the config.xml. But $cordovaSplashscreen.hide(); doesn’t seem to be working for me.
Even if I try to hide it with a large timeout:

setTimeout(function() {
     $cordovaSplashscreen.hide()
}, 15000)

it will hide in about 3 seconds or so, if I don’t specicify <preference name="SplashScreenDelay" value="XXXX" />

I don’t want to use a simple timeout to hide the splash screen, otherwise SplashScreenDelay would fit perfectly. I want something like:

SplashService.done().then(function(data){
    $cordovaSplashscreen.hide();
}

Any ideas to get this working?

10

Have you got this in your config.xml?

<preference name="AutoHideSplashScreen" value="false"/>
11

I’ve also tried that, yes.

But with that, it doesn’t show the splash screen at all. (Tried $cordovaSplashscreen.show(); in the run method without success)

12

So this is the setup I have and it’s working in iOS

config.xml

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

app.js - in the .run function

...
$ionicPlatform.ready(function() {
        $timeout(function() {
            $cordovaSplashscreen.hide();
        }, 5000, false);
...

Check that when you do ionic build ios that the setting in platforms\ios\cordova\defaults.xml is also:

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

Also try removing the platform and re-adding it. The settings in your root config.xml should set the platform defaults.xml when you add the platform or do a build.

13

I’m testing on Android, and it doesn’t seem to work. Tried to remove and add platform as you said, and there’s not even a splash screen appearing. Do you call $cordovaSplashscreen.show(); somewhere, or should that be automatic?

By the way, on the platforms\ios\cordova\defaults.xml I don’t see any preference like you said. The only one I have is <preference name="loglevel" value="DEBUG" />. Should I add it manually?

14

@edd Try this White page showing after splash screen before app load

15

Doesn’t work. I guess those preferences are for iOS. I’m testing on Android.
I must say again that adding the following code works.

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

It just doesn’t accomplish what I’m trying to do. I want to get data, instead of waiting a specific time without doing anything.

16

@HugoS Sorry, I did’t see it’s about Android.
May this post can help ypu: Need help with displaying splash screen on Android (Cordova 3.6)

17

Hi @HugoS - sorry, I’m not testing with Android, so can’t really give a fair comparison.
To answer your questions:

Do you call $cordovaSplashscreen.show();

No - the screen is just shown by default.

By the way, on the platforms\ios\cordova\defaults.xml I don’t see any preference like you said. The only one I have is . Should I add it manually?

Yes, you could try adding the setting manually into defaults.xml

18

Tried both things without success.

I think I might approach the problem differently. I might create an inicial template instead of the splash screen, and do whatever I want to do in there.

19

I had problems to,
after a lot of messing around I found I did a number of things wrong:

These tips apply for a few issues I’ve had with plugins:

  1. make sure
    ’lib/ngCordova/dist/ng-cordova.min.js’
    is after
    ’lib/ionic/js/ionic.bundle.js’

  2. make sure you haven’t removed ‘cordova.js’ and that it comes after the prior ones.
    (I did for browser development but you need it for the emulator and mobile device).

  3. make sure you are inside the ready block:

    $ionicPlatform.ready(function() {
    $cordovaSplashscreen.hide();
    });

  4. sometimes (especially the facebook plugin) you need to remove the platform and re add it (takes 5 seconds).

if a plugin gives you errors (like the facebook one):
a) remove the plugin first
b) then remove the platform
c) then add the platform
d) then add the plugin.

20

hey @edd, can you also post an edit to show how you included your actual splash files and the directories they live in? i have this set up exactly like you on ios and I can’t get it working.

my setup:

config.xml:

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

<platform name="ios">
 <splash src="platforms/ios/splashscreen/Resources/splash/Default~iphone.png" width="320" height="480" />
 <splash src="platforms/ios/splashscreen/Resources/splash/Default@2x~iphone.png" width="640" height="960" />
 <splash src="platforms/ios/splashscreen/Resources/splash/Default-Portrait~ipad.png" width="768" height="1024" />
 <splash src="platforms/ios/splashscreen/Resources/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048" />
 <splash src="platforms/ios/splashscreen/Resources/splash/Default-Landscape~ipad.png" width="1024" height="768" />
 <splash src="platforms/ios/splashscreen/Resources/splash/Default-Landscape@2x~ipad.png" width="2048" height="1536" />
 <splash src="platforms/ios/splashscreen/Resources/splash/Default-568h@2x~iphone.png" width="640" height="1136" />
</platform>

app.js:

var app = angular.module('myApp', ['ngCordova', 'ionic', 'myApp.controllers', 'myApp.services', 'myApp.directives'])

.run(function($ionicPlatform,$cordovaStatusbar,$cordovaSplashscreen) {
  $ionicPlatform.ready(function() {
    
    $timeout(function() {
        $cordovaSplashscreen.hide();
    }, 5000, false);