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

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 by Step Implementation

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.Bundle
import android.view.View
import android.webkit.WebView
import android.widget.ProgressBar
import 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.