» » Mostrar Pagina Web En Una Aplicacion Android APK

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


    1. image

      omegayalfa

      21-Set, 2015, 23:02
      // Activamos javascript
      WebSettings webSettings = mWebView.getSettings();
      webSettings.setjavascriptEnabled(true);

      Si te da error en esta parte borrar......y listo----

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!

Redes Sociales

Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...