Cómo Manejar los Botones de Adelantar y Retroceder en un WebView Android

Un WebView es un componente clave en Android para mostrar contenido web dentro de una aplicación, incluso en su versión más simple resulta muy útil para cargar el contenido de un sitio web. Pero, no es bueno quedarse con lo más básico y hay que buscar siempre, mejorar la experiencia del usuario. Un buen aditivo, es hacer que la navegación sea más intuitiva dentro del WebView, algo que podemos hacer con tan solo agregar los botones de adelantar y retroceder.

En el siguiente paso a paso, te explicaré como configurar el WebView y cómo agregar los botones antes mencionados, tanto en el archivo XML, como en el apartado de programación con Java. Algo que también te servirá si estás haciendo una aplicación con Kotlin.

Cómo Manejar los Botones de Adelantar y Retroceder en un WebView Android

Paso 1: Configuración del WebView en Android

Lo primero es agregar el WebView en el archivo XML de diseño y en la clase Java correspondiente.

Diseño XML

Ubícate en el archivo XML donde quieres tu WebView y agrega el siguiente código tal como está. También puedes agregar por diseño este widget y luego reemplazar el código correspondiente, por el que te dejo aquí debajo. Todo depende de cómo se haga más simple.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"> 

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" /> 

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"> 

        <Button
            android:id="@+id/btnBack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Atrás" /> 

        <Button
            android:id="@+id/btnForward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Adelante" /> 
    </LinearLayout> 
</LinearLayout> 

En este diseño, el WebView estará en toda la pantalla y los botones quedaran dentro del mismo, ocupando la parte superior. No es obligatorio que así sea, pero es la forma más intuitiva, queda a tu disposición jugar con el diseño.

Permisos de Internet

Para que el WebView funcione correctamente, es necesario que, al manifiesto de tu app, le agregues el permiso correspondiente. Con la siguiente línea de código, tu aplicación podrá hacer uso de la conexión a Internet de tu dispositivo y podrás navegar sin problemas.


<uses-permission android:name="android.permission.INTERNET" />

Paso 2: Configuración del WebView en el código Java

Ahora, configuraremos el WebView para cargar una página web, y controlaremos la funcionalidad de los botones.

Código Java

En la clase donde vayas a mostrar tu WebView, sea un fragment o una activity, vamos a configurar el WebView y los botones. El siguiente ejemplo, muestra cómo hacerlo en la clase principal, si quieres hacerlo en un fragment, te recomiendo el siguiente artículo: Cómo abrir varias URL en un mismo WebView Fragment (Java)

Ahí también podrás ver cómo agregar otra funcionalidades importantes a tu WebView.


import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private Button btnBack, btnForward;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        btnBack = findViewById(R.id.btnBack);
        btnForward = findViewById(R.id.btnForward);

        // Configuración del WebView
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://www.tu-sitio-web.com");

        // Funcionalidad para el botón "Atrás"
        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (webView.canGoBack()) {
                    webView.goBack();
                }
            }
        });

        // Funcionalidad para el botón "Adelante"
        btnForward.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (webView.canGoForward()) {
                    webView.goForward();
                }
            }
        });
    }

    // Manejar el botón "Atrás" físico del dispositivo
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

Explicación del Código:

** webView.setWebViewClient(new WebViewClient());: Evita que el navegador predeterminado se abra al hacer clic en enlaces y garantiza que el contenido se cargue dentro de la aplicación.

** webView.getSettings().setJavaScriptEnabled(true);: Habilita JavaScript para que el contenido interactivo funcione correctamente.

** btnBack y btnForward: Los botones se configuran para que permitan navegar por el historial del WebView. Usamos canGoBack() y canGoForward() para comprobar si hay historial disponible.

Paso 3: Mejorando la Experiencia de Usuario

Para mejorar la experiencia de usuario, podemos modificar el código para que se desactiven los botones cuando no haya más páginas a las que avanzar o retroceder. Con esta funcionalidad, quedaría de la siguiente manera.


Copiar código
// Actualizar el estado de los botones
private void updateButtons() {
    btnBack.setEnabled(webView.canGoBack());
    btnForward.setEnabled(webView.canGoForward());
}

// Llamar a updateButtons cada vez que el WebView cargue una página
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        updateButtons();
    }
});

Conclusión

Ya con esto, tu WebView Android, va a lucir mucho mejor y tu app será mucho más atractiva para los usuarios Hay más funcionalidades que puedes obtener con un WebView y aquí en este sitio web las vas a encontrar.

Anterior