New Formula - Customizing the Splash Screen

For Android first add the platform:

ionic platform add android

This will create directory structure for Android app. All resources are then located in ‘\platforms\android\res’ subdirectories. You can add your icons and splash images to the directories. But this is not enough. You have to modify your config.xml in the root directory of your project. Regarding to the docs it should be in the /www folder, but in fact it is in the root. Now add to the XML this:

<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="20000" />
<preference name="auto-hide-splash-screen" value="false" />

The first line defines the splash screen image file name without extension that is your splash screen in the res subdirectories.

The second line is the time in ms (here it is 20 secs) that is the maximum time to display the splash screen. You should hide your splascreen from code if your app is loaded before this timeout. I’ve got it in the platform ready section of my app .run:

.run(function($rootScope, $ionicPlatform, $cordovaSplashscreen) {

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

Regarding Cordova docs you should also call ```cordova prepare’’’, but seems to work without this as well.

And you of course have to have the plugin installed.

1 Like

Great! Do you have an example of this on Github? One who works.

Create Ionic Project

ionic start AppName sidemenu

install splashscreen plugin

cd appname
cordova plugin add org.apache.cordova.splashscreen

add these two lines in config.xml

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

replace your splash screen images(screen.jpg) in drawable folders path\AppName\platforms\android\res\drawable

Now, Build the project

  ionic build android
  ionic emulate android

hope it works for you :smile:

2 Likes

Having quite a bit of trouble integrating ngCordova within my Ionic App, specifically for managing the Splashscreen.

I’ve installed the Cordova “Splashscreen” plugin:

cordova plugins list

reports:

...
org.apache.cordova.splashscreen 0.3.2 "Splashscreen"

I’ve updated my defaults.xml to reflect:

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

I’ve added the JavaScript library (from the GitHub repo), directly before cordova.js:

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

I’ve added ngCordova to app.js within the angular.module requires:

var app = angular.module('ionicApp', ['ionic', 'ngCordova'])

I’m passing $cordovaSplashscreen to app.run

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

However, within run() I am unable to use the show() or hide() methods. I get the following console error:

Uncaught TypeError: Cannot read property 'show' of undefined 

If I console.log() the $cordovaSplashscreen object, I get:

Object {hide: function, show: function}hide: function () {arguments: nullcaller: nulllength: 0name: ""prototype: Object__proto__: function Empty() {}<function scope>show: function () {__proto__: Object app.js:6

I see the show() and hide() methods… they look naked.

Also, the tutorial demonstrates using $cordovaSplashScreen (note the uppercase Screen) where I’ve found that simply does not work. $cordovaSplashscreen seems to get me a bit further but I’m at a complete loss.

Also, using the ngCordova “Custom Build” option is trash. I wish they’d test these things?!?! You’ve got to get the ngCordova lib from GitHub apparently.

Thanks for any help!

i have the exact same issues like @vitaminrad. Is there anything we did wrong? My show() and hide() methods are also naked. But only on Android. On iOS it works like a charm.

regards,

Luc

Hi,

Thanks for the tutorial. I noticed that both this tutorial and the Adding an App Icon tutorial only cover iOS.

Any plans to update these to cover Android too?

Something like @rafaellop’s post in this thread would be good!

Thanks

1 Like

Adding icons for android is the same process as ios

 <platform name="android">
          <icon src="res/android/ldpi.png" density="ldpi" />
          <icon src="res/android/mdpi.png" density="mdpi" />
          <icon src="res/android/hdpi.png" density="hdpi" />
          <icon src="res/android/xhdpi.png" density="xhdpi" />
 </platform>

Also, with cordova 3.6, you can now specify your splash screens via the config.xml

http://cordova.apache.org/docs/en/3.6.0/config_ref_images.md.html#Example%20configuration

3 Likes

Thanks for the info regarding the Android icons.
Also great to hear that you can specify the splash screens in config.xml in Cordova 3.6!

May I suggest that the Tutorials for both Customising the Splash Screen and Adding an App Icon are updated with all that info. I’m sure it would save a few people from struggling with them and help avpid any further confusion.

Many thanks

I’m using Ionic with Phonegap Build and while I can get the splash screen to stay when building with Phonegap I can’t when building locally using Ionic.

E.g. if I have the <preference name="AutoHideSplashScreen" value="false" /> tag in my config.xml file, and then I run a build (ionic build ios) and emulate (ionic emulate ios), the splash screen appears then disappears as soon as the app is ready.

However if I build the same project via Phonegap Build, using the <preference name="auto-hide-splash-screen" value="false" /> tag in the config file, then the resulting app will hold the splash screen indefinitely.

I’m also having issues getting a custom splash screen to appear when running a build through Phonegap. Its fine using ionic, but phonegap just uses the default splash screen, even though my icons are fine!?!?

I’m running version 3.6.3-0.2.13 of Cordova locally within Ionic. Here is my current config.xml file:-

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.contacto2147716" 
    version="1.0.0"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
    xmlns:gap="http://phonegap.com/ns/1.0">

    <name>Contacto</name>

    <description>Contacto application to help keep track of your contacts</description>

    <author href="http://www.contacto.com" email="support@contacto.com">Contacto</author>

    <feature name="SplashScreen">
           <param name="ios-package" value="CDVSplashScreen" />
    </feature>

    <feature name="StatusBar">
        <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
    
    <feature name="Keyboard">
        <param name="ios-package" value="IonicKeyboard" onload="true" />
    </feature>

    <!--
        If you do not want any permissions to be added to your app, add the
        following tag to your config.xml; you will still have the INTERNET
        permission on your app, which PhoneGap requires.
    -->
    <preference name="permissions" value="none"/>

    <!-- Customize your app and platform with the preference element. -->
    <preference name="phonegap-version" value="3.6.3" />                     <!-- all: current version of PhoneGap -->
    <preference name="orientation" value="portrait" />                             <!-- all: default means both landscape and portrait are enabled -->
    <preference name="target-device" value="handset" />                         <!-- all: possible values handset, tablet, or universal -->
    <preference name="fullscreen" value="true" />                                 <!-- all: hides the status bar at the top of the screen -->
    <preference name="webviewbounce" value="true" />                         <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
    <preference name="prerendered-icon" value="true" />                         <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
    <preference name="stay-in-webview" value="false" />                         <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
    <preference name="ios-statusbarstyle" value="black-opaque" />         <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
    <preference name="detect-data-types" value="true" />                        <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
    <preference name="exit-on-suspend" value="false" />                        <!-- ios: if set to true, app will terminate when home button is pressed -->
    <preference name="show-splash-screen-spinner" value="true" />         <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
    <preference name="auto-hide-splash-screen" value="true" />             <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
    <preference name="disable-cursor" value="false" />                             <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
    <preference name="android-minSdkVersion" value="7" />                     <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
    <preference name="android-installLocation" value="auto" />                 <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->
    <preference name="UIWebViewBounce" value="false"/>
    <preference name="DisallowOverscroll" value="true" />
    <preference name="BackupWebStorage" value="none"/>
    <preference name="StatusBarOverlaysWebView" value="true" />
            
    <!-- Plugins -->

    <!-- Core plugins -->
    <gap:plugin name="org.apache.cordova.battery-status" />
    <gap:plugin name="org.apache.cordova.camera" />
    <gap:plugin name="org.apache.cordova.media-capture" />
    <gap:plugin name="org.apache.cordova.console" />
    <gap:plugin name="org.apache.cordova.contacts" />
    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.device-motion" />
    <gap:plugin name="org.apache.cordova.device-orientation" />
    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.file" />
    <gap:plugin name="org.apache.cordova.file-transfer" />
    <gap:plugin name="org.apache.cordova.geolocation" />
    <gap:plugin name="org.apache.cordova.globalization" />
    <gap:plugin name="org.apache.cordova.inappbrowser" />
    <gap:plugin name="org.apache.cordova.media" />
    <gap:plugin name="org.apache.cordova.network-information" />
    <gap:plugin name="org.apache.cordova.splashscreen" />
    <gap:plugin name="org.apache.cordova.vibration" />
    <gap:plugin name="org.apache.cordova.statusbar" />

    <!-- Third party plugins -->
    <!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
    <!--
        <gap:plugin name="com.phonegap.plugins.barcodescanner" />
    -->

    <!-- Define app icon for each platform. -->
    <!-- The default icon must be named icon.png and must reside in the root of your application folder.-->
    <icon src="icon.png" />
    
    <icon src="res/icons/android/ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
    <icon src="res/icons/android/mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
    <icon src="res/icons/android/hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
    <icon src="res/icons/android/xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
    
    <icon src="res/icons/blackberry/icon-86.png" gap:platform="blackberry10" />
       <icon src="res/icons/blackberry/icon-150.png" gap:platform="blackberry10" />

    <!-- iOS 8.0+ -->
    <!-- iPhone 6 Plus  -->
    <icon src="res/icons/ios/icon-60@3x.png" gap:platform="ios" width="180" height="180" />
    <!-- iOS 7.0+ -->
    <!-- iPhone / iPod Touch  -->
    <icon src="res/icons/ios/icon-60.png" gap:platform="ios" width="60" height="60" />
    <icon src="res/icons/ios/icon-60@2x.png" gap:platform="ios" width="120" height="120" />
    <!-- iPad -->
    <icon src="res/icons/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
    <icon src="res/icons/ios/icon-76@2x.png" gap:platform="ios" width="152" height="152" />
    <!-- iOS 6.1 -->
    <!-- Spotlight Icon -->
    <icon src="res/icons/ios/icon-40.png" gap:platform="ios" width="40" height="40" />
    <icon src="res/icons/ios/icon-40@2x.png" gap:platform="ios" width="80" height="80" />
    <!-- iPhone / iPod Touch -->
    <icon src="res/icons/ios/icon.png" gap:platform="ios" width="57" height="57" />
    <icon src="res/icons/ios/icon@2x.png" gap:platform="ios" width="114" height="114" />
    <!-- iPad -->
    <icon src="res/icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
    <icon src="res/icons/ios/icon-72@2x.png" gap:platform="ios" width="144" height="144" />
    <!-- iPhone Spotlight and Settings Icon -->
    <icon src="res/icons/ios/icon-small.png" gap:platform="ios" width="29" height="29" />
    <icon src="res/icons/ios/icon-small@2x.png" gap:platform="ios" width="58" height="58" />
    <!-- iPad Spotlight and Settings Icon -->
    <icon src="res/icons/ios/icon-50.png" gap:platform="ios" width="50" height="50" />
    <icon src="res/icons/ios/icon-50@2x.png" gap:platform="ios" width="100" height="100" />
            
    <icon src="res/icons/wp/icon.png" gap:platform="winphone" />
    <icon src="res/icons/wp/tileicon.png" gap:platform="winphone" gap:role="background" />
     
    <!-- PHONEGAP BUILD SPLASH SETTINGS -->
    <!-- Define app splash screen for each platform. -->
    <!-- The default splash must be named splash.png and must reside in the root of your application folder.-->
    <gap:splash src="splash.png" />
    
    <!-- you can use any density that exists in the Android project -->
    <gap:splash src="res/screen/android/splash-land-hdpi.png" gap:platform="android" gap:qualifier="land-hdpi" />
    <gap:splash src="res/screen/android/splash-land-ldpi.png" gap:platform="android" gap:qualifier="land-ldpi" />
    <gap:splash src="res/screen/android/splash-land-mdpi.png" gap:platform="android" gap:qualifier="land-mdpi" />
    <gap:splash src="res/screen/android/splash-land-xhdpi.png" gap:platform="android" gap:qualifier="land-xhdpi" />
    
    <gap:splash src="res/screen/android/splash-port-hdpi.png" gap:platform="android" gap:qualifier="port-hdpi" />
    <gap:splash src="res/screen/android/splash-port-ldpi.png" gap:platform="android" gap:qualifier="port-ldpi" />
    <gap:splash src="res/screen/android/splash-port-mdpi.png" gap:platform="android" gap:qualifier="port-mdpi" />
    <gap:splash src="res/screen/android/splash-port-xhdpi.png" gap:platform="android" gap:qualifier="port-xhdpi" />

    <!-- images are determined by width and height. The following are supported -->
    <gap:splash src="res/screen/ios/Default~iphone.png" gap:platform="ios" width="320" height="480"/>
    <gap:splash src="res/screen/ios/Default@2x~iphone.png" gap:platform="ios" width="640" height="960"/>
    <gap:splash src="res/screen/ios/Default-Portrait~ipad.png" gap:platform="ios" width="768" height="1024"/>
    <gap:splash src="res/screen/ios/Default-Portrait@2x~ipad.png" gap:platform="ios" width="1536" height="2048"/>
    <gap:splash src="res/screen/ios/Default-Landscape~ipad.png" gap:platform="ios" width="1024" height="768"/>
    <gap:splash src="res/screen/ios/Default-Landscape@2x~ipad.png" gap:platform="ios" width="2048" height="1536"/>
    <gap:splash src="res/screen/ios/Default-568h@2x~iphone.png" gap:platform="ios" width="640" height="1136"/>
    <gap:splash src="res/screen/ios/Default-667h.png" gap:platform="ios" width="750" height="1334"/>
    <gap:splash src="res/screen/ios/Default-736h.png" gap:platform="ios" width="1242" height="2208"/>
    <gap:splash src="res/screen/ios/Default-Landscape-736h.png" gap:platform="ios" width="2208" height="1242"/>
        
    <!-- images are determined by width and height. The following are supported -->
    <gap:splash src="res/screen/wp/splash.jpg" gap:platform="winphone" width="768" height="1280"/>
    
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="10000" />
    
    <content src="index.html"/>

    <!--
        Define access to external domains.
        <access /> - a blank access tag denies access to all external resources.
        <access origin="*" /> - a wildcard access tag allows access to all external resource.
        Otherwise, you can specify specific domains:
    -->
    <access origin="*"/>
    
    <!--
        <access origin="http://phonegap.com" /> - allow any secure requests to http://phonegap.com/
        <access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/
        <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.
    -->

</widget>

Any pointers would be greatly welcome as to why Phonegap Build is not displaying my custom splash screens. The file structure I’m pulling from github is something like:-

res/
www/
—css/
—img/
—js/
—lib/ionic/
—res/
—templates/
—index.html
config.xml
icon.png
splash.png

Hi @mhartington i’m having problem with spashscreen.

I follow the simple tutorial here
http://learn.ionicframework.com/formulas/splash-screen/

but seems not work

the splash screen is removed!!!

cordova --version
4.0.0

ionic --version
1.2.8

Some help?
Thank so much

We’re encouraging uses to follow cordova’s suggested way of handling splashscreens as well as app icons

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

man good job but i am really in trouble i have a flash screen a png file but that file is not showing what to do ?
I have added android platform but the problem is in res folder there are many folder and all folder contains logo picture (name screen.png which is showing as a logo) some folder are empty. so where to place my splash screen image(splashScreen.png)

Hi there
I am also “frustrating” for this splash screen issue. I’ve tried moving and copy files around, nothing got. This link is ok, but they don’t talk at all about splash screens (just a reference at the bottom of the page linking/refering to the splashscreen plugin; plugin info is so scarce).

So, do you know what is the cordova’s way of handling splashscreens? I’ve set up the icons as in the documentation and they work ok, but nothing got about the screens.

Cheers people!!

I answer myself by referring straight to what I think is SplashScreen location. Actually, changing the icon tag name for splash worked for me to set splash screens, just setting the screen definitions after icon definitions:

<platform name="android"> 
      <icon src="www/res/drawable-ldpi/icon.png" density="ldpi" />
      <icon src="www/res/drawable-mdpi/icon.png" density="mdpi" />
      <icon src="www/res/drawable-hdpi/icon.png" density="hdpi" />
      <icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" />

      <splash src="www/res/drawable-mdpi/screen.png" />
      <splash src="www/res/drawable-hdpi/screen.png" />
      <splash src="www/res/drawable-xhdpi/screen.png" />
    </platform>

This is for android, I manage icons and splashes for IOs in XCode, seems to be a bit more reliable than cordova CLI (although not better from my POV). In addition you can store the icon/splash files mostly wherever you want with the names you want (correct me if this is false!!!)

Cheers again

Thanks that’s what I did for iOS and it works fine.
Yes you can store the files where you like. I would not store them in the www folder though as they get copied across to your platforms www folder whcih takes time each time you build and increases app size.

1 Like

Hey @gerred, you said we could also do it in the routing layer and it’d be covered in another formula. Is there an example of this somewhere? Thanks!

Thanks! That’s works for me!

Hi,
I am new to ionic. Can anyone explain how to add animation to splash screen, like app is ‘loading’ or any progress bar (as .gif image) loading at time of splash screen.

Thanks in advanced!

My understanding is that Cordova does not allow for animated splash screens with its built in splashscreen config.
However, instead of showing the splash screen using cordova settings, skip straight to a custom loading screen with a spinner whilst you do something behind the scenes. Basically implement your own splash screen.

Hey,

I’m unable to visit mentioned link, when I hit link it redirects me to Ionic Getting stated page.