Html5 en proyecto de Android

Muchas veces hemos intentado pasar nuestros desarrollos en html5 a plataforma como Android y nos encontramos con muchos tutoriales que nos enseñan a hacerlo a partir de librerías como PhoneGap que son un poco complejas para algunos desarrollos sencillos, por eso he aquí una manera de hacerlo fácil y sencillo con WebView una clase que hace de nuestra aplicación un navegador web capas de interpretar html o html5.

Lo primero que debemos hacer es crear un nuevo proyecto en Android Studio, al proyecto de damos un nombre para este caso yo lo llame (HtmlEnAndroid).

Una vez escogemos el SDK mínimo, vamos a escoger el Activity (Blank Activity ) si no conoces los tipos de activity de recomiendo visitar esta pagina.

Listo cuando ya tengamos creado nuestro nuevo proyecto listo para trabajar, lo que vamos hacer es unas modificaciones en nuestro activity_main.xml



    

    

    

Lo que agregamos en el xml fue un WebView con el id MyWebView, y un botón tipo Button con id btnAndroid.

En el WebView es donde vamos a reflejar nuestro html y el botón es para comunicar una función de Android con una función de javascript en el html

El paso siguiente sera modificar el MainActivity.java



package android.ejemplo.com.htmlenandroid;

import android.app.AlertDialog;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {
    WebView myBrowser;
    Button btnSendMsg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myBrowser = (WebView)findViewById(R.id.MyWebView);

        final MyJavaScriptInterface myJavaScriptInterface
                = new MyJavaScriptInterface(this);
        myBrowser.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");

        myBrowser.getSettings().setJavaScriptEnabled(true);
        myBrowser.loadUrl("file:///android_asset/www/index.html");

        btnSendMsg = (Button)findViewById(R.id.btnAndroid);


        btnSendMsg.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                myBrowser.loadUrl("javascript:callFromActivity(\"EJEMPLO\")");

            }
        });
    }


    public class MyJavaScriptInterface {
        Context mContext;

        MyJavaScriptInterface(Context c) {
            mContext = c;
        }

        public void showToast(String toast){
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }

        public void openAndroidDialog(){
            AlertDialog.Builder myDialog
                    = new AlertDialog.Builder(MainActivity.this);
            myDialog.setTitle("ALERTA!");
            myDialog.setMessage("mensaje alerta");
            myDialog.setPositiveButton("ON", null);
            myDialog.show();
        }


    }

    @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.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

En al MainActivity.java lo que hicimos fue identificar el WebView en la variable myBrowser, una vez interpretada la variable le podemos agregar los parámetros myBrowser.getSettings().setJavaScriptEnabled(true) para que nos deje comunicar con javascript y myBrowser.loadUrl("file:///android_asset/www/index.html") que básicamente le decimos a nuestro navegador donde esta el html a interpretar.

Por otro lado le damos funcionalidad a nuestro botón con el setOnClickListener diciéndole que cuando se pulse ejecute la función de javascript javascript:callFromActivity("EJEMPLO").

Hay otra porción de código que es una clase adicional que es la que relaciona el javasctipt hacia Android esta clase es MyJavaScriptInterface y dentro de ella encontramos dos funciones que llamamos desde el html para ejecutar funciones nativas de Android como Toast

Ya solo falta ubicar nuestro html en el proyecto y con esto me refiero a los archivos, para ello vamos a ir a la carpeta donde esta localizado el proyecto y en (AndroidStudioProjects\HtmlEnAndroid\app\src\main) la carpeta main del proyecto agregamos assets y dentro de ella www y en www colocamos nuestro html, images, css, etc.

Para este caso utilice un simple html







My HTML


MyHTML

Hola!

En el html encontramos dos botones que nos ejecutan las funciones de Android (showToast, openAndroidDialog), con la ayuda de javascript anteponiendo AndroidFunction seguido de la función a ejecutar. AndroidFunction esta definido en el MainActivity como myBrowser.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");.

Listo solo nos queda probarlo y para ello les dejo un vídeo para que despejen dudas, cualquier duda no duden en comentar.

Comentarios

Entradas populares de este blog

Como conectar MySQL con Android Nativo

Lista con imágenes Android nativo (ListView)

SUMAR RESTAR HORAS DÍAS EN ANDROID