Android WebView Tutorial y Ejemplos

Este es un tutorial de android WebView y Ejemplos. Un WebView es una vista de android SDK que es capaz de renderizar páginas web.

¿Qué es un `WebView`?

Un WebView, como hemos dicho, es una vista que muestra páginas web.

Está representada por la clase WebView. Esta clase es mucho más poderosa de lo que podrías pensar. Sin embargo, es muy fácil y sencilla de usar y te proporciona abstracciones sobre las que puedes construir.

Es esta clase la base sobre la que puedes crear tu propio navegador web o simplemente mostrar algún contenido online dentro de tu Activity. La clase WebView hace uso del motor de renderizado WebKit para mostrar páginas web e incluye métodos para

navegar hacia adelante y hacia atrás a través de un historial
acercarse y alejarse.
realizar búsquedas de texto y más.

WebView es muy potente ya que proporciona una forma de escribir aplicaciones en lenguajes como Javascript y el marcado HTML. Hay muchos frameworks que hacen uso de esta capacidad, lo que le permite escribir su aplicación en tecnologías HTML5. Incluso puedes convertir tu sitio web, como por ejemplo un sitio web de wordpress en una aplicación para android.

Definición de la API `WebView`.

WebView es una clase concreta que reside en el paquete android.webkit. Deriva de la clase android.widget.AbsoluteLayout e implementa varias interfaces como se muestra a continuación:

public class WebView extends AbsoluteLayout implements ViewTreeObserver.OnGlobalFocusChangeListener, ViewGroup.OnHierarchyChangeListener

Esta es su jerarquía de herencia:

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.AbsoluteLayout
               ↳    android.webkit.WebView

¿Por qué Webview?

WebView es probablemente una de las clases más prácticas y fáciles de usar, pero infrautilizada en android. Esto es porque básicamente te permite crear una aplicación androide usando HTML, CSS y Javascript. Entendería que no se usara tanto si no pudiera ejecutar Javascript o renderizar CSS. Sin embargo, hace todo eso.

Esto proporciona capacidades de gran alcance como HTML, CSS y Javascript son fáciles de usar, tecnologías populares que impulsan las interfaces de usuario de casi todas las aplicaciones web o sitio web que ha visitado. Además, hay cientos de frameworks/bibliotecas para estas tecnologías que proporcionan potentes widgets y abstracciones. Entre ellos se encuentran jQuery, Vue.js, Angular, React.js, Bootstrap, materializecss, UIKit, etc.

Puedes crear fácilmente una simple aplicación web del lado del cliente que pueda interactuar con las tecnologías del lado del servidor como Node.js y PHP y colocarla en tu carpeta assets. A continuación, utilice WebView para cargarlo. Sin embargo, tienes que asegurarte de que Javascript está habilitado. Esto, entiendo que no es tan poderoso como tener una aplicación Java completa escrita en Java o Kotlin o C#, sin embargo, para los principiantes, usted rápidamente bootstrap su primera aplicación que se puede mostrar a los amigos a medida que continúe su educación.

Usando `WebView`

La mayoría de las veces querrás renderizar contenido online en tu webview. Así que para que tu Actividad acceda a Internet y cargue páginas web en un WebView, debes añadir los permisos INTERNET a tu archivo Android Manifest:

<uses-permission android_name="android.permission.INTERNET" />

A continuación, en tu layout añade un <WebView> en tu layout, o establece toda la ventana Activity como un WebView durante onCreate():

 WebView webview = new WebView(this);
 setContentView(webview);

Una vez hecho esto, puedes cargar tu página web a través del método loadUrl():

 // Simplest usage: note that an exception will NOT be thrown
 // if there is an error loading this page (see below).
 webview.loadUrl("https://camposha.info/");

loadurl() cargará nuestra página web desde la url que le proporcionemos. Esta es la forma más utilizada.

También se puede cargar desde una cadena HTML:

 String summary = "<html><body>You scored <b>192</b> points.</body></html>";
 webview.loadData(summary, "text/html", null);
 // ... although note that there are restrictions on what this HTML can do.
 // See the JavaDocs for loadData() and loadDataWithBaseURL() for more info.

