Monday 6 May 2013

Showing Splash Screen At The Start Of Android PhoneGap Application

If you want to disaplay a splash screen at the beginning of Phonegap based Android application you need to put splash screen image(splash.png) inside res\drawable-hdpi,  res\drawable-mdpi,  res\drawable-idpi which can be located inside your project directory.
The splash screen image size should be different for different size of Android devices.
(same size image also worked)

For large screens size (hpdi) image size should be at least 640dp x 480dp
For normal screens size (mdpi) image size should be at least 470dp x 320dp
For small screens size (idpi) image size should be at least 426dp x 320dp
After putting the images in respective directory you need to add the the following code in your main Activity.java file before super.loadUrl method.
 super.setIntegerProperty("splashscreen", R.drawable.splash);
Then modify the super.loadUrl method to display the splash screen for 10 seconds before starting of the Phonegap application like this
 super.loadUrl("file:///android_asset/www/index.html", 10000);
So after modification your main Activity.java will look like this
package com.mindfire.HelloWorld;

import android.os.Bundle;
import org.apache.cordova.*;

public class RemindMeActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html", 10000);

//No need three line code         

    }
}





120 
down vote accepted

--------------------
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);That should do it for you.


I've recently made some updates to how the SplashScreen works on PhoneGap Android. The main app now loads while the splash screen is being shown. 
This is a big improvement over the previous blocking splash screen call. Read more about the changes on my blog.












2 down vote  page loading before splash screen
-----------------------------------------------
In my Phonegap app, Android version, Eclipse debugger throws tantrums if you set the splash screen or even the 'loading' dialog before calling loadUrl.

Both will work in the actual app installed on a device, but they will break your debugging. So I've put them behind loadUrl, 
where they can do no harm and still show well before the app itself.

public class App extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html",5000);
    super.setStringProperty("loadingDialog", "Starting your app...");
    super.setIntegerProperty("splashscreen", R.drawable.splash);
    ...
}...

No comments:

Post a Comment