Como mostrar tu web en una aplicación

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.

Paso 1

Sin embargo, antes de que funcione su aplicación debe tener acceso a Internet. Para obtener acceso a Internet, solicite el permiso de Internet en su archivo de manifest (Este se encuentra en \app\src\main\AndroidManifest.xml). Esto depende si lanzamos un App o importamos algún ejemplo de Android Studio que previamente tenga los permisos concedidos. Por ejemplo:
<!-- Código agregado -->
<!-- Otorgamos permisos de Internet a nuestra aplicación -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Fin del código agregado -->

Paso 2

Buscamos el siguiente archivo en la ruta siguiente: \app\res\layout\activity_main.xml  Y agregamos el siguiente código antes de </android.support.constraint.ConstraintLayout>:
<!-- Código agregado -->
<WebView
    android:id="@+id/activity_main_webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>
<!-- Fin del código agregado -->

Paso 3

Buscamos el siguiente archivo en la ruta siguiente: app\java\com.example.NOMBRE DE TU EQUIPO.NOMBRE DE TU APP\MainActivity.java en este Tutoriales En Linea es app\java\com.example.alfa.tutoriales\MainActivity.java

Paso 3-1

Agregamos el siguiente código después de: public class MainActivity extends AppCompatActivity {
// Código agregado
private WebView mWebView;
// Fin del código agregado

Paso 3-2

Luego agregamos el siguiente código después de: setContentView(R.layout.activity_main);
// Código agregado
 mWebView = (WebView) findViewById(R.id.activity_main_webview);
// Activamos jаvascript
 WebSettings webSettings = mWebView.getSettings();
 webSettings.setJаvaScriptEnabled(true);
// Url que carga la app (webview)
 mWebView.loadUrl("https://tutorialesenlinea.es/");
// Forzamos el webview para que abra los enlaces internos dentro de la la APP
 mWebView.setWebViewClient(new WebViewClient());
// Forzamos el webview para que abra los enlaces externos en el navegador
 mWebView.setWebViewClient(new MyAppWebViewClient());
// Fin del código agregado

Paso 3-3

Seguimos agregando el siguiente código después del primer cierre: }
// Código agregado
 @Override
// Detectar cuando se presiona el botón de retroceso
 public void onBackPressed() {
 if(mWebView.canGoBack()) {
 mWebView.goBack();
 } else {
 super.onBackPressed();
 }
 }
// Fin del código agregado

Paso 4

Luego de tener los anteriores códigos puesto en el archivo, esto nos estara marcando error en colo rojo, nos ubicamos encima de ellos y damos clic en alt y intro(Enter), buscamos la clase MyAppWebViewClient clic encima de el y creamos una nueva clase como muestra la imagen:

Paso 5

El  archivo creado se llamara \app\MyAppWebViewClient.javaEstando en el borramos todo el código de la clase, es decir borramos todo lo que halla en este archivo y ponemos el siguiente:
package com.example.alfa.tutoriales(Esto lo cambia por el nombre tu tu App);

import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;

// Código agregado
public class MyAppWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
// Url base de la APP (al salir de esta url, abre el navegador) poner como se muestra, sin https://
        if(Uri.parse(url).getHost().endsWith("tutorialesenlinea.es")) {
            return false;
        }
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        view.getContext().startActivity(intent);
        return true;
    }
}
// Fin del código agregado

Paso 6

Ejecutamos la aplicación.

Paso 7 (Opcional)

Buscamos \app\res\values\styles.xml y \app\res\values\colors.xml y lo modificamos a nuestros gusto. Que son los archivos de los colores y estilo de nuestra aplicación.
<color name="colorPrimary">#4a4a4a</color>

Recomendamos Leer:

- Crear un proyecto Android
- Ejecutar tu App desde Android Studio
Ejecutando tu aplicación
Trabajar con el API de Google Maps para Android en Android Estudio
Comenzar En Android Studio Colocando Publicidad A Tu App
- Vídeo: Colocar Publicidad A Tu App


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-01-01
  • Categorias: Android Android Studio App Google Desarrolladores WebSite Tablet Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!