Esto significa básicamente que escribes tu código HTML dentro de una cadena. Luego lo cargas a través del método loadData(). Esto es adecuado para cargar sitios web con una estructura DOM(Document Object Model) simple.

Ejemplos rápidos de `WebView` y HowTo's

Vamos a ver unos rápidos howTos para nuestra clase webview. Más adelante veremos cómo escribir una aplicación completa.

1. Configuraciones comunes de la `WebView`.

Aquí hay algunas configuraciones de uso común de WebView. Vamos a encapsularlos en un simple método estático que luego podremos reutilizar fácilmente.

    // Commonly used WebViewSetting
    public static void initWebSetting(WebView webView) {
        WebSettings setting = webView.getSettings();
        setting.setJavaScriptEnabled(true);
        setting.setAllowFileAccess(true);
        setting.setAllowFileAccessFromFileURLs(true);
        setting.setAllowUniversalAccessFromFileURLs(true);
        setting.setAppCacheEnabled(true);
        setting.setDatabaseEnabled(true);
        setting.setDomStorageEnabled(true);
        setting.setCacheMode(WebSettings.LOAD_DEFAULT);
        setting.setAppCachePath(webView.getContext().getCacheDir().getAbsolutePath());
        setting.setUseWideViewPort(true);
        setting.setLoadWithOverviewMode(true);
        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            setting.setAllowFileAccessFromFileURLs(true);
        }
    }

Este método toma un objeto WebView. Primero obtenemos la configuración de la webview a través del método getSettings de la clase WebView. Luego habilitamos javascript a través del método setJavaScriptEnabled(). La mayoría de estos métodos de configuración toman un valor booleano para habilitar o deshabilitar varias configuraciones.

2. Cómo crear una `WebView` personalizada

Queremos crear un webview personalizado que pueda ser utilizado en un NestedScrollView.

import android.content.Context;
import android.support.v4.view.MotionEventCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.webkit.WebView;

public class MyWebView extends WebView {

    public MyWebView(Context context) {
        super(context);
    }

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        //Check pointer index to avoid -1 (error)
        if (MotionEventCompat.findPointerIndex(event, 0) == -1) {
            return super.onTouchEvent(event);
        }

        if (event.getPointerCount() >= 1) {
            requestDisallowInterceptTouchEvent(true);
        } else {
            requestDisallowInterceptTouchEvent(false);
        }

        return super.onTouchEvent(event);
    }

    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        requestDisallowInterceptTouchEvent(true);
    }
}

1. Android `WebView` - Cargar desde URL, cadenas y carpeta de activos

Android WebView - Cargar desde URL, cadenas y carpeta de activos

WebView es en realidad una de esas clases que han existido en android desde el principio.

Añadido en el nivel 1 de la API, reside en el paquete android.webkit. Se utiliza para mostrar contenido web justo dentro de la actividad. Esto lo hace muy poderoso y puede ser usado para construir incluso un navegador básico que funcione. Sigue siendo una vista por lo que podemos simplemente arrastrarla desde la paleta a nuestro diseño. Renderiza las páginas web utilizando el motor de renderizado webkit. En este ejemplo usamos una webview para renderizar contenido web desde :

URL en línea.
Carpeta local Assets.
String dentro del código java.

Para cargar desde la url, debes tener el permiso de internet de android en el androidmanifest.xml. Puedes encontrar más detalles sobre WebView aquí.

Captura de pantalla

Aquí está la captura de pantalla del proyecto.

Preguntas comunes que este ejemplo explora

¿Qué es WebView?
Cómo cargar la página web desde la url en el webview.
Como cargar html desde el frolder assets en webview.
Cómo cargar html string en webview.
Cómo usar webview en android activity.

Herramientas utilizadas

Este ejemplo fue escrito con las siguientes herramientas:

