Mostrar Pagina Web En Una Aplicacion Android APK

Mostrar Pagina Web (HTML5, PHP, ETC) En Una Aplicacion Android APK

En este Tutoriales En Linea mostraremos el siguiente código que nos permite ejecutar cualquier página web como una app nativa en Android, en el código se incluye la configuración para que funcione el botón "atrás” de los teléfonos android, así como eliminar la barra de títulos y queda listo para abrir todos los enlaces de una página web en la APP y los externos en el navegador (esto es muy importante para abrir enlaces de redes sociales, etc, fuera de la app como debe de ser).

PASO 1

\app\src\main\AndroidManifest.xml

<!-- INI AGREGADO -->
<!-- Otorgamos permisos de Internet a nuestra App -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- FIN AGREGADO -->

PASO 2

\app\src\main\res\layout\activity_main.xml

<!-- INI AGREGADO -->
<!-- Creamos una actividad webview para mostrar nuestra pagina web -->
<WebView
 android:id="@+id/activity_main_webview"
 android:layout_height="match_parent"
 android:layout_width="match_parent" />
<!-- FIN AGREGADO -->

PASO 2.1

Entrar en modo Design y borrar el padding

PASO 3

\app\MainActivity.java

// INI AGREGADO
private WebView mWebView;
// FIN AGREGADO

PASO 3.1

// INI 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 AGREGADO

PASO 3.2

// INI AGREGADO
 @Override
// Detectar cuando se presiona el botón de retroceso
 public void onBackPressed() {
 if(mWebView.canGoBack()) {
 mWebView.goBack();
 } else {
 super.onBackPressed();
 }
 }
// FIN AGREGADO

PASO 4

\app\MyAppWebViewClient.java
Creamos nueva clase con el nombre "MyAppWebViewClient” y OK.Borramos todo el codigo de la clase y ponemos el siguiente:

package com.demo.demo.app;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;
// INI 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("google.com")) {
 return false;
 }
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
 view.getContext().startActivity(intent);
 return true;
 }
}
// FIN AGREGADO

PASO 5 (Opcional)

\app\src\main\res\values\styles.xml

<!-- INI AGREGADO -->
<!-- Ocultamos la barra de titulo -->
 <item name="android:windowNoTitle">true</item>
<!-- FIN AGREGADO -->


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

Comentarios 8
    1. image
      omegayalfa 2015-09-21
      // Activamos javascript
      WebSettings webSettings = mWebView.getSettings();
      webSettings.setjavascriptEnabled(true);

      Si te da error en esta parte borrar......y listo----
      Spam
      ------
      Un tutorial normalmente consiste en una serie de pasos que van aumentando el nivel de dificultad y entendimiento. Por este motivo, es mejor seguir los tutoriales en su secuencia logica para que el usuario entienda todos los componentes
    2. image
      Onlyy 2019-06-25
      Listo todo funciona... sin embargo en mi sitio web tengo un numero de teléfono que en Google Chrome abre el teléfono nativo, pero en el web view envía un mensaje de error
      El sitio web tel:XXXXXX no se puede mostrar.
      Lo mismo sucede con el mapa ya que mi web abre la aplicación nativa de google mapa. entonces no tiene mucho sentido el web view o falta alguna configuración adicional??
      Spam
      1. image
        Tutoriales En Linea 2019-06-25
        sobre el telefono has mirado esto: https://tutorialesenlinea.es/2633-como-hacer-una-llamada-desde-tu-sitio-web.html
        y sobre google maps, creo que no se puede hacer nada siempre abrirá la aplicación de ellos
        Spam
        ------
        Los cursillos o tutoriales son sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algun procedimiento o los pasos para realizar determinada actividad....
        https://tutorialesenlinea.es
    3. image
      Onlyy 2019-06-25
      Me refiero a que el web view que esta aquí no permite abrir la aplicación nativa de google maps ni tampoco abre la aplicacion nativa del teléfono este es el mismo código que esta en mi web y como te repeito en Google Chrome, Opera funciona, pero en Web View NO funciona <a href="tel:+1-001-123-45671">+1 (001) 123-4567</a> envía error al estar tu sitio web en Web View.es como si no pudiera interpretar el web View la dirección tel: ...
      Spam
      1. image
        Tutoriales En Linea 2019-06-25
        hola.
        Por casualidad has mirado https://developer.android.com/reference/android/webkit/WebView.html?hl=es-419
        o
        https://developer.android.com/s/results/?q=web%20View%20llamar%20telefono
        por que sinceramente nunca he tenido ese inconveniente, no obstante seguiré investigando por si encuentro algunas solución...Saludos
        Spam
        ------
        Los cursillos o tutoriales son sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algun procedimiento o los pasos para realizar determinada actividad....
        https://tutorialesenlinea.es
        1. image
          Onlyy 2019-06-25
          Logre correr tu código y funciona sólo una observación
          webSettings.setjаvascriptEnabled(true); La J me da con mayúscula gracias a eso me logro correr

          Mi otra duda es esta línea de código

          mWebView.setWebViewClient(new MyAppWebViewClient());

          Ya or fin me abre tel: y todo los enlaces gracias a esa línea PERO LA BARRA DE DIRECCIÓN o BARRA DE BÚSQUEDA APARECE Y CON Un titulo que se ve muy mal
          ---------------------------------------------
          Web View Brouser Tester 69.etc
          Tambien se ve el URL, que podemos hacer ?
          ---------------------------------------------
          Spam
    4. image
      Tutoriales En Linea 2019-06-26
      estuve investigando y es webView.getSettings().setJаvaScriptEnabled(true);
      y con respeto al titulo has probado <item name="android:windowNoTitle">false</item> o en lo relacionado con el diseño
      \app\src\main\res\layout\
      o mirar este tutorial
      https://tutorialesenlinea.es/2648-los-mejores-fragmentos-de-codigo-de-java-que-utilizan-webviewsetwebviewclient.html
      Spam
      ------
      Los cursillos o tutoriales son sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algun procedimiento o los pasos para realizar determinada actividad....
      https://tutorialesenlinea.es
    5. image
      Onlyy 2019-06-29
      Tengo que agradecer a TUTORIALES EN LÍNEA que este código me sirvio de base
      para lograr lo que pretendía un web view que funcione con todas las caracteristicas de Google Chrome

      --------CÓDIGO DE ORO ME VALIÓ MUCHO Y NO ESTABA POR NINGUNA PARTE----------------

      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://

      // ESTE IF FUNCIONA PARA QUE TU WEB VIEW LOGRE INTERPRETAR QUE TIENE A TEL: el resto que lo expliquen aqui pero funciona jajajaaja

      if(url.startsWith("tel:")){
      Intent intent = new Intent(Intent.ACTION_DIAL);
      intent.setData(Uri.parse(url));
      startActivity(intent);
      return true;
      }

      Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
      view.getContext().startActivity(intent);
      return true;
      }
      }


      ----------------------------------------------------------------------------------------------------------------------
      Sirve para el correo, para el teléfono para google maps y para whatsapp solo es ir cambiando los intent y ya con esto tendrán un web view sin barra de direcciones se ve super pro!

      Estoy buscando el compartir desde la web que ya lo ando cerca
      Spam


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