Vamos a aprovechar el componente WebView de Android, para realizar una sencilla aplicación que muestre una página web determinada, a manera de navegador web. De esta manera, podemos hacer que nuestras aplicaciones web parezcan aplicaciones móviles ¡Manos a la obra!
Iniciemos el proyecto de Android Studio
Después de abrir el IDE de Android Studio, seleccionamos la opción New Project
Eb la siguiente ventana, seleccionamos Empty Views Activity y presionamos Next.
Lo primero es definir el nombre del proyecto en la opción Name, opcionalmente usamos Save Location para determinar la carpeta donde se guardará el proyecto. En Lenguage, seleccionamos Java y en Minimum SDK es recomendable usar una versión de Android con más del 95% de compatibilidad. Una vez hecho todo eso, presionamos el botón Finish.
Una vez terminada la carga del proyecto, abrimos el archivo activity_main.xml, eliminamos el TextView de ejemplo y vamos al Palette. En la sección Widgets, seleccionamos WebView y lo arrastramos dentro del activity.
Una vez colocado el WebView, con el Constraint Widget ajustamos sus cuatro coordenadas a cero. Establecemos las propiedades layout_width y layout_height a 0dp (match constraint) y por último le ponemos un id adecuado.
Estableciendo los permisos de la aplicación
Para funcionar correctamente, nuestra aplicación necesita solicitar los permisos necesarios al sistema operativo. Por tanto, lo siguiente es abrir el archivo Manifest.xml y establecer el permiso para acceder a Internet.
<uses-permission android:name="android.permission.INTERNET" />
La solicitud del permisos debe ir antes de la sección application:
Haciendo que funcione nuestro WebView
Es momento de abrir el archivo Java de nuestro proyecto (típicamente MainActivity.java) En el método onCreate, colocaremos una variable de tipo WebView.
WebView vistaweb;
No olvidemos añadir la clase necesaria.
Entonces, instanciamos nuestro WebView para que apunte al que tenemos en nuestro archivo xml.
WebView vistaweb = findViewById(R.id.miVista);
Necesitamos un objeto de tipo WebSettings para configurar los ajustes de nuestra vista web. El método getSettings de nuestro WebView permite recuperar los valores default.
WebSettings ajustes = vistaweb.getSettings();
Por supuesto, no olvidemos añadir la clase al proyecto.
Una vez creado el objeto, lo primero es habilitar el uso de JavaScript. Para ello, cambiaremos el valor del método setJavaScriptEnabled a true.
ajustes.setJavaScriptEnabled(true);
Sin embargo, es importante habilitarlo sólo si es realmente necesario, ya que puede ser un potencial riesgo de seguridad.
Si en verdad lo necesitamos, solo utilizamos la combinación de teclas Alt + Enter para mostrar opciones de solución. La más recomendada es Supress SetJavaScriptEnabled with an annotation.
A continuación, lanzamos nuestra vista web con el método setWebViewClient, mismo que necesita una instancia de WebViewClient.
vistaweb.setWebViewClient(new WebViewClient());
No olvidemos añadir la clase WebViewClient al proyecto.
Con el método loadURL, cargamos nuestra web.
vistaweb.loadUrl("https://hielocreativo.com");
Todo nuestro código queda así:
WebView vistaweb = findViewById(R.id.miVista);
WebSettings ajustes = vistaweb.getSettings();
ajustes.setJavaScriptEnabled(true);
vistaweb.setWebViewClient(new WebViewClient());
vistaweb.loadUrl("https://hielocreativo.com");
Y después de correr el proyecto en un dispositivo o un emulador, este es el resultado.
Comentarios, dudas o preguntas
¡Y eso es todo! No olvides dejar tus comentarios, dudas y / o preguntas. Con gusto las respondemos.
Docente, blogger, developer. Editor & Copy
Sobre: #Blogging, #Excel, #VBA, #Android, #PHP, #JavaScript, #Java, #WordPress, #IoT, #Python
