Phonegap - add a splash screen for Android app

Could anybody please advise how I can add a splash screen to my HTML5 Phonegap based Android App. I just want it to display for 5 seconds on load. Also - can anybody advise what dimensions the splash screen should be.

Solution 1:

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 splash.png (the file name is important here) 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.

Solution 2:

Phonegap (Apache Cordova) documentation has enough details about the splash screen and different resolutions for both Android and iOS at one place.

http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html

Solution 3:

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);
    ...
}...