Show a progressbar on top while loading webview app

Question

I'm trying to show a progressbar on top top the app like google chrome for android shows loading bar while loading a website.

I want to show this progress bar when user clicks on any internal links of the webview app...just like google chrome shows.

Here is what I've tried, this code not working, app stops working even it doesn't start.

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setBackgroundDrawable(null);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        progressBar.setMax(100);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.main_webview);
        mWebView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                progressBar.setVisibility(View.VISIBLE);
                progressBar.setProgress(0);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                progressBar.setVisibility(View.GONE);
                progressBar.setProgress(100);
                if (mWebView.getProgress() == 100) {

                    // show webview
                    mWebView.setVisibility(View.VISIBLE);
                    // hide splash
                    findViewById(R.id.splash_screen).setVisibility(View.GONE);
                }
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                if (Uri.parse(url).getHost().contains("www.example.com")) {
                    return false;
                }

                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                view.getContext().startActivity(intent);
                return true;

            }

            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) {
                view.loadUrl("file:///android_asset/offline.html");
            }

        });

        mWebView.loadUrl("http://www.example.com/?m=1");
    }

}

main activity:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/splash_screen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/splash_logo"
        android:visibility="visible" />

    <WebView
        android:id="@+id/main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />
    <ProgressBar
        android:id="@+id/progressBar"
        android:minHeight="2dip"
        android:maxHeight="2dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="@android:style/Widget.ProgressBar.Horizontal" />
</RelativeLayout>

Answer 1

You create MyWebChromeClient

public class MyWebChromeClient extends WebChromeClient {
private ProgressListener mListener;

public MyWebChromeClient(ProgressListener listener) {
    mListener = listener;
}

@Override
public void onProgressChanged(WebView view, int newProgress) {
    mListener.onUpdateProgress(newProgress);
    super.onProgressChanged(view, newProgress);
}

public interface ProgressListener {
    public void onUpdateProgress(int progressValue);
}
}

in Your MainActivity

public class MainActivity extends AppCompatActivity implements MyWebChromeClient.ProgressListener{
private WebView mWebView;
private ProgressBar mProgressBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = (WebView) findViewById(R.id.webView);
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    // add progress bar
    mProgressBar = (ProgressBar) findViewById(R.id.progressBar);
    mWebView.setWebChromeClient(new MyWebChromeClient(this));
    mWebView.setWebViewClient(new WebViewClient() {

        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            view.loadUrl(url);


            return true;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            mProgressBar.setVisibility(View.VISIBLE);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            mProgressBar.setVisibility(View.GONE);

        }


    });


}


@Override
public void onUpdateProgress(int progressValue) {
    mProgressBar.setProgress(progressValue);
    if (progressValue == 100) {
        mProgressBar.setVisibility(View.INVISIBLE);
    }
}
}

in activity_main.xml

<RelativeLayout
    android:id="@+id/relative_web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/progress_bar_height"
        android:progressDrawable="@drawable/bg_progress_bar_webview" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/progressBar" />
</RelativeLayout>

in drawable create bg_progress_bar_webview.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
    android:id="@android:id/background"
    android:drawable="@android:color/transparent"/>
<item android:id="@android:id/secondaryProgress">
    <scale
        android:drawable="@color/progress_bar_second"
        android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
    <scale
        android:drawable="@color/progress_bar_runing"
        android:scaleWidth="100%" />
</item>

</layer-list>

Hope !it helps you