Showing progress in a WebView Fragment in a nice way

Issue

I am working on a tablet application which has 2 fragments on the screen. One fragment is a WebView. By default the user does not get any feedback to let them know the webpage is loading.

To give the user feedback I show a progress dialogue when the page loading is started and remove it when the page has finished. This works well in most cases except when a link redirects multiple times.

When redirects occur the dialogue is shown and dismissed multiple times which looks pretty bad. I guess it would be acceptable if I could stop the dialogue from dimming the background, but after searching for a while I have not found a way of doing this.

Ideally It would be nice if I could just add a loading bar over the centre of the webview fragment and hide/dismiss it when finished. Any ideas?

private class InnerWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        view.loadUrl(url);
        return true;
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        if (dialog==null)
            dialog = new ProgressDialog(getActivity());
        dialog.setMessage("Loading...");
        dialog.setIndeterminate(true);
        dialog.setCancelable(false);
        dialog.show();
        Log.d("WEBVIEW", "loading "+ url);
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        dialog.dismiss();
        mUrl=url; // save final url so user can open in deafult browser
        super.onPageFinished(view, url);
    }

}

Solution

I have just done this in what I think is a very elegant way.

I have made a custom layout, which contains a webview and a progress dialogue in the centre. This dialogue is initially set to GONE and set visible when a webpage is loading in the onPageStarted. It is set to GONE again in the onPageFinished method.

The Fragment inflates and returns this custom view in the onCreateView method.

Answered By - bencallis