Advertisement
  1. Code
  2. Android SDK

SDK de Android: incorpora un WebView con el motor WebKit

Scroll to top
Read Time: 4 min

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Este consejo rápido demostrará cómo puedes incorporar un WebView de Android en tu aplicación con el motor WebKit. Aprenderás a cargar una URL externa y a representar el marcado personalizado que proporciones en la aplicación.

Paso 1: Preparación

Comienza creando un nuevo proyecto de SDK de Android en tu IDE de elección. Puedes nombrar la actividad principal, la raíz del paquete y proyectar lo que quieras. Elige Android 1.6 como tu plataforma para mantener una amplia compatibilidad.

Android WebView: Create New WebView Project With WebKitAndroid WebView: Create New WebView Project With WebKitAndroid WebView: Create New WebView Project With WebKit

Paso 2: Configurar el widget WebView

El widget WebView funciona como cualquier otro widget SDK de Android: lo declaras en un archivo de diseño y luego puedes acceder a él desde una actividad y decirle qué hacer.

Abra tu archivo de diseño main.xml o créalo si tu IDE aún no lo ha hecho. Después declara el widget WebView como un elemento secundario del elemento LinearLayout, asegurándote de especificar un identificador para que puedas tener acceso al widget más adelante. Como siempre, no olvides declarar el ancho y alto o de lo contrario tu aplicación producirá una excepción. Para fines de demostración, vamos a hacer que el componente llene toda la pantalla configurando los atributos android:layout_width y android:layout_height en fill_parent.

Paso 3: Solicitar permiso de Internet desde el manifiesto de Android

Dado que vamos a cargar una URL en el widget WebView, debemos asegurarnos de solicitar permiso para acceder a Internet en AndroidManifest.xml

Ábrelo y declara un elemento de permisos de uso donde especificas android.permission.INTERNET como el atributo android:name, así (línea 6):

Si inicias tu aplicación en el emulador de Android ahora, verás una pantalla en blanco. ¿por qué? Bueno, todavía no le hemos dicho a WebView que renderice nada; eso es lo que haremos a continuación.

Paso 4: Cargar una página web

Abre tu actividad principal (com.webkitdemo.WebKitDemo en nuestro caso) y agrega el siguiente código al método onCreate():

Este fragmento de código tiene acceso al widget WebView a través de su ID de recurso e invoca loadUrl(). Inicia la aplicación en el emulador y ve el resultado: ¡debería mostrar el sitio en el que se encuentra actualmente!

Android Webview: Webkit Rendering

Paso 5: Renderizar marcado personalizado

Después reemplazaremos la llamada a loadUrl() con loadData(), la cual toma tres argumentos:

  1. Cadena htmlData
  2. Cadena mimeType
  3. Codificación de cadenas

Comenta la línea engine.loadUrl() e inserta el siguiente código debajo de ella:

Compila y reinicia la aplicación en el emulador y deberías ver esto:

Android WebView: Load Custom HTML/CSS

Técnicamente, puedes pasar otro tipo de datos con su respectivo tipo mime a este método, pero la mayoría de las veces usarás text/html con una codificación UTF-8. No olvides que estás utilizando WebKit, un potente motor web; cuando diseñes tus manuales o cualquier cosa que quieras mostrar puedes utilizar CSS3, JavaScript, entre otros.

NOTA: Una de las peculiaridades de WebView es el hecho de que JavaScript está deshabilitado de forma predeterminada. La razón de esto es que en la mayoría de los casos cuando se incorpora un WebView en la aplicación, se usa para un manual de ayuda o para algo que no requiere JavaScript. Sin embargo, es fácil habilitarlo si lo necesitas:

Características adicionales

Es posible que hayas notado que el widget no tiene una barra de herramientas. Esto está previsto, ya que normalmente lanzarías la aplicación de navegador web nativa si quieres capacidades de navegación. Sin embargo, hay una manera de controlarlo mediante programación. Intenta invocar uno de los siguientes métodos en la instancia de tu widget:

  • reload(): Actualiza y vuelve a renderizar la página.
  • goForward(): Avanza un paso en el historial del navegador.
  • goBack(): Retrocede un paso en el historial del navegador.

La API tiene mucho más que ofrecer, pero eso excede los límites de este consejo rápido.

Conclusión

Ahora deberías estar familiarizado con el uso básico del muy útil widget WebView de Android. Puedes usarlo para mostrar una página web "acerca de" para tu aplicación o un manual de usuario, todo tipo de cosas. Técnicamente, incluso puedes escribir tu aplicación usando JavaScript, CSS y HTML y mostrarla usando el widget, aunque eso no sería demasiado práctico... ¿O no?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.