Add beautiful loading progress bars and WebView loading progress bars to webview

Add beautiful loading progress bars and WebView loading progress bars to webview

To enhance the user experience, all the progress bars added to the WebView header look good.

Layout XMl: activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent">        <WebView            android:id="@+id/webView"            android:layout_width="fill_parent"            android:layout_height="fill_parent"/>                <ProgressBar          android:id="@+id/pb"          style="?android:attr/progressBarStyleHorizontal"          android:layout_width="fill_parent"          android:layout_height="3dip"          android:indeterminateOnly="false"          android:max="100"          android:progressDrawable="@drawable/progress_bar_states" >      </ProgressBar></RelativeLayout>

Custom progress bar:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@android:id/background">        <shape>            <corners android:radius="2dp" />            <gradient                android:angle="270"                android:centerColor="#E3E3E3"                android:endColor="#E6E6E6"                android:startColor="#C8C8C8" />        </shape>    </item>    <item android:id="@android:id/progress">        <clip>            <shape>                <corners android:radius="2dp" />                <gradient                    android:centerColor="#4AEA2F"                    android:endColor="#31CE15"                    android:startColor="#5FEC46" />                            </shape>        </clip>    </item></layer-list>

Then there is the main code of the Activity:

ProgressBar pb;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.xxx);pb = (ProgressBar) findViewById(R.id.pb);pb.setMax(100);WebView webView = (WebView) findViewById(R.id.webview);webView.getSettings().setJavaScriptEnabled(true);webView.getSettings().setSupportZoom(true);  webView.getSettings().setBuiltInZoomControls(true);webView.setWebChromeClient(new WebViewClient() );webView.loadUrl("http://www.x.com");}private class WebViewClient extends WebChromeClient {@Overridepublic void onProgressChanged(WebView view, int newProgress) {pb.setProgress(newProgress);if(newProgress==100){pb.setVisibility(View.GONE);}super.onProgressChanged(view, newProgress);}}

Not to mention, I know that everyone is most concerned about the effect:

Reprinted, please note: jixiao blog» [original] add beautiful loading progress bars to WebView