Xamarin Android WebView On page Navigation/Change Progress Indicator

Question

How to show progress indicator/bar while loading page within webview in Xamarin Android

Webview webView = FindViewById(Resource.Id.webView);

        url = "https://www.examplemydemowebsiteaddress.com";
        //Enabled Javascript in Websettings  
        WebSettings websettings = webView.Settings;
        websettings.UseWideViewPort = true;
        websettings.DomStorageEnabled = true;
        websettings.JavaScriptEnabled = true;
        websettings.SetAppCacheEnabled(true);
        webView.SetWebViewClient(new WebViewClient());
        webView.LoadUrl(url);

Answer 1

You need define a ProgressBar above your WebView,like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
  <ProgressBar
     android:id="@+id/pb"
     style="?android:attr/progressBarStyleHorizontal"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:visibility="gone"        
    />
  <WebView
     android:id="@+id/webView"    
     android:layout_width="match_parent"
     android:layout_height="match_parent" /> 
</LinearLayout>

Then in your activity:

string url = "https://www.examplemydemowebsiteaddress.com";
ProgressBar prgBar = FindViewById<ProgressBar>(Resource.Id.pb);
webView = FindViewById<WebView>(Resource.Id.webView);
webView.SetWebChromeClient(new MyWebClient(prgBar));
webView.SetWebViewClient(new MyClient());
webView.LoadUrl(url );



class MyClient : WebViewClient
    {
        public override bool ShouldOverrideUrlLoading(WebView view, IWebResourceRequest request)
        {
            view.LoadUrl(request.Url.ToString());
            return true;
        }
    }
class MyWebClient : WebChromeClient
    {
        ProgressBar prgBar;
        public MyWebClient(ProgressBar progressBar)
        {
            prgBar = progressBar;
        }
        public override void OnProgressChanged(WebView view, int newProgress)
        {
            if (newProgress == 100)
            {
                prgBar.Visibility= ViewStates.Gone;//The page progress bar disappears after loading 
            }
            else
            {
                prgBar.Visibility = ViewStates.Visible;//A progress bar is displayed when the web page starts loading
                prgBar.SetProgress(newProgress,false);//Set the progress value
            }
        }
    }

Update:

create a progressbar.xml in your Resources/drawable:

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

  <item android:id="@android:id/background">
      <shape android:shape="rectangle">
        <solid android:color="#00ff00"></solid>
      </shape>
  </item>
  <item android:id="@android:id/progress">
      <clip>
        <shape android:shape="rectangle">
          <solid android:color="#ff0000"></solid>
        </shape>
      </clip>
   </item>

</layer-list>

then add android:progressDrawable="@drawable/progressbar" in your Progressbar

<ProgressBar
   android:id="@+id/pb"
   style="?android:attr/progressBarStyleHorizontal"
   android:layout_width="match_parent"
   android:layout_height="3dp"
   android:progressDrawable="@drawable/progressbar"
   android:visibility="gone"        
/>

the effect like :