Windows 8
IDE `AndroidStudio
Emulador Genymotion
Lenguaje : Java

No se ha utilizado ninguna biblioteca de terceros en este proyecto.

Vamos a saltar directamente al código fuente.

AndroidManifest.xml

Archivo Android Manifest.
Añadir el permiso de Internet ya que vamos a obtener una página web también desde la url.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    package="com.tutorials.hp.webviewer">

    <uses-permission android_name="android.permission.INTERNET"/>
    ...
</manifest>

`Build.Gradle`

Normalmente en los proyectos android, hay dos archivos build.gradle. Uno es el nivel de aplicación build.gradle, el otro es el nivel de proyecto build.gradle. El nivel de aplicación pertenece dentro de la carpeta de la aplicación y es donde normalmente añadimos nuestras dependencias y especificamos los sdks de compilación y destino.
También añadimos las dependencias para las librerías de soporte de AppCompat y Design.
Nuestra MainActivity derivará de AppCompatActivity mientras que también utilizaremos el botón de acción flotante de las bibliotecas de soporte de diseño.

dependencies {
    implementation 'com.android.support:appcompat-v7:26.+'
    implementation 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'
    implementation 'com.android.support:design:26.+'
    testImplementation 'junit:junit:4.12'
}

`MainActivity`.java

Lanzador activity.
ActivityMain.xml inflado como el contentview para esta actividad.
Inicializamos las vistas y los widgets dentro de esta actividad.
Cambiamos a través de los elementos del menú en nuestra barra de herramientas, seleccionando cargar desde url,assets o string.

package com.tutorials.hp.webviewer;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        webView= (WebView) findViewById(R.id.myWebview);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });
    }

    /*
    LOAD WEBSITE
     */

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.urlID) {
            //LOAD FROM URL
            webView.loadUrl("https://camposha.info");

            return true;
        }else if (id == R.id.assetsID) {

            //LOAD FROM ASSETS
            webView.loadUrl("file:///android_asset/Campo.html");

            return true;
        }else if (id == R.id.stringID) {

            //LOAD FROM STRING
            String html="<html><title></title><body>" +
                    "<h1><u>Programming Languages</u></h1>" +
                    "Below are some languages check them out: " +
                    "<ol>" +
                    "<li>Java</li><li>C#</li><li>C++</li><li>Python</li><li>PHP</li><li>Perl</li>" +
                    "</ol>" +
                    "</body></html>";
            webView.loadData(html,"text/html","UTF-8");

            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

`ActivityMain.xml`

Plantilla de diseño.
Contiene nuestro ContentMain.xml.
También define el appbarlayout, toolbar así como el floatingaction buttton.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    tools_context="com.tutorials.hp.webviewer.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        app_srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

`ContentMain.xml`

Disposición del contenido.
Define las vistas y widgets que se mostrarán dentro de la MainActivity.
En este caso es una simple webview.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.webviewer.MainActivity"
    tools_showIn="@layout/activity_main">

    <WebView
        android_id="@+id/myWebview"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_layout_centerHorizontal="true"
        />

</android.support.constraint.ConstraintLayout>

`menu_main.xml`

Vamos a cambiar a través de los elementos del menú en nuestra barra de herramientas.
Definamos esto en menu_main.xml dentro del directorio del menú.

<menu

    tools_context="com.tutorials.hp.webviewer.MainActivity">
    <item
        android_id="@+id/action_settings"
        android_orderInCategory="100"
        android_title="@string/action_settings"
        app_showAsAction="never" />
    <item
        android_id="@+id/urlID"
        android_title="URL"
        app_showAsAction="never" />

    <item
        android_id="@+id/assetsID"
        android_title="Assets"
        app_showAsAction="never" />

    <item
        android_id="@+id/stringID"
        android_title="String"
        app_showAsAction="never" />
</menu>

Descargar

Descargue el proyecto a continuación:

No.	Ubicación del proyecto.
1. GitHub [Descarga directa] (https://github.com/Oclemy/First-WebView/archive/master.zip)
2. GitHub: [Exploración] (https://github.com/Oclemy/First-WebView)

Conclusión.

Hemos visto un ejemplo simple de webview androide. Como cargar páginas web desde internet vía url, desde la carpeta assets y desde los datos string.

Cómo inyectar CSS en un `WebView`.

Puede que quieras manipular una página que no te pertenece usando CSS. Por ejemplo, digamos que una página web se carga y luego se aplica su propio estilo en CSS.

Esto es posible en android webview. Aquí están los pasos:

Paso 1: Importar Base64

Añadir la siguiente importación:

import android.util.Base64

Paso 2: Crear una función para inyectar css

Esta función inyectará css a través de Javascript:

private fun injectCSS() {
            try {
                val inputStream = assets.open("style.css")
                val buffer = ByteArray(inputStream.available())
                inputStream.read(buffer)
                inputStream.close()
                val encoded = Base64.encodeToString(buffer , Base64.NO_WRAP)
                webframe.loadUrl(
                    "javascript:(function() {" +
                            "var parent = document.getElementsByTagName('head').item(0);" +
                            "var style = document.createElement('style');" +
                            "style.type = 'text/css';" +
                            // Tell the browser to BASE64-decode the string into your script !!!
                            "style.innerHTML = window.atob('" + encoded + "');" +
                            "parent.appendChild(style)" +
                            "})()"
                )
            } catch (e: Exception) {
                e.printStackTrace()
            }

        }

Paso 3: Reemplazar `onPageFinished`

El siguiente paso es anular el evento onpage finished que se llama una vez que el webview ha terminado de cargar el contenido.

 override fun onPageFinished(view: WebView?, url: String?) {
                injectCSS()
}

Eso es todo.

Categorizado en:

Spanish Vista del contenido

Etiquetado en:

Spanish

Android WebView Tutorial y Ejemplos

¿Qué es un `WebView`?

Definición de la API `WebView`.

¿Por qué Webview?

Usando `WebView`

Ejemplos rápidos de `WebView` y HowTo's

1. Configuraciones comunes de la `WebView`.

2. Cómo crear una `WebView` personalizada

1. Android `WebView` - Cargar desde URL, cadenas y carpeta de activos

Captura de pantalla

Preguntas comunes que este ejemplo explora

Herramientas utilizadas

AndroidManifest.xml

`Build.Gradle`

`MainActivity`.java

`ActivityMain.xml`

`ContentMain.xml`

`menu_main.xml`

Descargar

Conclusión.

Cómo inyectar CSS en un `WebView`.

Paso 1: Importar Base64

Paso 2: Crear una función para inyectar css

Paso 3: Reemplazar `onPageFinished`

Oclemy

Otras Historias

Ejemplos de páginas sobre nosotros en Kotlin Android

Tutorial y ejemplos de Android BroadcastReceiver

Presiona ESC para cerrar

O revisa nuestras Categorías más Populares...

¿Qué es un WebView?

Definición de la API WebView.

¿Por qué Webview?

Usando WebView

Ejemplos rápidos de WebView y HowTo's

1. Configuraciones comunes de la WebView.

2. Cómo crear una WebView personalizada

1. Android WebView - Cargar desde URL, cadenas y carpeta de activos

Captura de pantalla

Preguntas comunes que este ejemplo explora

Herramientas utilizadas

AndroidManifest.xml

Build.Gradle

MainActivity.java

ActivityMain.xml

ContentMain.xml

menu_main.xml

Descargar

Conclusión.

Cómo inyectar CSS en un WebView.

Paso 1: Importar Base64

Paso 2: Crear una función para inyectar css

Paso 3: Reemplazar onPageFinished

Oclemy

Artículos Relacionados

Ejemplos de Account y AccountManager en Android

Kotlin Android Nested RecyclerView Ejemplo

Kotlin Android StateFlow Ejemplo

Kotlin Android Text To Speech y Speech To Text Ejemplo

Otras Historias

Ejemplos de páginas sobre nosotros en Kotlin Android

Tutorial y ejemplos de Android BroadcastReceiver

¿Qué es un `WebView`?

Definición de la API `WebView`.

Usando `WebView`

Ejemplos rápidos de `WebView` y HowTo's

1. Configuraciones comunes de la `WebView`.

2. Cómo crear una `WebView` personalizada

1. Android `WebView` - Cargar desde URL, cadenas y carpeta de activos

`Build.Gradle`

`MainActivity`.java

`ActivityMain.xml`

`ContentMain.xml`

`menu_main.xml`

Cómo inyectar CSS en un `WebView`.

Paso 3: Reemplazar `onPageFinished`