Skip to main content

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

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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:

Platform/android/res/

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 plugins.cordova.io 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

 

Got A Question?

Hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

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. :-)

%d bloggers like this: