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:

PlatformOrientationResolution
AndroidMDPI Landscape480×320
AndroidMDPI Portrait320×480
AndroidHDPI Landscape800×480
AndroidHDPI Portrait480×800
AndroidXHDPI Landscape1280×720
AndroidXHDPI Portrait720×1280
iPhoneRetina Portrait640×960
iPhonePortrait320×480
iPadRetina Portrait1536×2048
iPadPortrait768×1024
iPadRetina Landscape2048×1536
iPadLandscape1024×768

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

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

Search

Follow Us

Subscribe

Subscribe to my newsletter for monthly tips and tricks on subjects such as mobile, web, and game development.

Subscribe on YouTube

Support This Site