16 Jun

Using PhoneGap Plugins to Create a Splash Screen Part Two: Using PhoneGap Plugins

PhoneGap Plugins Logo
Part one of this blog series, Using PhoneGap Plugins to Create a Splash Screen Part One: Creating a Splash Screen discusses how to design splash screens for mobile applications. In this part of the series you will learn how to use PhoneGap plugins to apply the screen you created. PhoneGap provides a series of core plugins that help developers take advantage of a mobile device’s native features such as the camera or ability to vibrate. There are three places you can look for pre built plugins. You can search npm, git repositories or PhoneGap’s plugin repository. In this post you will be using a plugin from PhoneGap’s base repository, the splash screen plugin.

Plugins need to be implemented differently for each platform so you need to be sure to read into how to how apply the one you have selected correctly for the device you are working on. In this example you will be installing the splash screen plugin on an android device.

Step 1) Importing your Plugin

You will import the plugin that you have chosen into your config.xml file. You need to include the plugin name, spec, and source. The spec is your plugin version, your plugin will work without this, but it is highly recommended that you include the version. The source for plugins from the PhoneGap core where the splash screen is located will be “pgb”. The import script for the splash screen will look like this once all of the parameters are added:

<plugin name="cordova-plugin-splashscreen" spec="~4.0.2" source=”pgb” />

Some plugins require you to add in a reference to the javascript files. This is not the case with most PhoneGap core plugins like the splash screen plugin. If you are required to reference the files you will not be adding them into your project when you upload it on PhoneGap Build. The files will be automatically injected by PhoneGap and adding them in advance will cause problems with your build. Read the documentation for your plugin if you are using a different plugin, as mentioned before each one is different.

Step 2) Adding Your Platforms

Once you have loaded in your splash screen plugin you will need to specify the platforms you are targeting. In this example you are using Android. To do this you will add the following code to your config.xml file.

 <platform name="android"></platform>

If you would like to add in other platforms the format is the same. There is no limit on the number of platforms you can use.

Step 3) Add Your Screens

The step is to add in your splash screen files. If you read part one of this post you will be using the png files you created. Nest them into your platform tags. You will have one default screen and a landscape and portrait screen for each pixel density.

    <platform name="android">
        <splash src="splash.png" />
        <splash src="res/screen/android/splash-port-ldpi.png" platform="android" density="port-ldpi" />
        <splash src="res/screen/android/splash-port-mdpi.png" platform="android" density="port-mdpi" />
        <splash src="res/screen/android/splash-port-hdpi.png" platform="android" density="port-hdpi" />
        <splash src="res/screen/android/splash-port-xhdpi.png" platform="android" density="port-xhdpi" />

        <splash src="res/screen/android/splash-land-ldpi.png" platform="android" density="land-ldpi" />
        <splash src="res/screen/android/splash-land-mdpi.png" platform="android" density="land-mdpi" />
        <splash src="res/screen/android/splash-land-hdpi.png" platform="android" density="land-hdpi"  />
        <splash src="res/screen/android/splash-land-xhdpi.png" platform="android" density="land-xhdpi"  />
    </platform>
Step 4) Customize Your Splash Screen with Preferences

Now it is time to customize your splash screen. The splash screen plugin gives you a few different preferences to work with. The following are a few examples that you can use.

SplashScreenDelay
The SplashScreenDelay lets you add a delay to the amount of time before the splash screen is hidden. This is set in milliseconds. It is useful when you want to expose users to your branding but your application has little or no loading time. This can also be set to 0 to force your screen to automatically hide.

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

FadeSplashScreen and FadeSplashScreenDuration
FadeSplashScreen can be set to true to give your screen a fading effect as it transitions to the application. You can set how long this transition takes with fadeSplashScreenDuration, also set in milliseconds.

   <preference name="FadeSplashScreen" value="true"/>
   <preference name="FadeSplashScreenDuration" value="750"/>

ShowSplashScreenSpinner and SplashScreenSpinnerColor
Lastly you should add your spinner. You learned about the parts of a splash screen in the first part of this series. Now is when we add in our spinner. This is set with ShowSplashScreenSpinner. You can also change the color of your spinner to go along with your application by using SplashScreenSpinnerColor.

   <preference name="ShowSplashScreenSpinner" value="true"/>
   <preference name="SplashScreenSpinnerColor" value="#ffffff"/>

Step 5) Add the Splash Screen to your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project. Once you have done this click on Rebuild all. Download the new version of the project to your android device. Open up the application on your phone. You will notice you are now being greeted by your new splash screen!

Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate-splashScreen.apk

Share this

Leave a reply