How to Display Progress in ProgressBar While Loading URL in WebView in Android?

29 Jul, 2021
ProgressBar in Android is a UI element that displays the status of some work being done in the background in the form of some animation. It can be anything, like computing, loading, searching, fetching, downloading, etc. ProgressBar broadly has two types namely spinning wheel and horizontal bar. 
Spinning Wheel ProgressBar
Horizontal ProgressBar
In this article, we want to show you how you could implement a ProgressBar in Android and display it until a specific webpage is loading.
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.
Step 2: Add Internet permission in the Manifest file (AndroidManifest.xml)
To load a web page, we would require our application to use the Internet. So we need to add permission to use the internet.
XML
<?xml version="1.0" encoding="utf-8"?><manifest......>        <uses-permission android:name="android.permission.INTERNET"/>        <application......>    </application></manifest>
Step 3: Add a ProgressBar and a WebView in the layout file (activity_main.xml)
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout     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"    android:padding="2dp"    tools:context=".MainActivity">      <ProgressBar        android:id="@+id/progressBar"        style="?android:attr/progressBarStyleLarge"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:max="3"        android:progress="100" />      <WebView        android:id="@+id/webView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@+id/progressBar"        android:layout_marginTop="5dp" />  </RelativeLayout>
Step 4: Add this in the Main code (MainActivity.kt)
Refer to the comments for better understanding.
Kotlin
import android.os.Bundleimport android.view.Viewimport android.webkit.WebViewimport android.widget.ProgressBarimport androidx.appcompat.app.AppCompatActivity  class MainActivity : AppCompatActivity() {        // Declaring webView and progressBar    private lateinit var webView: WebView    lateinit var progressBar: ProgressBar      override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)          // Initializing Webview and         // progressBar from the layout file        webView = findViewById(R.id.webView)        progressBar = findViewById(R.id.progressBar)                  // Setting a webViewClient        webView.webViewClient = WebViewClient()                  // Loading a URL        webView.loadUrl("https://geeksforgeeks.org")    }      // Overriding WebViewClient functions    inner class WebViewClient : android.webkit.WebViewClient() {                // Load the URL        override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {            view.loadUrl(url)            return false        }                  // ProgressBar will disappear once page is loaded        override fun onPageFinished(view: WebView, url: String) {            super.onPageFinished(view, url)            progressBar.visibility = View.GONE        }    }}
Output:
You can see a progress bar running just before the page loads. Once the page loads, the progress bar disappears.
P.S: Watch the output at a speed lower than normal.
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.