New Formula - Customizing the Splash Screen


#1

Hey all,

I’ve created a formula going over a simple thing that adds a lot of polish to your apps: customizing and controlling the splash screen in Cordova with Ionic and ngCordova!

Check it out here. Let me know if you have any feedback or questions.


#2

Thanks for the mention. :smile:

I was actually doing some R&D into splash screen customization a few weeks, and came across the Phone Gap Build differences. Was an interesting coincidence when this showed up in my twitter feed. :slight_smile:


#3

I’m new to Ionic and AngularJS and I’m trying to follow the Splash Screen formula, but when I get to the end of the formula it says to add this code:

app.run(function($cordovaSplashScreen) {
  setTimeout(function() {
    $cordovaSplashScreen.hide()
  }, 5000)
})

I’m pasting it at the top of the app.js file that is auto-generated for the basic tabbed application (above the angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])), but the splash screen is never removed. Is there a step I’m missing?

Also, the formula says to change AutoHideSplashScreen to false in platforms/ios/cordova/lib/defaults.xml but I’m seeing the file at platforms/ios/cordova/defaults.xml.

Thanks!


#4

Shouldn’t be above the declaration of your module. Should be like this…

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($cordovaSplashScreen) {
  setTimeout(function() {
    $cordovaSplashScreen.hide()
  }, 5000)
})

.config(function(){...etc...});

#5

Thanks for the reply. I removed the app.run(...) that I copied from the formula and I updated app.js so that it looks like it does in your code (I didn’t touch the .config part generated for the “tabs” starter app that the formula uses), but the splash screen is still not being removed (I’m running the app on an iPhone 5 through Xcode).

Are there any other changes that I need to make that are not mentioned in the formula? Thanks!


#6

Could you post more code? Maybe a codepen?


#7

can’t you just use

navigator.splashscreen.hide();

without the need to call cordova plugin with ngCordova?

what is the advantage of using ngCordova for splash screen purposes?


#8

Do you guys know how to automate the config.xml for copy the splash image in all platforms splash screen directory? Also for Android I don’t know where I should paste the image for do the first question. Something like this http://learn.ionicframework.com/formulas/adding-an-icon/ @andrewmcgivery @gerred


#9

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.


Using ngCordova with Ionic to check network connection DURING splashscreen
#10

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


#11

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:


#12

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!


#13

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


#14

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


SplashScreen location
App Icons and Splashscreen
#15

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


#16

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


#17

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


#18

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


#19

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


#20

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)