Add loading indicator/progress bar to Phonegap Android splashscreen

darryn.ten picture darryn.ten · Feb 22, 2012 · Viewed 19.2k times · Source

I have a PhoneGap 1.4.1 / jQueryMobile 1.0.1 / Android project which is showing the res/drawable/splash.png just fine, and the splashscreen goes away once the WebView is loaded.

I would like to add some sort of progress indicator percentage text to the splashscreen but have been unsuccessful so far.

I have had success with this in the past by using a normal webview like so:

myWebView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        myLoadingView.setVisibility(View.GONE);
        myWebView.setVisibility(View.VISIBLE);
    }
});
myWebView.loadUrl(...);

but all that was just a layout with a progress indicator text and a background image that would get updated with:

myWebView.setWebChromeClient(new WebChromeClient() {
    public void onProgressChanged(WebView view, int progress) {
        myLoadingView.setText(progress+"%");
    }
});

Does anyone know how I can add this functionality to the existing PhoneGap implementation, or know how I can replace the PhoneGap one with an implementation of my own?

Answer

Williew picture Williew · Mar 22, 2012

I think I've found a solution (not a full solution, but a spinner solution). Inside DroidGap subclass you should add this line:

super.setStringProperty("loadingDialog", "Wait, Loading...");

Here is my full example

public class MainActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        super.setIntegerProperty("splashscreen", R.drawable.splash);
        // Display a native loading dialog.  Format for value = "Title,Message".  
        // (String - default=null)
        super.setStringProperty("loadingDialog", "Wait,Loading Demo...");

       super.loadUrl("file:///android_asset/www/index.html");
      }
}

There are several properties you could set up in this section, please see this code: https://svn.apache.org/repos/asf/incubator/callback/phonegap-android/branches/WebSockets/framework/src/com/phonegap/DroidGap.java