It is always nice to have splash screens in your application. It is a great way to get your branding out, and show that your application is currently loading. No one likes to see a blank white screen for five seconds during launch.

Lucky for us, it is incredibly simple to add a splash screen to our Ionic project. Using Apache Cordova’s Splashscreen plugin, we can add a splash to our application with just two lines in our config.xml file.

If you haven’t already, add the iOS and Android platforms to your IonicFramework project:

Add iOS and Android platformsShell 

    ionic platform add android

To take advantage of Apache Cordova’s splash screen plugin, add it to your project by running:

Apache Cordova Splash ScreenShell

 cordova plugin add org.apache.cordova.splashscreen

Now this is where the Cordova documentation gets a little sketchy. It claims you must add the following to your config.xml, but yet it doesn’t work.

config.xmlXHTML 

    <preference name="SplashScreen" value="splash" />

Instead you must change value=”splash” with value=”screen”. When you’ve done this, your Android and iOS builds will display a splash screen on application launch for 3000 milliseconds. You can alter this time with whatever you’d like or dismiss the splash screen at the end of your $ionicPlatform.ready() method by running navigator.splashscreen.hide()

You can find the splash screen images in the platforms/android/res and platforms/ios/{project_name}/Resources/splash directories. For Android, you must navigate to each of the screen density / orientation directories to make your changes.

Recommended splash screen sizes are as follows:

Platform                                       Orientation Resolution

Android MDPI Landscape        480×320

You can find more information regarding icons and splash screens via Apache Cordova’s official documentation.