A Splash Screen for Android using Phonegap

Hi Guys,

In this tutorial we have added the article to show the splash screen for a short time and then after load the index.html file.
Adobe Cordova includes a Splashscreen API so you can add a splash screen to your app, which consists of a still graphic image displaying before your app starts.

I have recently begun a lot of experiment to build the application in hybrid to make for android and ios creating native mobile apps with HTML5/CSS3/JS. I found that Titanium Appcelerator and PhoneGap have two option to create the mobile application hybrid. Both products are great, but their approaches (and capabilities) are very different. To work in both I have personally feel that PhoneGap is much easy to build the mobile application rather than Titanium.

If you create your Android splash screen as a 9-patch image, then the image will resize proportionally when displayed in either portrait or landscape mode.

In order to have a splash screen in a PhoneGap Android application you need to put your splash.png file into res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi, res/drawable-xhdpi. Where those directories represent low, medium, high and extra large dots per inch. You'll need to resize you slash.png for each directory or Android will stretch it for you.
The sizes of each image should be:

• xlarge (xhdpi): at least 960 x 720
• large (hdpi): at least 640 x 480
• medium (mdpi): at least 470 x 320
• small (ldpi): at least 426 x 320

Then in your main Java class, the one that extends DroidGap, you'll need to add one line and modify another. First add:

super.setIntegerProperty("splashscreen", R.drawable.splash);

this line should show up under super.onCreate but before super.loadUrl. Then you'll need to modify your loadUrl method to pause for 5 seconds before loading up the main page. It would look like this:

super.loadUrl("file:///android_asset/www/index.html", 5000);

A Second argument to load the loadURL method define the lenght of time the splash screen should be displayed. The value is given in millisecond:

MainActivity.java

package com.sunil.splacescreen;

import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends DroidGap {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  super.setIntegerProperty("splashscreen", R.drawable.splash);
  super.loadUrl("file:///android_asset/www/index.html", 5000);
 }
}

index.html

< html>
< html>
< head>
< title>PhoneGap< /title>
< script type="text/javascript" charset="utf-8" src="cordova.js">< /script> 
< /head> 
<  body>
< h1> Hello PhoneGap< /h1>
< script> document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady() {
 navigator.splashscreen.show();
 //navigator.splashscreen.hide(); //if u want to hide the splacescreen
 }
 < /script>
<  /body>
< /html>