App hibrida con Android - parte 1

Una app híbrida (o web app, según criterios)  es una aplicación desarrollada utilizando tecnologías web como HTML, CSS y Javascript; y que a su vez funciona bajo el entorno nativo del sistema operativo en el que se ejecuta.

El ejemplo mas básico de una app híbrida en android seria un webview que carga una url, como muestran en Android Developers. De ahi mismo sale este ejemplo, el cual he decidido mostrar por si sirve a alguien.
Para empezar,
Comenzamos creando un nuevo proyecto con Android Studio, ponemos el nombre que queramos a la aplicación, seleccionamos la API mínima (en mi caso he utilizado la API 16: Android 4.1) y en el ultimo paso escogemos "Empty Activity". Después modificamos los siguientes archivos:

• En activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.jm.ejemploweb.MainActivity">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

• En MainActivity.java: 

import android.content.Intent;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    WebView myWebView;

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

        myWebView = (WebView) findViewById(R.id.webView);
        myWebView.setWebViewClient(new MyWebViewClient());

        // Javascript viene deshabilitado por defecto en webview, hay que habilitarlo.
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        myWebView.loadUrl("http://creandobits.blogspot.com");
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // Al pulsar atras vamos a la pagina anterior
        // Si no puede, por lo que sera la pagina principal, sale de la aplicacion
        if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
            myWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // Si la url corresponde a nuestro sitio web, es decir comienza con nuestro dominio, 
            // esta se carga dentro del webview. Si no, se carga fuera de la app en el navegador web del sistema.
            if (url.startsWith("http://creandobits.blogspot.com")) {
                return false;
            } else {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(intent);
                return true;
            }

        }

    }
}

• Como la aplicación necesita conexion a internet, ha de añadirse el permiso en el AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Y ya esta. Cambiando el texto "http://creandobits.blogspot.com" del codigo podemos tener la app de cualquier pagina web que quisieramos.

Referencias:
https://developer.android.com/guide/webapps/webview.html
http://es.androids.help/q16330