Inicia sesión




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

Te sugiero seguir leyendo...



  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2018-11-13
  • Categorias: Android Android Studio App Google Desarrolladores Tablet Noticias Tutorial


Comentarios 8
    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
    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
    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
    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
    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


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






Como posicionar mi página web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: WebSite Marketing SEO Noticias Tutorial

¿Cómo usar una impresora láser A3?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: hardware Noticias Tutorial

Como hacer algoritmo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: Lenguajes De Programacion Algoritmos Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial