androidGeek.it
Un blog italiano sul mondo Android



Tutorials

24 marzo 2013

Webview su android, guida dettagliata su come creare web app

More articles by »
Written by: Luka
Tag:, , ,
webview_android

Da diverso tempo avevo promesso ad alcuni amici che avrei pubblicato una guida sulle webview per android quindi, scusandomi per il ritardo, eccomi quì. Prima di tutto fatemi fare a paio di premesse.

Webview android, cos’è e a cosa serve?

Semplicemente una webview è uno strumento che consente di caricare direttamente una pagina web in un’applicazione per dispositivi mobile. La pagina web può essere alloggiata su un server remoto oppure embedded nel package dell’applicazione.

Il vantaggio evidente sta nel fatto che lo sviluppatore può fare affidamento su concetti classici e ben conosciuti, come appunto HTML, Javascript e CSS, per disegnare l’interfaccia e la logica dell’applicazione, senza addentrarsi troppo nella programmazione android. Lo svantaggio è che, almeno in teoria, l’applicazione non può sfruttare al 100% tutte le potenzialità dell’SDK di android, come per esempio i sensori, GPS, database o fotocamaera, ma sarà limitato alle sole funzionalità che HTML può offrire.

Al giorno d’oggi, grazie a jQuery Mobile, è possibile disegnare in pochi semplici passi un’interfaccia mobile molto potente e facile da usare, grazie soltanto ai classici strumenti che tutti conosciamo molto bene, HTML e Javascript appunto.

Ma come trasformare una semplice pagina HTML in un’applicazione android? Esistono due modi, attraverso PhoneGap, un framework che permette sviluppare apps multipiattaforma senza usare le varie sdk, oppure usando l’SDK di android e le Webview.

Questa guida si basa sul secondo metodo e, se non avete intenzione di rilasciare la vostra app per altri sistemi operativi, vi consiglio di seguire sempre la strada maestra dell’SDK android. Primo perchè così imparate qualcosa a proposito di Java e di XML, secondo perchè l’SDK offre una miriade di funzionalità che, se avrete la pazienza di prendere in mano un libro (o un tutorial), vi saranno di  grande aiuto.

A chi è rivolta la guida?

Per seguire la guida non bisogna essere per forza un programmatore esperto. Vedremo comunque alcuni frammenti di codice java ed xml, quindi don’t panic, cercherò di spiegare tutto in maniera che possa essere capito da tutti.

Chiusa la premessa, iniziamo la guida sulle webview.

  • 1) La prima cosa da fare è seguire questo tutorial e instalare Eclipse + SDK android. È molto semplice e richiederà soltanto pochi minuti.
  • 2) Aprite l’ambiente di sviluppo Eclipse e create un nuovo progetto (File->New->Android application project). Vi verrà chiesto di inserire nome dell’applicazione, del progetto e del package. Vi verrà anche chiesto di specificare la versione minima di android ed il target, cioè il range di versioni per la quale la vostra app sarà disponibile. Nel progetto ho specificato come minima la 2.2 Froyo perchè  di solito uso (non qui) alcune funzionalità che per la 2.1 non sono disponibili. Questo significa che tutti i dispositivi con versioni di android da 2.1 in giù sono tagliati fuori, ma non mi preoccuperei più di tanto perchè il grosso degli utenti si divide tra Gingerbread 2.3 e superiori.
new android application project

new android application project

  • 3) La finestra successiva vi chiederà di inserire il nome dell’activity principale (forse volete rinfrescarvi la memoria con quest’articolo sulle activity android) e del layout, cioè il file xml che definisce il layout.
activity and layout name

scegliete il nome dell’activity e layout

  • 4) A questo punto, creato il progetto, andiamo a scrivere qualche linea di codice. Aprite il file res/layout/activity_activity_web_view.xml (si ok, mi sono accorto solo ora di aver duplicato il nome). Dovreste averlo già aperto in modalità disegno, passate alla modalità source come si vede nell’immagine qui sotto.
layout xml

 

  • 5) Adesso sostituite il contenuto del file con il seguente


    


  • Stiamo semplicemente dicendo che la nostra app applicherà un layout lineare, cioè tutti gli elementi verranno visualizzati in ordine di dichiarazione, e il solo elemento che verrà mostrato sarà appunto una webview.
  • 6) Adesso aprite il file src/ActivityWebView.java e sostituitene il contenuto con il seguente.

 

package web.view.androidgeek.it;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class ActivityWebView extends Activity {
	
	private WebView mWebView;
	 /**
	  * Dichiariamo l'attributo di classe url in cui 
	  * salviamo l'indirizzo web che aprirà la webview
	  */
	private String url = "http://www.androidgeek.it";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_activity_web_view);
        //carichiamo la webview dentro il layout specificato
        mWebView = (WebView) findViewById(R.id.webview);
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.getSettings().setLoadsImagesAutomatically(true);		
		//carichiamo finalmete la url
		mWebView.setWebViewClient(new WebViewClient());
		mWebView.loadUrl(url);
    }

    
}

  • In poche parole, abbiamo recuperato l’elemento del layout in cui vogliamo caricare la webview, dichiarato una nuova istanza della classe webview e caricato la url. Poche semplici linee di codice bastano per caricare la vostra app. Non bisogna però dimenticare che ogni app android richiede di specificare quali funzionalità verranno usate in un apposito file xml chiamato AndroidManifest.xml. In questo caso dobbiamo usare la connessione internet, quindi aggiungiamo la seguente linea al file appena dopo la dichiarazione di min version e target dell’app:

    

  • 7) Non ci resta che lanciare l’applicazione (Ctrl+F11) e provarla nell’emulatore di android (se non l’avete ancora fatto vi chiederà di configurare un emulatore).
