Cómo ejecutar código HTML5 en un WebView en Android

Existen muchas plataformas para portar app con código HTML, JS y CSS a Android, las más populares Apache Cordova, PhoneGap e Ionic. Sucede que a veces no queremos hacer completamente la aplicación en HTML, o solo queremos aprovechar algunos códigos HTML y el resto de la app hacerla con Java. Este simple tutorial lo hice basándome en uno del colega Carlos García ( http://www.carlos-garcia.es/tutorial/android-mixed-native-web ), solo hice unas modificaciones debido a los cambios en las recientes versiones de Android SDK.

Este tutorial consta de 3 post los cuales se dividen de la siguiente forma:

Cómo ejecutar código HTML5 en un WebView en Android

Cómo ejecutar una función JavaScript desde Android

Cómo ejecutar una función en Android desde JavaScript

El código fuente empleado en estos ejemplos está disponible en GitHub

Bueno empecemos.

Lo primero que necesitamos en un WebView y también usaré un EditText que usaremos en los siguientes pots. Los agregaremos como atributos de nuestra Clase.

private WebView browser;
private EditText txt1;

Luego en el método onCreate pondremos lo siguiente:

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);





    browser = (WebView) findViewById(R.id.webview); 

    txt1 = (EditText) findViewById(R.id.txt1);



    browser.getSettings().setJavaScriptEnabled(true);

    browser.addJavascriptInterface(this, "jsNativeInterface");

    browser.loadUrl("file:///android_asset/test.html"); 



    // ATTENTION: This was auto-generated to implement the App Indexing API.

    // See https://g.co/AppIndexing/AndroidStudio for more information.

    client = new GoogleApiClient.Builder(this).addApi(AppIndex.API).build();

}

para que esto funcione correctamente tendremos que agregar a los assets la página HTML que queremos cargar. En caso que no sepan cómo hacerlo lo puedes ver en este post http://memoriasdev.blogspot.com/2018/06/como-agregar-un-asset-en-androidstudio.html.

Ejecutemos nuestra aplicación y veremos que  el código se ejecuta correctamente.