# How to create a splash screen

**URL:** <https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438>\
**Category:** uncategorized\
**Created:** [October 20, 2014, 8:20am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438 "2014-10-20T08:20:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![protocol10](https://avatars.discourse-cdn.com/v4/letter/p/ec9cab/32.png) [@protocol10](https://forum.ionicframework.com/u/protocol10)\
**Post date:** [October 20, 2014, 8:20am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/1 "2014-10-20T08:20:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kai23](https://avatars.discourse-cdn.com/v4/letter/k/c89c15/32.png) [@kai23](https://forum.ionicframework.com/u/kai23)\
**Post date:** [October 20, 2014, 8:26am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/2 "2014-10-20T08:26:15Z")

</div>

Hey,

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

Have a look here : [http://ngcordova.com/docs/#Splashscreen](http://ngcordova.com/docs/#Splashscreen)

and here : [http://cordova.apache.org/docs/fr/3.1.0/cordova\_splashscreen\_splashscreen.md.html](http://cordova.apache.org/docs/fr/3.1.0/cordova_splashscreen_splashscreen.md.html)

---

<div class="post-metadata">

**Author:** ![felipew](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/felipew/32/13128_2.png) [@felipew](https://forum.ionicframework.com/u/felipew)\
**Post date:** [October 20, 2014, 9:22am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/3 "2014-10-20T09:22:03Z")

</div>

And here: [http://learn.ionicframework.com/formulas/splash-screen/](http://learn.ionicframework.com/formulas/splash-screen/)

---

<div class="post-metadata">

**Author:** ![edd](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@edd](https://forum.ionicframework.com/u/edd)\
**Post date:** [October 20, 2014, 9:50am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/4 "2014-10-20T09:50:42Z")

</div>

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](http://forum.ionicframework.com/t/customizing-the-splashscreen-launch-image/10428)

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](http://cordova.apache.org/docs/en/4.0.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens)

---

<div class="post-metadata">

**Author:** ![felipew](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/felipew/32/13128_2.png) [@felipew](https://forum.ionicframework.com/u/felipew)\
**Post date:** [October 20, 2014, 10:07am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/5 "2014-10-20T10:07:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![protocol10](https://avatars.discourse-cdn.com/v4/letter/p/ec9cab/32.png) [@protocol10](https://forum.ionicframework.com/u/protocol10)\
**Post date:** [October 20, 2014, 10:12am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/6 "2014-10-20T10:12:13Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![protocol10](https://avatars.discourse-cdn.com/v4/letter/p/ec9cab/32.png) [@protocol10](https://forum.ionicframework.com/u/protocol10)\
**Post date:** [October 21, 2014, 5:52am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/7 "2014-10-21T05:52:46Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![edd](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@edd](https://forum.ionicframework.com/u/edd)\
**Post date:** [October 21, 2014, 7:54am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/8 "2014-10-21T07:54:47Z")

</div>

Hi @protocol10 - glad you got it working!

---

<div class="post-metadata">

**Author:** ![HugoS](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@HugoS](https://forum.ionicframework.com/u/HugoS)\
**Post date:** [October 31, 2014, 5:46pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/9 "2014-10-31T17:46:38Z")

</div>

I want to hide my splash screen after getting some data, but it seems [http://learn.ionicframework.com/formulas/splash-screen/](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?

---

<div class="post-metadata">

**Author:** ![edd](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@edd](https://forum.ionicframework.com/u/edd)\
**Post date:** [October 31, 2014, 7:30pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/10 "2014-10-31T19:30:17Z")

</div>

Have you got this in your config.xml?

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

---

<div class="post-metadata">

**Author:** ![HugoS](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@HugoS](https://forum.ionicframework.com/u/HugoS)\
**Post date:** [October 31, 2014, 8:00pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/11 "2014-10-31T20:00:42Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![edd](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@edd](https://forum.ionicframework.com/u/edd)\
**Post date:** [October 31, 2014, 8:43pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/12 "2014-10-31T20:43:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HugoS](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@HugoS](https://forum.ionicframework.com/u/HugoS)\
**Post date:** [October 31, 2014, 9:54pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/13 "2014-10-31T21:54:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gastonbesada](https://avatars.discourse-cdn.com/v4/letter/g/8dc957/32.png) [@gastonbesada](https://forum.ionicframework.com/u/gastonbesada)\
**Post date:** [October 31, 2014, 11:17pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/14 "2014-10-31T23:17:34Z")

</div>

@edd Try this [White page showing after splash screen before app load](http://forum.ionicframework.com/t/white-page-showing-after-splash-screen-before-app-load/2908/9)

---

<div class="post-metadata">

**Author:** ![HugoS](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@HugoS](https://forum.ionicframework.com/u/HugoS)\
**Post date:** [October 31, 2014, 11:32pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/15 "2014-10-31T23:32:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gastonbesada](https://avatars.discourse-cdn.com/v4/letter/g/8dc957/32.png) [@gastonbesada](https://forum.ionicframework.com/u/gastonbesada)\
**Post date:** [October 31, 2014, 11:44pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/16 "2014-10-31T23:44:06Z")

</div>

@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)](http://forum.ionicframework.com/t/need-help-with-displaying-splash-screen-on-android-cordova-3-6/10436)

---

<div class="post-metadata">

**Author:** ![edd](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@edd](https://forum.ionicframework.com/u/edd)\
**Post date:** [November 3, 2014, 9:58am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/17 "2014-11-03T09:58:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HugoS](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@HugoS](https://forum.ionicframework.com/u/HugoS)\
**Post date:** [November 3, 2014, 11:39am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/18 "2014-11-03T11:39:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sagman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sagman/32/8087_2.png) [@sagman](https://forum.ionicframework.com/u/sagman)\
**Post date:** [December 29, 2014, 10:39am UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/19 "2014-12-29T10:39:45Z")

</div>

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:

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.

---

<div class="post-metadata">

**Author:** ![hay](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hay/32/72055_2.png) [@hay](https://forum.ionicframework.com/u/hay)\
**Post date:** [February 18, 2015, 3:29pm UTC](https://forum.ionicframework.com/t/how-to-create-a-splash-screen/11438/20 "2015-02-18T15:29:48Z")

</div>

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);
```