Handle network issues in webview

Question

I am loading a document from google docs into my webview. The problem I see is that when user launch the app and is not connected to network, sees the following screen:

Now if he connects to the network, what is the way to open that link inside webview without re-launching the app. Clicking that link in the webview is one option but can I provide some better user friendly way to reload page in webview if this kind of scenario happens?

Answer 1

You can catch network error in WebViewClient, and show layout which custom by youself, like this:

       webView.setWebViewClient(new WebViewClient() {

            @Override
            public void onReceivedError(final WebView view, int errorCode, String description,
                    final String failingUrl) {
                //control you layout, show something like a retry button, and 
                //call view.loadUrl(failingUrl) to reload.
                super.onReceivedError(view, errorCode, description, failingUrl);
            }
        });

Answer 2

First, "Webpage not available" is the error page that webviewclient throws when an error occurs. Setting a custom webviewclient and overriding onReceiverError will handle the errors that your webview will receive.

webView.setWebViewClient(new WebViewClient() {

      @Override
      public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
      {
         //some codes here that you want to do when webview receives an error
      }
    });

Second, have you set the manifest correctly for a network connection? anyway just add these three:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Third, to go to a link without relaunching an app, you have to:

1. Add this code to where you build your webview

   if(savedInstanceState == null)
   { wv.loadUrl( url here ); }
   

2. Add these two methods:

   @Override protected void onSaveInstanceState(Bundle outState ) { super.onSaveInstanceState(outState); wv.saveState(outState); }

   @Override
   protected void onRestoreInstanceState(Bundle savedInstanceState)
   {
       super.onSaveInstanceState(savedInstanceState);
       wv.restoreState(savedInstanceState);
   }
   

Third, on reloading the page, what I do is

1. Override onCreateOptionsMenu, and make an xml for it. you can easily google how to do this
2. Inflate it getMenuInflater().inflate(R.menu.main, menu);
3. Override onOptionsItemSelected and add items, also can be easily googled.

Answer 3

You can try this:

1. Create a navigation bar

   e.g i'm creating a navigation bar like this..

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical" >
   
   <FrameLayout
    android:id="@+id/wvPlaceHolder"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
   
   
   <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="45dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:background="@drawable/status_bar" >
   
   <ImageButton
       android:id="@+id/iBback"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:clickable="true"
       android:contentDescription="@string/press_me"
       android:src="@drawable/wg_back" />
   
   <ImageButton
       android:id="@+id/iBrefresh"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignBottom="@+id/iBback"
       android:layout_centerHorizontal="true"
       android:clickable="true"
       android:contentDescription="@string/press_me"
       android:src="@drawable/wg_refresh" />
   
   <ImageButton
       android:id="@+id/iBforward"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentRight="true"
       android:clickable="true"
       android:contentDescription="@string/press_me"
       android:src="@drawable/wg_forward" />
   </RelativeLayout>
   
   </RelativeLayout>
   

2. On Java side you provide these image buttons some functionality after initializing and setting onclickListener on them.Here i'm just showing what they gonna perform after listening the click.

   @Override
   public void onClick(View v) throws NullPointerException{
   
   ConnectivityManager conManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
   
   switch (v.getId()) {
   
   case R.id.iBback:
       if(conManager.getNetworkInfo(ConnectivityManager.TYPE_MOBILE)
               .getState() == NetworkInfo.State.CONNECTED
               || conManager.getNetworkInfo(ConnectivityManager.TYPE_WIFI)
                       .getState() == NetworkInfo.State.CONNECTED)
       {
           if (wv.canGoBack())
               wv.goBack();
       }
       break;
   case R.id.iBforward:
       if(conManager.getNetworkInfo(ConnectivityManager.TYPE_MOBILE)
               .getState() == NetworkInfo.State.CONNECTED
               || conManager.getNetworkInfo(ConnectivityManager.TYPE_WIFI)
                       .getState() == NetworkInfo.State.CONNECTED)
       {
            if (wv.canGoForward())
                wv.goForward();
       }
       break;
   case R.id.iBrefresh:
   
       // conManager=(ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE);
   
       if (conManager.getNetworkInfo(ConnectivityManager.TYPE_MOBILE)
               .getState() == NetworkInfo.State.CONNECTED
               || conManager.getNetworkInfo(ConnectivityManager.TYPE_WIFI)
                       .getState() == NetworkInfo.State.CONNECTED) {
           wv.reload();
       } 
       break;
   
   }
   

   simple enough :)