Cómo Manejar los Botones de Adelantar y Retroceder en un WebView Android
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.
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.