Tutorial: aplicación Android basada en web

Featured image

En esta entrada explicaré como crear cómo crear una aplicación Android basada en una web y un método alternativo: Adobe PhoneGap Build.

En mi caso me basaré en FrontInvaders, un juego web que he adaptado para poder ser jugado en dispositivos móviles. La aplicación web podrá tener las actividades que quieras, aunque para esto sólo necesitaremos una, porque la misma web está estructurada en varias páginas, por las cuales podemos movernos entre ellas mediante botones que contienen las mismas.

Otra opción, más rudimentaria, sería crear varias actividades con cada página de la aplicación web incrustada en ella, y navegando por ellas mediante botones de la aplicación Android ajenos a la web. Esta opción queda descartada, ya que no aporta ninguna ventaja, por lo que usaremos una sola actividad como hemos comentado antes.

La actividad de nuestra aplicación contendrá un elemento Webview, donde “incrustaremos” la web y una “barra de progreso”, que se mostrará cuando esté cargando el contenido del Webview y una vez cargado desaparecerá dejando su hueco al Webview. Además añadiremos algunos botones a la “Action Bar” (la barra horizontal de la parte superior de la aplicación).

Hay que decir que usaremos el Webview de tal manera que el contenido de la web permanezca en las dimensiones que le demos dentro de la actividad, ya que con la forma básica de Webview desplegaríamos una nueva pestaña del navegador del dispositivo ajena a la aplicación.

Un concepto importante a tener en cuenta es que la web tiene que tener un diseño adaptativo (Responsive Web Design) para adaptarse a las dimensiones del dispositivo móvil o tablet donde ejecutaremos la aplicación. Para ello, en mi caso, uso el framework Bootstrap

Una vez comentados estos conceptos pasamos a explicar cómo se haría, comenzando un proyecto desde cero con Android Studio.

1 – Actividad básica

Creamos un proyecto con una actividad “Blank” y le dejaremos el nombre de “activity_main”.

Lo primero que haremos en nuestro proyecto es cambiar el “layout” para conseguir una mejor organización de los elementos de la aplicación. Por defecto viene “Relative Layout” y nosotros lo cambiaremos a “Lineal Layout (Vertial)” Con arrastrar este elemento a los elementos de la actividad en el sección de “Desing” debería valer, pero en mi caso no me dejar cambiarlo. Para hacerlo simplemente nos vamos a la sección de “Text” y lo cambiamos manualmente: sustituimos “RelativeLayout” por “LinearLayout” al principio y al final del documento y añadimos “android:orientation=”vertical””

2 – Botón de salida

Ahora añadiremos un botón de salida a la barra superior (“Action Bar”) que aparece. Por defecto si la pulsamos nos ofrece la opción de “Settings”. Para cambiar este texto a “Exit” por ejemplo, nos vamos al fichero “values/strings.xml” y cambiamos el valor al que queramos. Dentro de este fichero podemos cambiar el valor de los strings que inicicialicemos o el mismo nombre de la aplicación.

Para hacer que salga al pulsarlo nos vamos a MainActivity.java (si le hemos dejado el nombre por defecto, si no a la clase asociada a nuestra actividad). Dentro en la función “onOptionsItemSelected” cambiamos “return true” por “finish()” en el condicional if que se activa cuando pulsamos nuestra tecla.

Si queremos personalizar este elemento sólo tenemos que acceder a “menu/menu_main.xml” y modificar los parámetros que queramos (en mi caso el nombre, el icono y cuando mostrarlo).

Con estos parámetros personalizamos el icono y texto que aparecerá. Además especificamos cuando aparecerán éstos: con “ifRoom” mostrará el icono si hay espacio en la Action Bar y con “withText” mostrará el icono y el texto si tienes espacio para ambos.

Además añadiré otro item hacia una sección de contacto, lo puedes ver en los pantallazos finales al final de este documento.

3 – Webview con nuestra web

Primero permitiremos que nuestra actividad tenga acceso a internet: simplemente añadimos la línea

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

al AndroidManifest.xml Para añadirla nos vamos a la sección de “Desing” de la actividad y arrastramos un elemento Webview a ella. Una vez ahí lo agrandamos lo que queramos, por ahora intentaremos que ocupe toda la pantalla. Una vez añadido (con la ID “webView”) crearemos la funcionalidad. En la función “onCreate” de la actividad añadimos el código:

// Trabajamos con WebView

String URL = "http://jcristobal.github.io/FrontInvaders/";