webview in emulatore android

Tutto qui, la vostra app è pronta per funzionare, ma tenete conto che si possono aggiungere numerose ottimizzazioni che, per brevità, non tratteremo in quest’articolo. Se siete interessati a conoscere più approfonditamente qualsiasi altro tema, fatemi sapere. Vi lascio con il codice intero della nostra webview scaricabile da qui.

Be Sociable, Share!



    About the Author

    Luka
    Luca Di Vincenzo, informatico, da molti anni blogger appassionato di ultime tecnologie. Attualmente risiede in Spagna, dove lavora come Senior Software Engineer da 5 anni. Sul blog si occupa della parte tecnica e dell'ottimizzazione SEO del sito.




     
    Potrebbero interessarti
     

     
    checkInconn

    Come controllare la connessione ad internet in android

    Se state sviluppando una nuova app per android al 99% avrete bisogno di controllare se la connessione ad internet è attiva o no. È uno dei classici problemi in cui incapperà priama o poi uno sviluppatore alle prime armi. In ...
    by Luka
    0

     
     
    android ui

    Come creare l’interfaccia utente di un’applicazione android: View e ViewGroup

    Nelle precedenti guide ci siamo occupati principalmente  di configurare l’ambiente di sviluppo, di capire cos’è un’activity e come funziona il ciclo di vita di un’applicazione android. Questo tutorial ...
    by Luka
    2

     
     
    android-activity-lifetime

    Capire le Activity ed il ciclo di vita di un’applicazione Android

    Nelle precedenti guide abbiamo visto come creare la vostra prima applicazione android e cosa contiene la struttura delle cartelle creata di default da eclipse. In questa guida ci concentreremo sulle Activity e sul ciclo di vita...
    by Luka
    5

     




    • Gioak

      Interessante articolo, devo provare!

    • Marius

      Non ce la faccio più…. quell’oggetto webview NON RIESCE PROPRIO A DIGERIRLO…. è la decima volta che riprovo!!!

    • Marius

      Non ce la faccio più…. quell’oggetto webview NON RIESCE PROPRIO A DIGERIRLO…. è la decima volta che riprovo!!!

    • Francesco Manca

      Quando dici che ogni app android richiede di specificare quali funzionalità verranno usate in un apposito file xml chiamato AndroidManifest.xml. esattamente il codice dove va inserito? nella pagina di codice del file AndroidManifest?. A me non viene nulla nell’emulatore, solo la scritta Android. Non capisco dove posso aver sbagliato….

      • Nello Ascione

        Si, subito prima di .

    • Andrea

      Salve, vorrei chiederti.
      quando premo un link dopo aver lanciato la app con il sito mi riporta sempre al broswer.
      c’è un modo che quando premo qualche link rimane nella mia app?

      • Nello Ascione

        Ciao, basta aggiungere questa stringa:

        mWebView.setWebViewClient(new WebViewClient());

    • DomenicoButtafarro

      Grazie per la guida, ma come si modifica il nome dell’app?

      • Pasquale Ambrosio

        vai sotto res/values/string.xml e modifica l’opzione “app_name”

    • Angelo108

      Ciao, purtroppo io ho un problema ovvero ho creato un app con molte layout e molte class per ogni layout. Il problema è che ho seguito tutti i procedimenti creando una layout che aprisse una pagina facebook richiamata nel link, ma quando teso l’applicazione su un dispositivo mi da errore chiusura applicazione e non mi fa visualizzare la pagina all’apertura della activity facebook si chiude. Come si puo risolvere??

    • gigiu

      ciao, ho fatto tutto come spiegavi ma continua a darmi questo errore nel file .java : webview cannot be resolved or is not a field
      come posso risolvere, ho fatto già pulizia del progetto ma niente…..

      • Giordano Jo Boschetti

        idem con patate

        • Giordano Jo Boschetti

          Change setContentView(R.layout.webview) to setContentView(R.layout.actvity_main), or rename you xml file to webview.xml

    • Giordano Jo Boschetti

      parlando proprio da neofita, ho seri problemi di visualizzazione del web però. wordpress con mobile, si carica.. ma esempio accedendo al menu, diventa tutto bianco, non è come navigare da browser (pensavo di creare una app web “cloud” sfruttando wordpress mobile, per ora!) serve qualche parametro particolare? da altri errori anche sul caricamento di player html5 audio etc

      • Giordano Jo Boschetti

        errata corrige, il problema è solo ed esclusivamente con il menu del sito mobile

        • Giordano Jo Boschetti

          mi rispondo da solo lol cambiato android:layout_height=”0dp” invece che wrap_content (come suggerito da eclipse per la performance) si risolve il problema :) ottima guida base!

    • Enzo Mattia Ruocco

      Grazie mille per la guida, fatta veramente bene e intuitiva!
      Complimenti ;-)

    • Davide Locatelli

      mi da l’errore:
      Error:(24, 44) error: package R does not exist