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

  • Pingback: How To Add Splash Screen For Ionic Framework Apps - pointDeveloper.com()

  • Abhijith

    I added the plugin and tried to build, and i am getting this error. Can you help me with this

    • This seems that your config.xml file was not at the right place..For building apps with the cli the config.xml file should be at the same level of the “www” folder and not inside it..

      If this continues i suggest you create a fresh project and copy/paste your files to the new project and see

  • Abhijith

    Hey gud job with your videos .. I have an issue wit my app, where I’ve added a video tag through jquery mobile and accessing video file locally from my tablet by building through phonegap cli as guided by u in your tutorial, I’m facing following issues:

    1) I hear only audio until I full screen
    2) This is a very recent problem I started encountering frm couple of days where when I try to hit back button to exit full screen, the app gives an error message saying unfortunately myappname stopped.

    • i have seen such problems when you build for one api (say android 4.4) and use it in a device which had 4.1..so make sure that u have build and are testing for the same version.

      Secondly you need to add the .close() method to exit out of the video for the backbutton.

      see the docs for more:
      https://github.com/moust/cordova-plugin-videoplayer

  • Abhijith

    Can you guide me through procedures to install and how to use an installed videoplayer plugin … Thinking it might fix my issue

  • Ibrahim Samad

    Thanks very helpful.

%d bloggers like this: