Android, como es de esperar, tiene un gran número de navegadores web a través de los cuales podemos acceder a diferentes páginas web. Cuando estamos utilizando alguna aplicación, es posible que se nos ofrezca la posibilidad de abrir una página web determinada para, por ejemplo, acceder a ciertos recursos. Mientras que si intentamos acceder a una URL Android abrirá automáticamente el navegador web predeterminado, es posible que en algunas ocasiones esto pueda ser una molesta ya que supone pasar la aplicación a segundo plano, e incluso es posible que se cierre por falta de recursos.

A la hora de programar en Android Studio, el IDE nos ofrece una lista de Vistas, u objetos, a través de los cuales daremos forma a nuestra aplicación. Una de estas vistas es WebView. WebView nos va a permitir utilizar el motor interno de Android, WebKit, para mostrar diferentes páginas web dentro de la misma aplicación (ya sea en la misma u en otra actividad). De esta manera, todo se ejecutará en la misma aplicación y evitaremos tener que abrir otras aplicaciones.

En este tema del curso de desarrollo Android vamos a ver cómo crear una sencilla aplicación que, al abrirla, nos cargue un WebView y nos permita navegar por una página web concreta, la cual especificaremos en el código.

Lo primero que vamos a hacer es crear un nuevo proyecto en Android Studio. El proyecto tendrá las siguientes características:

  • App Name: Ejemplo de WebView
  • Min SDK: API 14 (aunque podemos poner una inferior ya que las WebView llevan presentes desde API 5, Android 2.0)
  • Activity: Empty Activity

Desarrollo Android Studio - Crear ejemplo WebView

Desarrollo Android Studio - Crear ejemplo WebView - Activity

La WebView se encuentra dentro de la sección “Widgets” de las vistas de Android Studio.

Vistas Widget en Android Studio

Una vez que hemos creado el proyecto y tenemos delante ya nuestra activity, lo único que debemos hacer es arrastrar dicho webView a la actividad de nuestra aplicación. Por motivos de comodidad y estéticos, configuraremos las siguientes propiedades de nuestro View:

  • layout:width: fill_parent
  • layout:heigth: fill_parent

También debemos rellenar el ID de la vista de manera que podamos hacer referencia a ella fácilmente.

En el apartado drag&drop todo listo. El resto que nos queda por hacer es programar el código Java para ejecutar la vista.

Podemos hacer que la webView funcione de dos formas diferentes. La primera de ellas, y un poco inútil, es que al llamarla Android abra nuestro navegador por defecto y cargue la URL especificada en el código. Esto se haría programando el código de la siguiente manera:

package es.movilzona.ejemplodewebview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView myWebView = (WebView) findViewById(R.id.webView);
        myWebView.loadUrl("http://www.movilzona.es");
    }


    }

Android Studio - Código WebView en navegador separado

Aunque funciona, no es lo que queremos. Nosotros queremos que Android utilice su motor de navegación dentro de la propia aplicación sin tener que depender de ningún navegador más. Esto nos lleva a la segunda forma, la más útil, profesional y recomendada.

El código para que la web cargue integrada en la propia aplicación sería:

package es.movilzona.ejemplodewebview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends Activity {
    WebView browser;

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

        // Definimos el webView
        browser=(WebView)findViewById(R.id.webView);

        browser.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        // Cargamos la web
        browser.loadUrl("http://www.movilzona.es");
    }
}

Android Studio - Código WebView integrado

Antes de ejecutar la aplicación, recordamos que WebView necesita acceso a Internet, por lo que debemos añadir el permiso correspondiente en el archivo AndroidManifest.xml.

Android Studio - Ejemplo AndroidManifest

Android Studio - WebApp 1

Mejorando la aplicación. Desarrollo Android y las funciones avanzadas de WebView

Aunque nuestra aplicación funciona, podemos hacer que funcione aún mucho mejor habilitando al navegador ciertas funciones adicionales y añadiendo unos elementos para facilitar la navegación.

Extras que podemos añadir a nuestra WebApp

