How To Add Splash Screen To Cordova Phonegap Apps Using The CLI

In this post I will explain how to add splash screen to your Cordova/Phonegap app using the CLI.

For android but if you are building for IOS you can follow along as well as there is not a lot off difference between android and IOS when it comes to SplashScreens.

I have already have two other post showing you

  1. How u can add splashscreens for phongap Build service and also
  2. How to add splash screen for ionic framework apps.

Q:What is a Splashscreen ?

A:A splashscreen is nothing but an image that shows up before you app loads.

A thing to note here is that splashscreens show up before the app loads, you app wont load in the background as the splashscreen is showing but it will load after the splashscreen has done showing.

Watch Video Tutorial Of This Post Here:

For Adding splash-screens we are to follow three steps:

1) Add the images to our project folder.

2) Download the splachscreen plugin.

3) Make changes to the config.xml file.


1) Add the images to our project folder.

Before we go and add the images to our project folder we need to create the images first.

Depending on your platform the size of the images and the dpi value will change. You can take a quick look at the documentation for phonegap here and figure out what kind of images you need to make.

 Once the images have been created we need to add them to our project

For android add the images to:


Inside the res folder you will see a folder structure like this


You need to open each “drawable-port” for portrait and “drawable-land” for landscape images and drop the images you want inside.

REMEMBER that name of the images matters so make sure that you name all you images inside each folder as sceen.png

 For IOS add the images to:

Platform/android/{{project_name}} /resources/splash


2) Download the splash-screen plugin.

Go to the website and search for splash plugin and it should pop up.

Once you have the plugin install it using the following command

Phonegap plugin add org.apache.cordova.splashscreen


3) Make changes to the config.xml file.

Now we need to make changes to the config.xml file.

If we open the config.xml file there will be a lot of plugins and values already set and this can get confusing so I have created a simple config.xml file that will make if easy for us to see the changes


Now in the above config.xml file we need to add

This will make our app have the splash-screen.

We can also add the time for which we want to display our splash-screen by adding the following to our config.xml


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)