Adding ProgressBar into WebView Fragment

Question

i'm finishing my app, is a simple app that contains some WebView Fragments and a Navigation Drawer, everything is OK, but I don't know how to add a progress bar while the WebView is loading a page, all I got is a blank screen before the page loads.

Here is my code...

HomeFragment.java

public class HomeFragment extends Fragment {


private WebView webView;


public HomeFragment() {
    // Required empty public constructor
}

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}



@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View mainView = (View) inflater.inflate(R.layout.fragment_my_fragment1, container, false);
    WebView webView = (WebView)mainView.findViewById(R.id.webview);
    webView.setWebViewClient(new MantenerDominioWeb());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setBuiltInZoomControls(false);
    webView.getSettings().setSupportZoom(false);
    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.canGoBack();
    webView.goBack();
    webView.loadUrl("http://www.lfcchile.com/");
    return mainView;


}



@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
}

@Override
public void onDestroy() {
    super.onDestroy();
}

@Override
public void onDetach() {
    super.onDetach();
}
}

My WebViewClient class

public class MantenerDominioWeb extends WebViewClient {

private WebView webView;
public ProgressBar progressBarT4;


@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (Uri.parse(url).getHost().endsWith("lfcchile.com") || (Uri.parse(url).getHost().endsWith("thisisanfield.com")) || (Uri.parse(url).getHost().endsWith("liverpoolecho.co.uk")) || (Uri.parse(url).getHost().endsWith("liverpoolfc.com"))) {
        return false;
    }

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

}

And my Frame XML

<FrameLayout 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="com.lfcchile.MyFragment1">

<!-- TODO: Update blank fragment layout -->
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
    android:gravity="center"
    android:text="@string/homefrag" />

<WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:id="@+id/progressBar1"/>

</FrameLayout>

Any ideas please? I tried to put the progressBar "in front" of the WebView, but when the page is loaded the icon doesn't dissapear...

Answer 1

I believe it is not possible to put a progressbar because each site has a certain size, it would be difficult to measure it before finalizing the download page.

But you can place a pre-loader (loading) while the page is loaded and after the end you remove access for the user.

Use ProgressDialog:

public class HomeFragment extends Fragment {

private ProgressDialog progress;
private WebView webView;


public HomeFragment() {
    // Required empty public constructor
}

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}



@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View mainView = (View) inflater.inflate(R.layout.fragment_my_fragment1, container, false);
        WebView webView = (WebView)mainView.findViewById(R.id.webview);
        webView.setWebViewClient(new MantenerDominioWeb());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setBuiltInZoomControls(false);
        webView.getSettings().setSupportZoom(false);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.canGoBack();
        webView.goBack();
        webView.loadUrl("http://www.lfcchile.com/");

        progress = ProgressDialog.show(this, "Aguarde...",
                    "Processando sua solicitação.", true);
        webView.setWebViewClient(new WebViewClient() {

           public void onPageFinished(WebView view, String url) {
                if (progress != null)
                    progress.dismiss();
            }
        });
        return mainView;


    }



@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
}

@Override
public void onDestroy() {
    super.onDestroy();
}

@Override
public void onDetach() {
    super.onDetach();
}
}

Answer 2

• Set your ProgressBar to visibility="gone" to start
• In your WebViewClient subclass, override onPageStarted() to set the visibility of the ProgressBar to VISIBLE
• In your WebViewClient subclass, override onPageFinished() to set the visibility of the ProgressBar to GONE
• Create a WebChromeClient subclass overriding onProgressChanged() to update the progress value of the ProgressBar
• Add the WebChromeClient subclass to the WebView by calling WebView.setWebChromeClient()