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> 

Comments

  1. Hi ,
    I am building an app with html 5 using phonegap.
    The files that I use are config.xml and index.html - no java files
    Can you tell me how to display splash screen?

    ReplyDelete
  2. Sunil

    Which IDE you are using to write the codes.

    Thanks

    Arif

    ReplyDelete

Post a Comment

Popular posts from this blog

Insert form data into db and validate login Phonegap

Getting data from db and show in listview in Android Apache Cordova

Get Current Location and load on GoogleMap