Add A Splash Screen To An Ionic Framework Project

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 Ionic Framework project:

ionic platform add android
ionic platform add ios

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

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.

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

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:

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

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.