¿Cómo mostrar el porcentaje de progreso de carga de la página web en Android?

En Android, se usa un WebView para mostrar una página web. Además, los clientes web se utilizan para conectarse a una página web y cargarla. Mientras se carga la página web, WebView no proporciona información en tiempo real sobre el estado de carga. Sin embargo, podemos obtener el progreso de la carga y mostrar esta información. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin . 

Entonces, a través de este artículo, le mostraremos cómo puede mostrar el progreso de carga de una página web en Android. Siga los pasos a continuación una vez que el IDE esté listo.

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 permisos en el archivo AndroidManifest.xml

Necesitamos agregar permiso de INTERNET para usar un WebView.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.geeksforgeeks.webpageloadingstatus">
  
    <uses-permission android:name="android.permission.INTERNET"/>
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.WebPageLoadingStatus">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Agregue un TextView para mostrar el estado de carga, un WebView para mostrar la página web y un botón para iniciar el proceso.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:layout_marginTop="50sp"
        android:textSize="40sp"
        android:gravity="center"/>
  
    <WebView
        android:id="@+id/web_view_1"
        android:layout_width="match_parent"
        android:layout_height="400sp"
        android:layout_below="@id/text_view_1"
        android:layout_marginTop="30sp"/>
  
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/web_view_1"
        android:layout_marginTop="30sp"
        android:text="load"/>
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package org.geeksforgeeks.webpageloadingstatus
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declaring and initializing the textView,
        // WebView and Button from the layout file
        val mTextView = findViewById<TextView>(R.id.text_view_1)
        val mWebView = findViewById<WebView>(R.id.web_view_1)
        val mButton = findViewById<Button>(R.id.button_1)
  
        // When button is clicked
        mButton.setOnClickListener {
            // Chrome client is called 
            // to fetch the loading progress
            mWebView.webChromeClient = object : WebChromeClient() {
                override fun onProgressChanged(view: WebView?, newProgress: Int) {
                    mTextView.text = "Loading: $newProgress%"
                    if(newProgress == 100){
                        mTextView.text = "Loaded!"
                    }
                }
            }
            // Loading the URL
            mWebView.loadUrl("https://www.geeksforgeeks.org")
        }
    }
}

Producción:

Puede ver el progreso de carga de la página web.