Crearemos una aplicación a partir de un fichero html local empleando el componente webview. Para lo que hay que agregar la carpeta "assets" con el contenido:
Como se vió, Android Studio había creado la estructura de carpetas del proyecto y todos los ficheros necesarios de un "Hello world" básico, es decir, una sola pantalla donde se muestra únicamente un mensaje fijo.
Lo primero que vamos a hacer es diseñar nuestra pantalla principal modificando la que Android Studio nos ha creado por defecto. Recordemos dónde y cómo se define cada pantalla de la aplicación. En Android, el diseño y la lógica de una pantalla están separados en dos ficheros distintos. Por un lado, en el fichero /src/main/res/layout/activity_main.xml tendremos el diseño puramente visual de la pantalla definido como fichero XML y por otro lado, en el fichero /src/main/java/paquete.java/MainActivity.java, encontraremos el código java que determina la lógica de la pantalla.
Vamos a modificar en primer lugar el aspecto de la ventana principal. Para ello, vamos a sustituir el contenido del fichero activity_main.xml por el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<WebView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/webView1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</LinearLayout>
Lo primero que nos encontramos es un elemento LinearLayout. Los layout son elementos no visibles que determinan cómo se van a distribuir en el espacio los controles que incluyamos en su interior. En este caso, un LinearLayout distribuirá los controles simplemente uno tras otro.
La ventana principal queda como sigue:
Con esto ya se tiene definida la presentación visual de nuestra ventana principal de la aplicación, para la cual ya tenemos creado un fichero por defecto llamado MainActivity.java. Sustituyamos su contenido por el siguiente:
package cu.edu.uo.cees.eveacees;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView webView;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//asociamos
WebView mWebView = (WebView) findViewById(R.id.webView1);
//cargo un .html que he situado en la carpeta asset/ del proyecto
mWebView.loadUrl("file:///android_asset/index.html");
}
}
Descarga local de la aplicación Descarga del sitio Web del ejemplo
Vista de la ejecución de la aplicación: