Animated splash screen with Phonegap

Question

Is that possible to add animated splash screens for Android and iOS Phonegap apps? I tried to add animated .gif as splash screen file for Android but it doesn\'t work. I.e. ther

Answer 1

I've been searching, and I think that you should create a javascript-android interface and do something like Cordova does.

This is the Cordova code:

public class SplashScreen extends Plugin {

    @Override
    public PluginResult execute(String action, JSONArray args, String callbackId) {
        PluginResult.Status status = PluginResult.Status.OK;
        String result = "";

         if (action.equals("hide")) {
             this.webView.postMessage("splashscreen", "hide");
         } else if (action.equals("show")){
             this.webView.postMessage("splashscreen", "show");
         }
         else {
             status = PluginResult.Status.INVALID_ACTION;
         }
         return new PluginResult(status, result);
     }

And it is invoked throught javascript like this:

 exec(null, null, "SplashScreen", "show", []);

Also you will need to do it for iOS too, see this link: ios fade out splash screen (iphone 5 friendly)

Answer 2

gif animations are not supported on Android. Animations are possible using jQuery. This is what you can do

1. Create a data-role="page" div which contains your splash screen view
2. register a event listener for "pageshow" event for this page and start your animation using jQuery
3. In the same eventlistener call javascript's timeout function

setTimeout('functionToLoadNewPage', 2000); //functionToLoadNewPage - function name which will load a new page using $.mobile.changePage and 2000 - number of milliseconds for splash screen to be visible