SapoBuskedas WebView

Cómo crear un navegador sencillo con el WebView de Android

Este artículo que publico hoy, viene a cuento de que me he pasado una noche en vela y el otro día leí un post “parecido”  en algún RSS, me decidí a volver a retomar un poco esto de programar en Android. El artículo que leí hablaba sobre el WebView de Android. Este permite integrar una página web como parte de la aplicación que desarrollemos. WebView viene con todas las características de un navegador de escritorio como la gestión de historial, cookies, soporte HTML5 y mucho más. Usando WebView puedes crear aplicaciones muy interesantes como integrar juegos HTML5 en la aplicación, aun que este no será el caso.

SapoBuskedas WebView

En este artículo de hoy, voy a tratar de explicar el uso básico de WebView mostrando un buscador en buscadores que  proporcione la posibilidad de navegación y soporte soporte para marcadores. Además veremos como utilizar el WebView con otros elementos materiales como CollapsingToolbar y NestedScrollView para lograr la experiencia nativa de Android.



1. El uso básico de WebView

La integración de un WebView en tu aplicación tan solo serán dos pasos. Primero debes incluir el elemento WebView en tu diseño xml.

<WebView
android:id=”@+id/webView”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”/>

En segundo lugar, tienes que cargar la URL específica en la vista web de tu actividad. El siguiente paso sería colocar (por ejemplo) la página principal de google en la vista web.

SapoBuskedas Google

A pesar de que la carga de una url simple parece muy fácil, la personalización de la WebView necesita un conocimiento profundo sobre WebView y los métodos que este proporciona. Comenzaremos con los métodos básicos que WebView proporciona. Más adelante, crearemos una actividad de navegador simple que actúe como navegador integrado que ofrecerá opciones de retroceso, avance y marcador. Vamos a ir uno por uno, iniciando un proyecto sencillo en Android Studio.

2. Creación de un nuevo proyecto

1. Vamos a crear un nuevo proyecto en Android Studio desde Archivo ⇒ Nuevo proyecto. Rellena los detalles requeridos.

2. Esperamos a que se inicie Android Studio. Como necesitamos hacer peticiones de red, será necesario agregar permiso de INTERNET en

AndroidManifest.xml.

3. Ahora nos dirigiremos al build.gradle y agregamos el soporte de la biblioteca Glide. Esto es necesario para cargar la imagen en CollapsingToolbar. Este paso es opcional, pero sugiero que lo sigas para que todo funcione al final de este artículo.

build.gradle

4. Descarga esta carpeta de recursos y agrega el contenido al proyecto. Esta carpeta contiene imágenes y elementos necesarios para este proyecto.

5. Ahora abrimos los archivos de diseño de tu actividad principal (activity_main.xml y content_main.xml) y el elemento WebView. Al mismo tiempo también estoy agregando CoordinatorLayout, Toolbar y un ProgressBar que se mostrará mientras se carga la página web.

activity_mail.xml

content_main.xml

6. Ahora es el momento de abrir MainActivity.java y modificarlo como se muestra a continuación. Aquí el método initCollapsingToolbar () no tiene nada que ver con WebView, pero es para proporcionar efecto colapsante cuando se despliega la página web. El método Glide se utiliza para mostrar la imagen de encabezado en la barra de herramientas.

MainActivity.java

Si ejecuta la aplicación ahora, puede ver que la página web se está cargando en el WebView. Ahora veremos los otros métodos útiles que ofrece la vista web.

2.1 Cargando Html, CSS y estilos de fuentes locales

En algunos casos es posible que tenga que cargar una página web desde el almacenamiento local de la aplicación en lugar de una url. Con el fin de hacer eso podemos mantener todos los html, css y fuentes en la carpeta de activos y cargarlos desde allí.

7. En caso de que esto sea necesario, vamos a crear una nueva carpeta en src / main llamada assets (src / main / assets) y colocaremos ahí el html, css y fuentes. Podríamos crear un archivo html con el código que necesites mostrar, lo podrías llamar local.html (por ejemplo). No voy a colocar el código de esta página, el que lo necesite que lo haga, es sencillo. También estoy agregando dos fuentes de encargo Roboto-Light.ttf y Roboto-Medium.ttf para aplicar la cara de la fuente de encargo en CSS. Estas fuentes las podrás descargar del enlace que he colocado líneas más arriba.

archivos WebView8. Para llamar el código tendríamos que llamar desde el MainActivity.java al archivo local.html que se encontraría dentro de la carpeta assets. Para ello utilizaríamos el siguiente código:

2.2 Activación / desactivación de Javascript

Continuando con la carga de la url podríamos habilitar o deshabilitar la funcionalidad javascript en una página web llamando al método setJavaScriptEnabled ().

2.3 Activación de controles de zoom

WebView proporciona controles de zoom incorporados para ampliar o reducir la página web. Estos controles son muy útiles cuando tengas dificultades para leer las fuentes más pequeñas en la página web. El siguiente código habilita los controles de zoom en la página web.

2.4 Creación de un navegador sencillo en la aplicación

Llegados a este punto, con los conocimientos básicos que acabamos de adquirir, vamos a ver cómo crear una actividad de navegador simple. Añadiéndole navegaciones hacia atrás, hacia delante y opción de marcador. Este navegador en la aplicación será muy útil para mantener a los usuarios en su aplicación en lugar de navegar por ellos hasta un tercer navegador como Chrome.

9. Creearemos una clase llamada Utils.java y vamos a añadirle el siguiente código.

> IsSameDomain () comprueba si una url es del mismo dominio o no. Este método será útil para iniciar la actividad del navegador en caso de URL externa.

> Método bookmarkUrl () agrega o quita una url de la lista de marcadores usando SharedPreferences. IsBookmarked () comprueba si una url está marcada o no.

> TintMenuIcon () cambia el color del icono de la barra de herramientas. Este método consiste en cambiar el color del icono del marcador cuando una URL está marcada.

Utils.java

10. En el menú Res ⇒, crea un nuevo menú denominado browser.xml. Este menú coloca los iconos de retroceso, avance y favoritos en la barra de herramientas.
Browser.xml

11. Crea una nueva actividad llamada BrowserActivity.java y añade el siguiente código. Esta actividad gestiona el navegador hacia adelante y hacia atrás en la barra de herramientas junto con la opción de marcador.
BrowserActivity.java

12. Ahora abrimos el MainActivity.java para modificar el código como se indica a continuación. Aquí utilizamos un MyWebChromeClient personalizado () para interceptar los métodos de WebView. En shouldOverrideUrlLoading () detectamos si el enlace pulsado es interno o externo. Si es externo, lanzamos el BrowserActivity.

MainActivity.java

Una vez terminado todo esto, podemos ejecutar la aplicación. Si hace clic en el botón del buscador se abrirá el enlace externo de la página web. Puedes ver el navegador de aplicaciones iniciado con la navegación.

webview funcionando

Aquí el bloque de código que lanza el navegador en la aplicación. Pasa la URL deseada que desea cargar.

Con esto podemos disponer de nuestro propio navegador dentro de nuestra APP. Para ver el ejemplo aquí desarrollado, puedes descargarte la APP de SapoBuskedas, con la que podrás realizar búsquedas en multitud de servidores (de diferentes temáticas). Para descargarla, sigue este enlace.

 

Deja un comentario