How to implement the Progress Dialog in webview before loading an image?

Question

I have a webview in my app that has to load an image, it loads it fine however it takes a few seconds for it to display. So what i need to do is to display a progress dialog to inform the user that the page is loading. (this image is loading from assets folder and not from the web) So this is my code sofar but crashes when i try to run that activity.

public MapsFragment(){}
ProgressDialog progress;
WebView myWebView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    View rootView = inflater.inflate(R.layout.fragment_maps, container, false);

    WebView webview = (WebView)rootView.findViewById(R.id.webView2);
    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setBuiltInZoomControls(true);
    webview.getSettings().setUseWideViewPort(false);
    webview.loadUrl("file:///android_asset/index1.html");

    webview.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            progress.show();
            view.loadUrl(url);
            return true;                
        }
        @Override
        public void onPageFinished(WebView view, final String url) {
            progress.dismiss();
        }
    });

    return rootView;
 }
}

And then the error code for this is:

11-08 13:19:34.034: E/AndroidRuntime(20600): FATAL EXCEPTION: main
11-08 13:19:34.034: E/AndroidRuntime(20600): Process: com.test.testguide, PID: 20600
11-08 13:19:34.034: E/AndroidRuntime(20600): java.lang.NullPointerException
11-08 13:19:34.034: E/AndroidRuntime(20600):    at com.test.testguide.MapsFragment$1.onPageFinished(MapsFragment.java:42)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at com.android.webview.chromium.WebViewContentsClientAdapter.onPageFinished(WebViewContentsClientAdapter.java:449)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at com.android.org.chromium.android_webview.AwContentsClient$AwWebContentsObserver$1.run(AwContentsClient.java:73)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at android.os.Handler.handleCallback(Handler.java:733)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at android.os.Handler.dispatchMessage(Handler.java:95)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at    android.os.Looper.loop(Looper.java:136)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at android.app.ActivityThread.main(ActivityThread.java:5586)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at java.lang.reflect.Method.invokeNative(Native Method)
11-08 13:19:34.034: E/AndroidRuntime(20600):    at java.lang.reflect.Method.invoke(Method.java:515)

Please help, as i have googled so many questions regarding this and couldn't seem to find a solution.
Thank you!

EDIT

Ihave corrected the error by myWebView and changed back to webview, Thus resulting into a new error. Please see updated question

EDIT2

@Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            progress = new ProgressDialog(getActivity());
            progress.setMessage("Please wait...");
            progress.setIndeterminate(false);
            progress.setCancelable(false);
            progress.show();
            view.loadUrl(url);
            return true;                
        }
        @Override
        public void onPageFinished(WebView view, final String url) {
            progress.dismiss();
        }
    });

But this still seem to crash with same errors

Answer 1

I made something similar to show a message when the page starts to loading and close it when it ends:

package com.veemesoft.radiostream.radiostream;

import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageButton;
import android.widget.TextView;
public class WebViewActivity extends Activity {

    private WebView webView;
    ImageButton goBack;
    TextView webViewTitle;
    ProgressDialog progressDialog;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        webViewTitle = (TextView) findViewById(R.id.web_view_title);
        String webViewTitleString = this.getIntent().getStringExtra("web_view_title");
        webViewTitle.setText(webViewTitleString);
        goBack = (ImageButton) findViewById(R.id.go_back);

        goBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                goToMainActivity();
            }
        });

        webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setUseWideViewPort(false);
        progressDialog = new ProgressDialog(this);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                progressDialog.setMessage("Espere unos segundos...");
                progressDialog.setIndeterminate(true);
                progressDialog.setCancelable(false);
                progressDialog.show();
            }

            @Override
            public void onPageFinished(WebView view, final String url) {
                progressDialog.dismiss();
            }
        });
        String url = this.getIntent().getStringExtra("url");
        webView.loadUrl(url);
    }

    private void goToMainActivity(){
        finish();
    }
}

Answer 2

I have used in my WebView that may helpful to you:

set WebChromeClient in onCreate() like

webView.setWebChromeClient(new MyWebChromeClient());

class MyWebChromeClient extends WebChromeClient {

    ProgressDialog pDialog;

    public MyWebChromeClient() {
        // TODO Auto-generated constructor stub
        pDialog = new ProgressDialog(YourActivity.this); //Use getActivity(); for Fragment
        pDialog.setMessage("Loading...");
        pDialog.setCancelable(false);
        pDialog.setProgress(0);
        pDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

    }

    public void onProgressChanged(WebView view, int progress) 
    {
        if(progress < 100 && !pDialog.isShowing()){
            pDialog.show();
        }
        pDialog.setProgress(progress);
        if(progress == 100) {
            pDialog.dismiss();
        }
    }
}

Answer 3

You have not initialize your progress dialog,

progress= ProgressDialog.show(this, "Title","Message", true);

or,

        progress= new ProgressDialog(getActivity());
        progress.setMessage("Please wait...");
        progress.setIndeterminate(false);
        progress.setCancelable(false);
        progress.show();

and you can call progress.dismiss() to hide the dialog

EDIT

View rootView = inflater.inflate(R.layout.fragment_maps, container, false);
WebView webview = (WebView)rootView.findViewById(R.id.webView2);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setUseWideViewPort(false);
webview.loadUrl("file:///android_asset/index1.html");
progress= new ProgressDialog(getActivity());
webview.setWebViewClient(new WebViewClient(){
  @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        progress.setMessage("Please wait...");
        progress.setIndeterminate(false);
        progress.setCancelable(false);
        progress.show();
        view.loadUrl(url);
        return true;                
    }
    @Override
    public void onPageFinished(WebView view, final String url) {
        progress.dismiss();
    }
});

return rootView;
}

Answer 4

u can do something like this when ur loading resources

public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url); return true; }

    public void onLoadResource (WebView view, String url) {
        if (progressDialog == null) {
            progressDialog = new ProgressDialog(activity);
            progressDialog.setMessage("Loading... ");
            progressDialog.show();
        }
    }