WebView webview;

webview = (WebView)findViewById(R.id.webView); webview.loadUrl(URL);

Lo que hacemos es declarar la web que incrustará, declara un webview y le asigna la web. Pero de esta forma abrirá una pestaña del navegador ajena a nuestra aplicación, por lo que tenemos que implementar para que se quede “incrustado” en nuestra aplicación (código comentados en los los comentarios de línea):

// Trabajamos con WebView

String URL = "http://jcristobal.github.io/FrontInvaders/";

WebView webview;

webview = (WebView)findViewById(R.id.webView);

// Para que se incruste en el webview

webview.setWebViewClient(new WebViewClient() {

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

});

// Podemos añadir opciones

webview.getSettings().setJavaScriptEnabled(true); // Permitimos que se ejecute JavaScript

//webview.getSettings().setLoadWithOverviewMode(true); // Ajustamos la vista para que no se vea demasiado grande

//webview.getSettings().setUseWideViewPort(true); // habilitamos el zoom

//webview.getSettings().setBuiltInZoomControls(true); // habilitamos el zoom

webview.setInitialScale(100); // Escala inicial al 100%

// Por último cargamos la URL en nuestra Webview

webview.loadUrl(URL);

4 – Barra de progreso

Para añadirla volvemos a ir a la pestaña de “Desing” de la actividad y la arrastramos, situándola en la parte posterior del webview. Ahora definiremos su funcionalidad. Volvemos a MainActivity.java y antes de la función “onCreate” declaramos private ProgressBar progressBar; y dentro de “onCreate” (con la ID de nuestra barra de progreso siendo “progressBar”):

// Para la barra de progreso
progressBar = (ProgressBar) findViewById(R.id.progressBar);
webview.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);
}
}
});

En su layout (pestaña “Desing”) se vería así:

En el siguiente pantallazo podemos ver como se muestra el proceso de carga en nuestra barra y que una vez que finalice le dejará su espacio a la Webview:

Ya estaría acabada, en los siguientes pantallazos no se aprecia la barra de progreso ya que está cargado y ha desaparecido.

Para acabar también cambiaremos el icono con el que aparecerá en el menú del dispositivo. Para ello vamos al directorio app\src\main\res dentro de nuestro proyecto. Dentro veremos 4 carpetas con la misma imagen a distintos tamaños: mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi y mipmap-xxhdpi. Para cambiar el icono tendremos que meter nuestro icono personalizado en cada carpeta a distinto tamaño. Una vez que ejecutemos sin problemas podremos ver nuestro nuevo icono.

Para facilitar la creación de las 4 imágenes iguales a distintos tamaños podemos usar la web http://romannurik.github.io/AndroidAssetStudio/ que nos lo facilita enormemente.

Puedes ver el código en su repositorio de GitHub, además se puede descargar el enlace al instalador Android. Otra opción sería usar Adobe Phonegap Build . Una web donde te permite usar el framework de PhoneGap para crear aplicaciones a partír de webs para varias plataformas. Se basa en lo explicado antes pero más simplificado: con código HTML, CSS y JavaScript (una web) crea una aplicación (para varias plataformas: iOS, Android y Windows Phone) que contiene una Webview con esa web. Para crearla tendremos que introducir el repositorio de GitHub que contenga el código de nuestra web y mandarlo compilar. Una vez compilado tendremos nuestra aplicación para varias plataformas. Como ejemplo podemos ver la aplicación learnUSAstates en un dispositivo Android. Una vez compilado tendremos la aplicación (como se puede ver en los siguientes pantallazos) con completa funcionalidad:

Dentro del repositorio podemos especificar en el archivo “config.xml” algunas especificaciones para nuestra aplicación, como el icono que tendrá o los permisos que pedirá. Este archivo lo consulta al compilar “Adobe Phonegap Build” y personalizar nuestra aplicación.


<?xml version='1.0' encoding='utf-8'?>
<widget id="com.jcristobal.learnUSAstates" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>learnUSAstates</name>
    <description>
        App to learn the different states of United States.
    </description>
    <author email="tobas92@gmail.com" href="https://github.com/JCristobal">
        JCristobal
    </author>
    <content src="index.html" />
    <access origin="*" />
    <icon src="icon.png" />
    <preference name="permissions" value="none"/>
</widget>

Si no modificamos nada se vería el icono por defecto de Phonegap y pediría todos los permisos, y en mi caso después de personalizarlo:

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s