Como mostrar tu web en una aplicacion android

En este Tutoriales En Linea mostraremos el siguiente código que nos permite ejecutar cualquier página web en una App nativa de Android.


El siguiente código incluye la configuración para que se visualice tu sitio web con la clase WebView. La clase WebView es una extensión de la clase View de Android que le permite mostrar páginas web como parte del diseño de su actividad. En el siguiente ejemplo utilizaremos un ejemplo de Android Studio con la actividad de Basic Activity.

Requisitos:

Android Studio - 2020.3.1 para Windows de 64 bits, Android SDK, los necesarios para tu proyecto.

Una vez hayamos instalado Android Studio y tener los SDK necesarios, procederemos a crear nuestro primer proyecto.

Deberías ver el asistente New Project, que te permite elegir el tipo de proyecto que deseas crear. Esta página sirve como guía para la creación de un nuevo proyecto desde el asistente New Project.

En la pantalla que aparece, puedes seleccionar el tipo de proyecto que deseas crear entre las categorías de dispositivo, que se muestran como pestañas cerca de la parte lateral del asistente.


Recuerde: En este caso hay que seleccionar Basic Activity.

Haz tu selección y, luego, haz clic en Next.


En este ejemplo utilizaremos el nombre (Name) que deseemos para nuestro proyecto, Pakage name podemos personalizarla, en Lenguage elegimos java. El resto, lo dejamos como esta y esperamos a que se genere el proyecto. 


Una vez abierto el código en nuestro Android Studio, comprobamos que tenga los SDK necesarios para nuestro proyecto:


Abrimos el archivo AndroidManifest.xml y copiamos el siguiente código:

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

Código completo del archivo:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app.tutorialesenlinea">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.TutorialesEnLinea">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.TutorialesEnLinea.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Verás que en las primeras filas ya aparecen los permisos necesarios de tu app. En este caso necesitamos permiso para conectarse a INTERNET, para DESCARGAR archivos y para SUBIR archivos. Hay muchos más que puedes añadir si tu aplicación los necesita.

Deberás crear tus propios iconos para la App. Te explico cómo: Hay que iniciar Image Asset Studio, sigue estos pasos:

Haz clic con el botón derecho en la carpeta res y selecciona New > Image Asset. elegimos la imagen y le damos a Next.


Luego abrimos el archivo activity_main.xml, simplemente tiene 2 instrucciones. Decirle qué WebView tiene que mostrar, en este caso le hemos asignado como id en nombre «web_view» y especificamos el android:layout_height y android:layout_width como «match_parent» para que se ajuste al total de las pantallas.

El código es el siguiente:

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Código completo del archivo:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Y por ultimo modificamos el archivo MainActivity.java. Aquí es donde se añaden todas las instrucciones para el correcto funcionamiento de nuestra app. No voy a extenderme mucho en explicaciones.

• Linea 92, sirve para ocultar el STATUS BAR mientras se ejecuta nuestra aplicación.
• Linea 118, webView.loadUrl («https://tutorialesenlinea.es/»);  aquí es donde ponemos la dirección de nuestra web . Recordad poner la dirección absoluta.
• Linea 133,  función para permitir descargas de archivos.
• Linea 172,  las siguientes líneas hacen que se permita la subida de archivos desde la app a nuestro servidor a través de un boton <input type=»file»> de nuestra webapp. En este caso sólo permite subir imágenes. Puedes modificarlo en la linea 200.
• Linea 200, especificamos el tipo de archivos permitidos en la subida, pueden ser imágenes, pdf…
• Linea 235,  permite el BACK desde el botón del móvil en caso de poder volver atrás. En caso contrario, cerrará la aplicación.

Y aquí esta el código completo:
Por razones de seguridad de este CMS (DataLife Engine) no me deja poner un código con la palabra jаvascript, entonces míralo en Google drive. clic aquíY en el ultimo paso lanzamos nuestra app en nuestro AVD manager. Para ejecutar una aplicación en el emulador primero necesitarás crear un Dispositivo Virtual Android (AVD). Un AVD no es más que la configuración de un dispositivo para el emulador de Android. Ver explicación aquí. 
Leer también: Como crear un APK firmado en Android Studio


Descargar código completo de este tutorial