Por ejemplo, una función que no debemos olvidar añadir a nuestro código es la que nos permite habilitar JavaScript ya que, de lo contrario, muchas webs cargarán mal. Para ello añadiremos en MainActivity.java:

browser.getSettings().setJavaScriptEnabled(true);

También podemos habilitar el Zoom mediante la llamada, útiles si nuestra web no es de diseño responsive:

browser.getSettings().setBuiltInZoomControls(true); // Habilita el Zoom
browser.getSettings().setDisplayZoomControls(false); // Oculta los botones de zoom, haciendo que solo funcione con gestos.

Android Studio - WebApp con JavaScript

Android Studio - WebApp 2

Hacer que el botón “back” de nuestro smartphone vuelva a la página anterior

Por defecto, si pulsamos sobre el botón de volver atrás de nuestro smartphone, la aplicación volverá a la actividad anterior que, al no existir, cerrará el navegador y volverá al escritorio.

Es posible modificar este comportamiento simplemente añadiendo el MainActivity.java el siguiente código:

@Override
public void onBackPressed()
{
    if (browser.canGoBack())
    {
        browser.goBack();
    }
    else
    {
        super.onBackPressed();
    }
}

De esta manera, cuando pulsemos el botón “atrás” de Android volveremos a la página anterior, en lugar de cerrar la aplicación.

Añadiendo una barra de progreso

En muchas ocasiones es útil saber cómo está cargando una determinada web para saber si ha terminado o si aún la quedan elementos que descargar. Para dotar a nuestra app de una apariencia más profesional vamos a añadirla una barra de progreso. Nosotros hemos arrastrado desde la lista de views una ProgressBarr (Horizontal) a la parte inferior de la pantalla. Una vez listo, en ActivityMain.java añadiremos el código que le indicará a la barra cargar en función lo que cargue de la web:

import android.webkit.WebChromeClient;
import android.widget.ProgressBar;

...

//Sincronizamos la barra de progreso de la web
progressBar = (ProgressBar) findViewById(R.id.progressbar);

browser.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int progress) {
        progressBar.setProgress(0);
        progressBar.setVisibility(View.VISIBLE);
        MainActivity.this.setProgress(progress * 1000);

        progressBar.incrementProgressBy(progress);

        if (progress == 100) {
            progressBar.setVisibility(View.GONE);
        }
    }
});

Con esto, cuando volvamos a ejecutar la aplicación veremos en la parte inferior una barra de progreso mientras carga la web. En nuestro caso hemos utilizado una barra muy sencilla y disimulada, pero si queréis podéis modifiar las propiedades de dicha barra (por ejemplo, ajustándola horizontalmente, cambiando el color, grosor, etc).

Android Studio - WebApp con barra de carga

Con esto finalizamos el tema de WebView. Para finalizar os vamos a dejar el código fuente de ActivityMain.java con todo lo anterior implementado.

package es.movilzona.ejemplodewebview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient;
import android.widget.ProgressBar;


public class MainActivity extends Activity {
    private WebView browser;
    private ProgressBar progressBar;

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

        // Definimos el webView
        browser=(WebView)findViewById(R.id.webView);

        //Habilitamos JavaScript
        browser.getSettings().setJavaScriptEnabled(true);

        //Habilitamos los botones de Zoom
        browser.getSettings().setBuiltInZoomControls(true);

        browser.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        // Cargamos la web
        browser.loadUrl("http://www.movilzona.es");

        //Sincronizamos la barra de progreso de la web
        progressBar = (ProgressBar) findViewById(R.id.progressbar);

        browser.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int progress) {
                progressBar.setProgress(0);
                progressBar.setVisibility(View.VISIBLE);
                MainActivity.this.setProgress(progress * 1000);

                progressBar.incrementProgressBy(progress);

                if (progress == 100) {
                    progressBar.setVisibility(View.GONE);
                }
            }
        });

}
    @Override
    public void onBackPressed()
    {
        if (browser.canGoBack())
        {
            browser.goBack();
        }
        else
        {
            super.onBackPressed();
        }
    }
}