Home » Android » cordova – How add an Application Pre-loader/Startup screen/Splash Screen to My PhoneGap Android App

cordova – How add an Application Pre-loader/Startup screen/Splash Screen to My PhoneGap Android App

Posted by: admin June 15, 2020 Leave a comment


I have created a Android app using phone Gap.It works fine.How I add a pre-loader image to My App.Now it show a white page while loading the application.

Help is highly appreciated,

How to&Answers:

If you mean pre-loader image has Splash screen refer the following code;

For PhoneGap :

public class MyDefaultActivity extends Activity {

   public void onCreate(Bundle savedInstanceState) {
        super.setIntegerProperty("splashscreen", R.drawable.splash); // Displays the splash screen for android
        super.loadUrl("file:///android_asset/www/index.html",3000); // Second parameter is duration for delay of splash screen

For Android Native app :

public class MySplashScreen extends Activity {
    private CountDownTimer lTimer;

    public void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.splashscreen); // Contains only an LinearLayout with backround as image drawable

        lTimer = new CountDownTimer(5000, 1000) {
            public void onFinish() {
            public void onTick(long millisUntilFinished) {
                // TODO Auto-generated method stub

    private void closeScreen() {
        Intent lIntent = new Intent();
        lIntent.setClass(this, MyLauncherActivity.class);

Make sure a file called splash.png is present as res/drawable-hdpi/splash.png (RGBA).


You could create an AsyncTask implementation for showing an image / progress indicator while your application’s data is loading in the background thread.

  1. In the async task’s onPreExecute
    method you show the chosen preloader
    (image / ProgressDialog / etc)
  2. in the doInBackground method you
    start loading the necessary data,
  3. in the onPostExecute method you
    remove/hide your preloader, so the
    activity’s desired layout will be


If by preloader image you mean a low-resolution version of the big image, you can use a VewSwitcher with two ImageViews in it: one image view contains the preloader image, while the other contains the full image (while it’s loaded). Initially, you make the preloaded image visible, but when the big Bitmap finishes loading you just use switcher.showNext() to show the full image.

Some further reading about the ViewSwitcher (the example does something similar): here