¿Cómo mostrar el progreso en ProgressBar mientras se carga la URL en WebView en Android?

ProgressBar en Android es un elemento de la interfaz de usuario que muestra el estado de algún trabajo que se está realizando en segundo plano en forma de animación. Puede ser cualquier cosa, como computar, cargar, buscar, obtener, descargar, etc. ProgressBar tiene dos tipos, a saber, la rueda giratoria y la barra horizontal. 

Barra de progreso de la rueda giratoria

Barra de progreso horizontal

En este artículo, queremos mostrarle cómo puede implementar una barra de progreso en Android y mostrarla hasta que se cargue una página web específica.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: Agregar permiso de Internet en el archivo de Manifiesto (AndroidManifest.xml)

Para cargar una página web, requeriríamos que nuestra aplicación use Internet. Entonces necesitamos agregar permiso para usar Internet.

<?xml version="1.0" encoding="utf-8"?>
<manifest......>
    
    <uses-permission android:name="android.permission.INTERNET"/>
    
    <application......>
    </application>
</manifest>

Paso 3: agregue una barra de progreso y una vista web en el archivo de diseño (actividad_principal.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>

Paso 4: agregue esto en el código principal (MainActivity.kt)

Consulte los comentarios para una mejor comprensión.

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
        }
    }
}

Producción:

Puede ver una barra de progreso ejecutándose justo antes de que se cargue la página. Una vez que se carga la página, la barra de progreso desaparece.

PD: Ver la salida a una velocidad inferior a la normal.