Set a ProgressBar in Android WebView

A progress bar is useful to let your users know that the app is doing something in the background,loading a web page etc. a progress bar is a must have element in an android app where it is required.

Without a progress bar, your users might think that your app is froze,stuck or unresponsive. this tutorial will teach you how to add a rotating and horizontal progress bars in the toolbar of your android app.

First, we need define a progress bar in the XML code

XML code to show a rotating progressbar in the toolbar

This is a rotating progressbar and you need a custom toolbar so use a theme such as Theme.AppCompat.NoActionBar in your app (Styles.xml or in manifest).

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar1"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlways">

            <ProgressBar
                android:id="@+id/toolbarprogress"
                android:layout_width="25dp"
                android:rotation="@integer/google_play_services_version"
                android:layout_height="25dp" />

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

Now go to the java activity where you want set the toolbar

Java code to hide and show rotating progressbar

//identify the Progress bar
ProgressBar progbar = findViewById(R.id.toolbarprogress);

//to show the progressbar
 progbar.setVisibility(View.VISIBLE);

// to hide the progressbar
progbar.setVisibility(View.GONE);

Result

The result 1 is the rotating progressbar, 2 is the horizontal proggressbar

Next, let’s learn how to set a horizontal progress bar, it is a different progress bar that is used to show the correct progress of doing something

XML code for Horizontal Progress bar

This progressbar is placed inside a frame layout for better fit below the toolbar

<android.support.design.widget.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="?android:attr/actionBarSize"
       app:layout_scrollFlags="scroll|enterAlways">

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar1"
           android:layout_width="match_parent"
           android:layout_height="?android:attr/actionBarSize"
           android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           app:layout_collapseMode="parallax"
           app:layout_scrollFlags="scroll|enterAlways">

       </android.support.v7.widget.Toolbar>

   </android.support.design.widget.AppBarLayout>





       <FrameLayout
           android:layout_marginTop="-4dp"
           android:id="@+id/framlytt"
           android:layout_width="match_parent"
           android:layout_height="9dp">

           <ProgressBar
               android:id="@+id/toolbarprogress"
               style="?android:attr/progressBarStyleHorizontal"
               android:layout_width="match_parent"
               android:layout_height="8dp"
               android:layout_marginTop="2dp"
               android:progress="30"
               android:theme="@style/Progressbar.White" />

       </FrameLayout>

Java code for Horizontal progressbar

The java code for the rotating progressbar is not useful for the horizontal progress bar because it needs adjust its horizontal length depending on the current progress state, so we need different code, here is an example, i have set the java code to show it in a webview, you need adapt this code for your app

ProgressBar progbar = findViewById(R.id.toolbarprogress);

webview.setWebChromeClient(new WebChromeClient() {

          public void onProgressChanged(WebView view, int newProgress) {
              super.onProgressChanged(view, newProgress);

              progbar.setProgress(newProgress);



              //loadingTitle.setProgres s(newProgress);
              // hide the progress bar if the loading is complete
              if (newProgress == 100) {


                  loadingProgressBar.setVisibility(View.INVISIBLE);

              } else {

                  loadingProgressBar.setVisibility(View.VISIBLE);


              }
          }