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?
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
I finally managed to add a progress bar to a PhoneGap webView which will show the progress (percentage) of the page load. Hope this helps you
As this other answer explains, appView
is located inside a LinearLayout
. The protected (and therefore inherited) variable root references this LinearLayout
. You can add your (whatever) native View
s to this variable.
Here is how I did:
Create a layout in your res/layouts/
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ProgressBar
android:id="@+id/progressBar1"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:maxHeight="10dip"
android:minHeight="10dip" />
</LinearLayout>
Follow all the steps you would normally follow for adding a WebView progress bar:
final Activity activity = this;
private ProgressBar progessBar1;
Add the layout you created:
View footer = View.inflate(getContext(), R.layout.mainshop, null);
root.addView(footer);
If you add it after calling super.loadURL(...);
it will be displayed at the bottom. If you add it before, the layout will be displayed before the appView.
After that you simply add this:
progessBar1 = (ProgressBar) findViewById(R.id.progressBar1);
this.appView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
activity.setProgress(progress * 1000);
if(progress < 100 && progessBar1.getVisibility() == ProgressBar.GONE) {
progessBar1.setVisibility(ProgressBar.VISIBLE);
}
progessBar1.setProgress(progress);
if(progress == 100) {
progessBar1.setVisibility(ProgressBar.GONE);
}
Log.d("Progress", progress+"");
}
});
Cheers!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With