I want to show an animated image (currently using set of PNGs) as splash screen while resources are getting loaded.

I have been able to show the splash screen using this. But the problem is: the splash screen shows for a specified time then there is a black screen for 2-3 seconds and then index.html gets loaded.

Ideally what I want is to show the splash screen while resources get loaded. Once resources are loaded, pull the splash screen and immediately load the index.html file.

Below is my code:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Splash screen view
    setContentView(R.layout.splash);

    // Start animating the image
    final ImageView splashImageView = (ImageView) findViewById(R.id.SplashImageView);
    splashImageView.setBackgroundResource(R.drawable.flag);
    final AnimationDrawable frameAnimation = (AnimationDrawable)splashImageView.getBackground();
    splashImageView.post(new Runnable(){
        @Override
        public void run() {
            frameAnimation.start();             
        }           
    });


    final SplashScreen sPlashScreen = this;   

    // The thread to wait for splash screen events
    mSplashThread =  new Thread(){
        @Override
        public void run(){
            try {
                synchronized(this){
                    // Wait given period of time or exit on touch
                    wait(10000);
                }
            } 
            catch(InterruptedException ex){                 
            }

            finish();

            // Run next activity
            Intent intent = new Intent();
            intent.setClass(sPlashScreen, SomeActivity.class);
            startActivity(intent);
            //stop();               
        }
    };      
    mSplashThread.start();      
} 

public class SomeActivity extends DroidGap {                
    @Override
    public void onCreate(Bundle savedInstanceState) {    
     //some code to copy database files.
    }
}

Please note my development environment. android-sdk: api level 17, Phonegap: 2.1.0.

I want to show an animated image (currently using set of PNGs) as splash screen while resources are getting loaded.

I have been able to show the splash screen using this. But the problem is: the splash screen shows for a specified time then there is a black screen for 2-3 seconds and then index.html gets loaded.

Ideally what I want is to show the splash screen while resources get loaded. Once resources are loaded, pull the splash screen and immediately load the index.html file.

Below is my code:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Splash screen view
    setContentView(R.layout.splash);

    // Start animating the image
    final ImageView splashImageView = (ImageView) findViewById(R.id.SplashImageView);
    splashImageView.setBackgroundResource(R.drawable.flag);
    final AnimationDrawable frameAnimation = (AnimationDrawable)splashImageView.getBackground();
    splashImageView.post(new Runnable(){
        @Override
        public void run() {
            frameAnimation.start();             
        }           
    });


    final SplashScreen sPlashScreen = this;   

    // The thread to wait for splash screen events
    mSplashThread =  new Thread(){
        @Override
        public void run(){
            try {
                synchronized(this){
                    // Wait given period of time or exit on touch
                    wait(10000);
                }
            } 
            catch(InterruptedException ex){                 
            }

            finish();

            // Run next activity
            Intent intent = new Intent();
            intent.setClass(sPlashScreen, SomeActivity.class);
            startActivity(intent);
            //stop();               
        }
    };      
    mSplashThread.start();      
} 

public class SomeActivity extends DroidGap {                
    @Override
    public void onCreate(Bundle savedInstanceState) {    
     //some code to copy database files.
    }
}

Please note my development environment. android-sdk: api level 17, Phonegap: 2.1.0.

• javascript
• android
• html
• cordova

1 Answer 1

This can be solved with Phonegap/Cordova 1.7 version. As you are using 2.1 this solution will also be available for you.

In your main Phonegap activity class, initialize the splash screen and loadURL method:

super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 10000);

10000 is a time in ms, so the splash img will be visible for the next 10 seconds. You can even use 30-60. Later I will explain why.

In order to have a splash screen in a PhoneGap Android application, you need to put your splash.png file into:

res/drawable-ldpi (small: at least 426 x 320)
res/drawable-mdpi (medium: at least 470 x 320)
res/drawable-hdpi (large: at least 640 x 480) 
res/drawable-xdpi (xlarge: at least 960 x 720)

Now the main thing is: in your Javascript add the deviceready event like this:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // Version 1.7 use this method
    cordova.exec(null, null, "SplashScreen", "hide", []);
    // Version 1.8+ use this mehod
    navigator.splashscreen.hide();

So even if the splash screen is still visible, navigator.splashscreen.hide(); is going to hide it and show the loaded html.

Hope this helps you.