New Formula - Customizing the Splash Screen

tutorials
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.

1 Like