Navegador Web en Android

Muy buenas, en este post voy a tratar de explicar mi experiencia en la programacion para dispositivos android, quiero decirles que este post es una forma de poner en practica algunos componentes interezantes de la api de google para desarrollo con el fin de aprender y tratar de facilitar el apredizaje de otros.

Utilizare Android Studio aqui una pequeña reseña:

en su version 0.37... y algo, y es importante que sepan q esta en su version beta y q aun es un poco inestable pero en lo personal me ha funcionado todo de maravilla y una de sus mayores ventajas con respecto a eclipse es q es un entorno de desarrollo unicamente para android.

En este post explicare como codificar una especie de navegador web que no se acerca a uno convencional pero que puede servir como partida para aquellos que se dispongan a irse adentrando en esto de la programacion android con la ayuda de un componente android llamado webview que nos permite mostrar contenido HTML ya sea para incrustarlo en nuestras app o para el uso q le daremos en este post, cabe destacar q este componente es la base de apliaciones como ephinari o google chroome entre otros, otra reseña importante es que utilizare una base de datos SQLite para guardar el historial de las paginas que vayamos visitando (Historial completo de dias anteriores) junto con su favicon (Imagen q describe la pagina) fecha y hora de visita a la webpage.

Ahora manos a la obra:

Paso 1: La interfaz
Para el caso de la interfaz les dejo una captura seguido del codigo en xml.


Como pueden ver es una interfaz senciilla con 6 botones "Ir, Historial, Atras, Adelante, Parar, Borrar" de los cuales mas adelante explico sus funciones, una caja de texto, el webview y un ImageView donde mostraremos el favicon de cada pagina y una progressbar para mostrar el progreso del proceso de carga de la pagina. Aca el xml:

[color=#000000][color=#000000]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:background="#ffffff">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:id="@+id/linearLayout"
        android:layout_alignParentTop="true"
        android:background="#ffffff"
        android:layout_alignParentRight="true">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="fill_parent"
            android:src="@drawable/faviconandroid"
            android:id="@+id/imageView"/>

        <EditText
            android:layout_width="184dp"
            android:layout_height="wrap_content"
            android:id="@+id/editText" android:layout_weight="2.57" android:inputType="text"
            android:layout_marginRight="-1dp"
            android:layout_marginTop="3dp"
            android:textColor="#010101"
            android:layout_marginLeft="-1dp" />

        <Button
            style=?android:attr/buttonStyleSmall
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:text="@string/ir"
            android:id="@+id/button"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="-2dp"
            android:layout_weight="0.31" />

        <ProgressBar
            style=?android:attr/progressBarStyleSmall
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/progressBar"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout"
        android:id="@+id/linearLayout2"
        android:background="#fffbf9">

        <Button
            style=?android:attr/buttonStyleSmall
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Parar"
            android:id="@+id/stop"
            android:gravity="bottom"
            android:layout_gravity="bottom" />

        <Button
            style=?android:attr/buttonStyleSmall
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Atras"
            android:id="@+id/atras"
            android:layout_gravity="center_horizontal|bottom"
            android:gravity="bottom" />

        <Button
            style=?android:attr/buttonStyleSmall
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Adelante"
            android:id="@+id/adelante"
            android:gravity="bottom"
            android:layout_gravity="bottom" />

        <Button
            style=?android:attr/buttonStyleSmall
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="Historial"
            android:id="@+id/history"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="Borrar"
            android:id="@+id/BorrarHistorial" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/linearLayout2"
        android:layout_alignParentBottom="true">

        <WebView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/webView"
            android:background="#ffffff" />
    </LinearLayout>

</RelativeLayout> 
[/color][/color]

Paso 2: La clase principal "Navegador_Activity"
Bueno el objetivo del post no es explicar en si como se programa en android si no tratar de dejar claras algunas de las funciones mas comunes que utiliza un webview y para q nos pueden servir.

Primero setearemos las variables necesarias para utilizar nuestro webview:

[color=#000000][color=#000000]
 protected WebView webview;
    protected WebView webview;
    protected Button ir;
    protected Button atras;
    protected Button adelante;
    protected Button stop;
    protected Button History;
    protected Button Borrar;
    protected ProgressBar progressBar;
    protected ImageView fav;
[/color][/color]

Luego asignamos estos "Contenedores" a los componentes de nuestro layout principal:

[color=#000000][color=#000000]
webview =  (WebView) findViewById(R.id.webView);
        fav = (ImageView) findViewById(R.id.imageView);
        url = (EditText) findViewById(R.id.editText);
        ir = (Button) findViewById(R.id.button);
        atras = (Button) findViewById(R.id.atras);
        adelante = (Button) findViewById(R.id.adelante);
        Borrar = (Button) findViewById(R.id.BorrarHistorial);
        stop = (Button)findViewById(R.id.stop);
        History= (Button) findViewById(R.id.history);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
[/color][/color]

Hacemos que nuestra Activity implemente el evento listener para asignarle el onclicklistener a nuestros botones:

[color=#000000][color=#000000]
public class Navegador_Activity extends Activity implements View.OnClickListener
[/color][/color]

Y luego asignamos el evento a nuestros botones de la siguiente forma (hacemos esto para todos los botones):
[color=#000000][color=#000000]
ir.setOnClickListener(this);
[/color][/color]

ok luego de eso seguimos con un poco de funcionalidad:

Habilitar soporte para JAVAScript en nuestro webview:
Para elllo hacemos uso de las opciones del webview (podran apreciar q son muchas)

[color=#000000][color=#000000]webview.getSettings().setJavaScriptEnabled(true);[/color][/color]

Habilitar soporte para hacer zoom sobre las paginas

[color=#000000][color=#000000] webview.getSettings().setBuiltInZoomControls(true); [/color][/color]
[color=#000000][color=#000000] webview.getSettings().setSupportZoom(true) [/color][/color]

Habilitar base de datos de favicons
Para los que este pensando en ¿Que es un favicon?
Es una imagen pequeña que identifica al sitio y se envia junto con la pagina web (Lo usaremos luego).

[color=#000000][color=#000000]WebIconDatabase.getInstance().open(getDir("icons", MODE_PRIVATE).getPath());[/color][/color]
Supuestamente este elemento a sido eliminado en la api 18 pero probando no se reciben los favicons.

Agregar pagina de inicio
[color=#000000][color=#000000]
webview.loadUrl("http://www.debian.org");
//PAGINA WEB POR DEFECTO
[/color][/color]

/Repara el bug para poder acceder a los texfields de las paginas web!!
Esto permite manejar el evento touch del textview para q nos permita utilizar las cajas de texto y formularios de las paginas que visitemos.

[color=#000000][color=#000000]
        webview.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                    case MotionEvent.ACTION_UP:
                        if (!v.hasFocus()) {
                            v.requestFocus();
                        }
                        break;
                }
                return false;
            }});
[/color][/color]

El boton "Ir"

Bueno hasta aqui todo bien, el siguiente paso es sobreescribir el metodo onClick que controla el evento de click sobre los botones de nuestra Actividad. Adentro agregamos una porcion de codigo que va a identificar que boton desencadeno dicho evento para ello agregamos lo siguiente (Fuera del metodo onCreate de nuestra activity)

[color=#000000][color=#000000]
@Override
    public void onClick(View view) {
if (view.getId()==ir.getId()){
            try{
                String page = url.getText().toString();
                webview.loadUrl(page);
            }catch (Exception e){
         //Aqui pueden colocar alguna porcion de codigo para manejar algun eventual error
            } }
[/color][/color]
Basicamente lo que estamos haciendo es poner una condicionante que determine si se trata del boton ir para luego tomar lo que este en el textbox y luego cargarlo en el webview con ayuda del metodo .loadUrl(string pagina);

Ahora vamos a sobreescribir otro par de metodos con ayuda de unas propiedades bien especificas de los webview
Estas propiedades nos permitiran complementar las funciones del boton "Ir"

WebChromeClient
Este es una propiedad que nos va a permitir sobreescribir los metodos onRecivedIcon y onRecivedTitle para manejar el titulo de la pagina y el favicon, esto de la siguiente manera:

[color=#000000][color=#000000]
webview.setWebChromeClient(new WebChromeClient(){

            @Override
            public void onReceivedIcon(WebView view, Bitmap icon){
                fav.setImageBitmap(icon);
//Aqui recibimos el favicon (en formato bitmap) y lo introducimos en nuestro ImageView
            }

            @Override
            public void onReceivedTitle (WebView view, String title){
                getWindow().setTitle("xtiyo on "+title);
//Aqui recibimos el titulo de la pagina en String y lo introducimos en el titulo de nuestra Activity
            }
[/color][/color]

WebViewClient

Esta propiedad sirve para sobreescribir metodos que tienen que ver con diferentes momentos de la vida de la pagina web para este caso usaremos solo onPageStarted, onPageFinished y onRecivedError.

[color=#000000][color=#000000]
webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted (WebView view, String url, Bitmap favicon){
                progressBar.setVisibility(View.VISIBLE);
//Este metodo se ejecuta cuando una pagina empieza a cargarse, en nuestro caso vamos a //hacer que nuestro progressBar se mantenga visible cuando la pagina empieze a cargar
}
@Override
            public void onPageFinished(WebView view, String url){

                progressBar.setVisibility(View.INVISIBLE);
//Este metodo se ejecuta al finalizar la ejecucion de carga de la pagina, por lo cual aqui //hacemos invisible nuestra progressbar.

}

 @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
            {
                AlertDialog.Builder builder = new AlertDialog.Builder(Navegador_Activity.this);
                builder.setMessage(description).setPositiveButton("Aceptar", null).setTitle("Error!   web page "+failingUrl);
                builder.show();
//ahora esta porcion de codigo se ejecutara cuando se reciba un error en el proceso de carga //de la pagina. Por lo cual solo mostraremos el error en una ventana emergente.
                error=1;

            }
}
[/color][/color]

El boton "Atras" y "Adelante"

Para explicar esta funcionalidad debo decirles que el webview guarda automaticamente un historial de todas las paginas visitadas, esta informacion es limitada y es util solo durante el tiempo de ejecucion de la aplicacion, lo que quiere decir que al terminar la ejecucion de la aplicacion esta info se pierde. para el caso de nuestro boton el codigo seria el siguiente dentro del evento onClick que ya declaramos agregamos otra condicionante asi:

[color=#000000][color=#000000]
if (view.getId()==atras.getId()){
            if(webview.canGoBack()){
                webview.goBack();
//Revisamos si existen paginas que visitar.
                         }
            getWindow().setTitle("No existen paginas que visitar");
        }
  if (view.getId()==adelante.getId()){
            if(webview.canGoForward()){
                webview.goForward();
            }
            getWindow().setTitle("No existen paginas que visitar");
        }
[/color][/color]

El boton "STOP"

Este lo utilizo para detener la carga de una pagina y basta con agregar lo siguiente en el evento del boton:

[color=#000000][color=#000000]
 if (view.getId()==stop.getId()){
            webview.stopLoading();
//Le decimos al webview que detenga el proceso de carga de la pagina
        }
[/color][/color]

Hasta ahora el navegador debe verse asi:




El boton "Historial"

Este lo explicare en otro post, pronto colocare un video tutorial y la 2da parte del tuto xq este ya quedo bastante extenso xD.
Cualquier duda estamos a la orden.