Home

PhoneGap for iPhone have a perfect feature - "AutoHideSplashScreen". You can set this variable to OFF and hide splash screen with js navigator.splashscreen.hide(); after page have been loaded.

I'm offering pretty same functionality for android. The idea is to add ImageView with your splash screen to android viewstack and hide WebView. After page was loaded you can call js plugin method that will hide splashscreen and show WebView.

This approach needs 2 files:

DroidGapWithCustomSplashScreen.java - abstarct class that inherited from DroidGap
CustomSplashScreenPhugin.java - PhoneGap plugin that hides splashscreen

All you need is to extend your activity from DroidGapWithCustomSplashScreen and set drawable resource id of splash screen:

public class LandingActivity extends DroidGapWithCustomSplashScreen {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {		
		super.onCreate(savedInstanceState);				
		super.setIntegerProperty("loadUrlTimeoutValue", 60000);
		super.setIntegerProperty(C_CUSTOM_SPLASH_SCREEN, R.drawable.splash);		
		super.loadUrl("file:///android_asset/www/index.html");
	}

	@Override
	protected void onTryAgain() {
		Intent i = new Intent(this, LandingActivity.class);
		i.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
		i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
		i.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
		this.startActivity(i);
	}	
}

include plugin:

<plugin name="CustomSplashScreen" value="com.inetstd.android.phonegap.customsplashscreen.CustomSplashScreen" />

And now your are able to call from js (on deviceReady):

PhoneGap.exec(null, null, 'CustomSplashScreen', 'hide', []);

Another benefit on using this library is that it override default displayError method and give you opportunity to implement logic when page cannot be loaded (no connection). In example it simply restarts the apps.

How it works.

Following code adds custom splash screen:

public abstract class DroidGapWithCustomSplashScreen extends DroidGap {
...
	@Override
	public void init() {		
		super.init();		
		// root is child of FrameLayout. In init method PG puts root to viewstack. Before root.getParent() returns null. 		
		pgContainerView = (ViewGroup) root.getParent();

		// better to use invisible. with View.GONE - WebView has 0,0 size and on show will call window.onresize 	
		customSpashScreen = new ImageView(this);		
		customSpashScreen.setImageResource(super.getIntegerProperty(C_CUSTOM_SPLASH_SCREEN, 0));
		customSpashScreen.setScaleType(ScaleType.CENTER_CROP);
		pgContainerView.addView(customSpashScreen);

		// shows splash screen and hide webView
		showCustomSplashScreen();		
	}

	public void showCustomSplashScreen() {		
		if (customSpashScreen == null) return;
		root.setVisibility(View.INVISIBLE);
		appView.setVisibility(View.INVISIBLE);		
		customSpashScreen.setImageResource(super.getIntegerProperty(C_CUSTOM_SPLASH_SCREEN, 0));
		customSpashScreen.setVisibility(View.VISIBLE);		

	}

	public void hideCustomSplashScreen() {		
		if (customSpashScreen == null) return;		
		try {		
			customSpashScreen.setVisibility(View.GONE);		
			root.setVisibility(View.VISIBLE);
			appView.setVisibility(View.VISIBLE);
		} catch (Exception e) {
			Log.e("DroidGapWithCustomSplashScreen", "hideCustomSplashScreen - do it in ui thread");
		}
	}
...
}

PhoneGap plugin is quite simple:

public class CustomSplashScreenPhugin extends Plugin {
	/**
	 * Hide splash screen 
	 */
	@Override
	public PluginResult execute(String action, JSONArray data, String callbackId) {
		PluginResult result = new PluginResult(Status.OK);
		
		if (action.equals("hide") && this.ctx instanceof DroidGapWithCustomSplashScreen) {
			// because of - Only the original thread that created a view hierarchy can touch its views.
			this.ctx.runOnUiThread(new Runnable() {				
				@Override
				public void run() {
					((DroidGapWithCustomSplashScreen) CustomSplashScreenPhugin.this.ctx).hideCustomSplashScreen();
				}
			});
			
		}		
		return result;
	}
}