Como programar un Webview

23 agosto, 2011 por Gonzalo de Córdoba Dejar una respuesta »

Objetivo:

Vamos a aprender a crear nuestro primer Webview.

Hay varias formas de hacerlo, pero nos centraremos en la más simple, dando una pautas al final con configuraciones mas avanzadas.

Vemos un resultado final antes.

Ejemplo Webview por tutorialandroid

 

Código fuente java (/src/com.webview/Principal.java):

package com.webview;

//importaciones necesarias
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class Principal extends Activity {

	//Nuestra vista necesaria para la web
	private WebView mWebView;

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);

        //asociamos
        mWebView = (WebView) findViewById(R.id.webview);

        //cargo un .html que he situado en la carpeta asset/ del proyecto
        mWebView.loadUrl("file:///android_asset/ejemploWebview.html");
    }

}

 

Código fuente XML (/res/layout/main.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
        <TextView  
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:text="Aplicacion ejemplo de un Webview"
            android:padding="4dip"
            android:textSize="16sp"
            />
    
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent" 
        android:layout_height="0dip"
        android:layout_weight="1"
        />
        
</LinearLayout>

 

Código fuente HTML (/asset/ejemploWebview.html):

<html>

  <!-- Los estilos se proyectarán a nuestra aplicacion -->
  <body style="text-align:center">

  <strong> Ejemplo Webview, Por TutorialAndroid.com </strong> <br>
			   
    <p>Este es un ejemplo de p&aacute;gina web
	 con texto e im&aacute;genes y links.</p>        
   
	<!-- Enlace con una imagen de Androide-Feeds -->
    <a href="http://www.tutorialandroid.com/feed/">
    <img src="http://www.tutorialandroid.com/androidFeed_.png"  
	 height="128" width="128" border="0" alt="RSS" 
 	 title="http://www.tutorialandroid.com/feed/"></a>

	<p>Link a la web 
	<a href="http://www.tutorialandroid.com">tutorialandroid.com</a></p>        

   </body>

</html>

 

Descárgate el código aquí

 

Opciones más avanzadas:

  • Visionar una web situada en internet (y no en nuestro proyecto).
    Para ello debemos sustituir la ruta de carga de la Url por la deseada en el código Java:

        mWebView.loadUrl("http://www.tutorialandroid.com");
    

    Y no se puede olvidar proporcionar de conexión a internet a la aplicacion en el Manifest.xml (como hijo del tag <manifest>):

    <uses-permission android:name="android.permission.INTERNET" />
    
  • Permitir más compatibilidad con componentes, tal y como Javascript, simulación de cliente Chrome,  o aparición de un zoom en caso de ser necesario.
    En este caso debemos añadir el siguiente código al método onCreate:

       webSettings.setSavePassword(false);
       webSettings.setSaveFormData(false);
       webSettings.setJavaScriptEnabled(true);
       webSettings.setSupportZoom(false);
       mWebView.setWebChromeClient(new MyWebChromeClient());
       mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
    

    Y definimos una clase, dentro de la nuestra (Principal.java):
    final class DemoJavaScriptInterface {

        final class DemoJavaScriptInterface {
    
            DemoJavaScriptInterface() {
            }
    
            /**
             * No es llamada en la interfaz. Crea un runnable para invocar
             * loadUrl en la hebra de la interfaz.
             */
            public void clickOnAndroid() {
                mHandler.post(new Runnable() {
                    public void run() {
                        mWebView.loadUrl("javascript:wave()");
                    }
                });
    
            }
        }
    
        /**
         * "alerta" para javascript. Util para depurar javascript.
         */
        final class MyWebChromeClient extends WebChromeClient {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                result.confirm();
                return true;
            }
        }
    
Publicidad

17 comentarios

  1. steff dice:

    como podria hacer q mi aplicacion android realizara consultas a una base de datos propia de una aplicacion web

  2. Buenas Steff,
    depende de como quieras “complicar” el asunto. Si los datos que deseas consultar son públicos (por ejemplo, la puntuación de un juego en Android que deseas mostrar, que está almacenada en una base de datos en internet), siempre está la manera rápida de hacerlo:

    • creas una página en PHP accesible por internet, que realice la consulta y la muestre. Y dicha web la encapsulas en un WebView. Esta forma es poco profesional, pero en caso de no tener mucha experiencia y no ser datos relevantes, vale para “salir del paso”.
    • si por el contrario ya deseas realizar consultas serias, con datos relevantes, y manejas PHP y Java, puedes crear un sistema Cliente-servidor, donde el cliente es la aplicación Android y el servidor la aplicación web en PHP. A través de ellos simplemente irían XML que comunican el tipo de consulta a realizar y el resultado.

    Este último tipo de arquitectura es usada en aplicaciones como Fast Clicker Game o Cartelera de Cine (disponibles aquí) para guardar y extraer datos de internet, además de en el propio móvil.

  3. Jose dice:

    Muy buen tutorial básico, muchas gracias !

  4. alex dice:

    como puedo hacer que me aparezcan letras tildadas en el webview ?? (el archivo esta guardado en formato UTF-8) Saludos

  5. jessica dice:

    en ves de ser html puedo poner javascript????

  6. ghost dice:

    Gracias lo estudiaré, Gracias!!!

  7. Fapes dice:

    Hola.. que buen tutorial…

    Te comento: He instalado motion en ubuntu para hacer uso de la webcam como monitoreo, lo que hace este programa es subir un video a http://192.168.xx.xx:8082. He intentado acceder desde mi android con un webView para poder monitorear lo que graba la webcam de mi pc asi:
    webView.loadUrl(“http://192.168.xx.xx:8082″);
    Pero sencillamente no me muestra nada. Si accedo desde un PC a esa direccion si logro ver el video que esta grabando mi webcam. Agradeceria tu ayuda.

    Saludos

    • Diego Franco dice:

      revisa que en el Manifest.xml estes dando los permisos a internet, de otra manera no te aparecera, nada, tambien podrias checar la manera en que tramsmite tu webcam, ya que tienes que configurar de una u otra manera

  8. Spock dice:

    no me sale, tendrias un ejemolo del proyecto con eclipse a mano?

  9. Pifles dice:

    Ante todo, gracias por los tutoriales,

    es posible incorporar imagenes de nuestro proyecto?

    Gracias

  10. abel dice:

    Hola Gonzalo primero felicitarte por tus tutoriales y pedirte si podriamos ponernos en contacto para me ayudaras y guiaras un poco en alguno aspectos si no te supone molestia
    Un cordial saludo Abel

  11. David dice:

    en mi web tengo un video mp4 con html y no se reproduce.

  12. Alex dice:

    Disculpen no saben como permitir que mi aplicacion pueda abrir unicamente un sitio web? Digamos que quiero que abra twitter y no pueda ingresar a ningún otra página

  13. Gaston dice:

    Hola Gonzalo. Tengo una web responsive y quiero convertirla en app. El webview me reconoce automaticamente el diseño responsive al mostrar la web? gracias!

  14. roser dice:

    como abro el proyecto? no entiendo donde pongo despues?

  15. Fernando dice:

    Hola, me a gustado mucho el tutorial, y me a servido de mucho.
    Pero tengo una duda. ¿Cómo podría hacer para que al apretar un botón en la pantalla principal cargue la webView?

    Muchas gracias.

  16. sergio dice:

    Como se abre el proyecto? puedo abrirlo en el netbeans? me podrian ayudar porfa

Responder a Gonzalo de Córdoba

Rellena el captcha please!! *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies