Ionic: How to activate default splash screen?

1
votes

I am making an app, that to initialize everything it takes about a second. So it became clear that the best solution is to display a splash screen.

I am now making a blank app from scratch to test it.

THE STEPS:

For now i have done the following steps:

  1. Create a blank app.

  2. Added platform android and ios.

  3. Running ionic resources (i suspect there is no need of this if have added platforms, but i am not sure)

  4. Check that into the resource folder properly appear icon.png and splash.png

  5. Check config.xml and see that there are the following settings:

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

  6. Install ngCordova and include it in index.html and as a dependency

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

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

It is supposed to work i guess. But i don't see any splash screen in my app.

THE QUESTION:

How can i activate the splash screen? I mean how can i actually see it appearing in the main page?

(for test purpose that ionic default image is fine and 3 seconds is okay)

3
cordovaionic-frameworkionicsplash-screen

3 Answers

4
votes

Ok basically it is allright. The problem was just in testing the app (my bad). I was making quick tests in the browser (localhost) and by using quirktools.com/screenfly

But in order to see the splashscreen in action i had to test the app directly in the phone or with emulators like Genymotion.

There the splashscreen is working properly. No plugin needed. Basically just following that steps is enough (even without running ionic resources).

2
votes

You should add this to your plugins, then your settings in config.xml will work.

0
votes

Yes, you've read the instructions OK, but what you're missing is the ionic resources command. Take a look at the here for more info but basically you just have to run the aforementioned ionic resources command from the root project directory after you made the necessary .psd of .png files and placed them in the resources folder.