Aplicación WebView simple para Android con Android Studio

En un post anterior hemos puesto online una estación meteorológica con weewx y Olinuxino. La página generada por esta estación tiene una versión móvil. Vamos a hacer ahora una aplicación en Android para tener esta web más a mano. La forma más rápida es utilizar el elemento WebView de Android. Veamos paso a paso cómo realizar una app móvil para Android con WebView en Android Studio.

Suponemos que ya tienes instalado Android Studio y actualizado el SDK de Android a su última versión. Vamos, por tanto, a crear nuestra aplicación comenzando con el wizard de Android Studio. Abrimos la aplicación y seleccionamos “Start a new Android Studio project”

studio01

Pondremos un nombre a nuestra aplicación y buscaremos dónde guardarla. Seleccionaremos la versión de SDK y los dispositivos en la que deseemos desarrollar nuestra app. Salvo que tengamos algún especial interés en una versión del SDK concreta, seleccionaremos la predeterminada.

studio02

Después tenemos varias plantillas para la default activity (La activity que será lanzada al arrancar la app). Seleccionaremos “Empty activity”.

studio03

… le ponemos un nombre a la activity, por ejemplo, “principal”…

studio04

… y finalmente generamos la aplicación pulsando en Finish.

Android Studio se pondrá a trabajar durante un rato para finalmente arrancar la aplicación principal y el archivo java de la activity “principal”. No te asustes si al principio salen errores. Gradle (el make de Android Studio) está trabajando en background y puede que tarde un poco en examinar todo el proyecto. Una vez termine, los errores desaparecerán.

studio05

Una vez cargado todo el proyecto, desde el explorador de proyecto de la izquierda, navegamos a res > layout > principal.xml. Nos abrirá una ventana nueva con el diseñador del layout de nuestra activity Principal.

studio06

Arrastramos un elemento WebView al diseñador y modificamos su ancho y alto a “fill_parent” (ver captura)

studio07

Ya tenemos el elemento WebView en nuestra App, ahora solo falta decirle a dónde tiene que apuntar. Nos volvemos al principal.java e introducimos el siguiente código dentro del método onCreate que está en la clase principal:

 

Si ejecutamos el código en el emulador (pulsando al botón “play” de la barra de herramientas), tendremos una app que abre nuestra web:

studio08

Es posible que necesitemos configurar un emulador Android si es la primera vez que ejecutamos Android Studio. Bueno, nuestra app ya estaría lista para ser instalada en los teléfonos y tablets de nuestros amigos y familiares, pero pronto nos daremos cuenta de un pequeño detalle: la tecla de “atrás” de Android nos saca de la aplicación, en vez de ir atrás en la navegación dentro de la web. Podemos modificar este comportamiento mediante programación, basta con añadir el siguiente método dentro de la clase principal:

 

Éste captura los eventos de teclado y, si es una pulsación de la tecla “atrás”, manda a la webView la orden de volver a la anterior página. Por tanto, la clase principal quedará de la siguiente manera:

Una vez terminada la app y probada en el emulador, podemos generar el apk que instalaremos en nuestro teléfono mediante el menú Build -> Generate signed apk… Nos pedirá que generemos un certificado con el que firmar nuestras apps y nos generará un archivo .apk que será el que deberemos instalar en nuestro teléfono o enviar al Market.