Creare app Android nativa di un sito web – parte 3

In questa terza ed ultima parte del tutorial vediamo come mettere mano al codice del progetto della WebView ed adattarlo.

File AndroidManifest.xml

Nella parte precedente del tutorial avevamo cambiato il nome del package alla riga 3.
In questo file vengono definiti i permessi necessari all’app (riga 5 e 6). INTERNET per far funzionare il componente WebView e ACCESS_NETWORK_STATE per controllare lo stato della connessione Internet, vedremo il codice Java successivamente.
Dentro il tag application viene definita l’icona dell’app, tema, etichetta dell’app (vedi App Bar) e la dichiarazione dell’activity MainActivity, tralasciamo il servizio Firebase (che si occupa dell’invio notifiche push) non oggetto di questo tutorial.

Sotto res\drawable sono presenti le varie risorse grafiche, possiamo personalizzare l’icona di lancio ic_launcher.png utilizzando il servizio online Android Asset Studio, verranno create le icone per tutte le dimensioni ed infine scaricare lo .zip da decomprimere dentro il nostro progetto C:\ProgettoAndroid\WebView\app\src\main\res.
E’ presente anche il file progress_drawable.xml che permette di personalizzare la barra di progressione del caricamento della pagina web.

Sotto layout c’è il file activity_main.xml dove troviamo tutte le proprietà della webview (dimensione del layout, ecc…)

Sotto menu c’è il file menu_turn_on_server.xml dove ci sono le proprietà del menù dell’App Bar.

Sotto values troviamo i seguenti files:

– color.xml: è possibile personalizzare i colori dell’App Bar, sfondo, testo.
– dimens.xml: sono definiti i margini (padding) dell’activity della WebView.
– strings.xml: è possibile personalizzare il testo relativo al nome dell’app e del menù delle Impostazioni.
– styles.xml: viene definito lo stile, il tema dell’app.

Apriamo ora il file relativo alla classe Java MainActivity, è molto lungo.

Probabilmente Android Studio segnalerà un warning alla riga 25 dicendo di utilizzare AppCompatActivity, questo perché ActionBarActivity risulta deprecato.
E’ sufficiente sostituire ActionBarActivity con AppCompatActivity, AndroidStudio darà errore: cannot resolve symbol appcompatactivity.
Questo perché occorre aggiungere una nuova riga sulle import (espandere la riga 3 in Android Studio):

import android.support.v7.app.AppCompatActivity;

Alla riga 55 scriviamo l’indirizzo web che vogliamo venga caricato.

Alle righe 125-126 è possibile personalizzare il testo dell’alert con i bottoni per uscire dall’applicazione quando viene premuto il tasto indietro (se l’app non può tornare più indietro nelle pagine navigate).

Alle righe 134-135 è possibile personalizzare il testo dell’alert relativo alla connessione Internet.

Infatti se non ci fosse il codice che controlla lo stato della connessione Internet (righe 67-74) anziché visualizzare il messaggio di alert vi ritroverete con la pagina di errore come quando cercate di aprire un indirizzo internet tramite browser e non si è connessi

Proviamo ora la nostra applicazione.
Compiliamo per verificare che non ci siano errori (Build -> Rebuild project).
Quindi dalla toolbar di Android Studio premiamo il simbolo di Run oppure dal menù Run o premendo Maiusc+F10.
Nella finestra successiva Select Deployment Target è possibile configurare un nuovo dispositivo virtuale (ne avevamo accennato nella prima parte del tutorial) oppure far girare l’app in un dispositivo connesso.
Ecco come si presenta l’app con la homepage di DigiTalking caricata:

Terminate tutte le modifiche che vogliamo (icone, testi delle finestre di dialogo degli alert, App Bar, colori) possiamo generare l’APK (Build -> Build APK).
Troverete l’APK pronto per essere installato in C:\ProgettoAndroid\WebView\app\build\outputs\apk con il nome app-debug.apk (perché l’applicazione è stata compilata in modalità Debug).
Per compilare in modalità Release deve essere configurata la build variant nel file build.gradle relativo a Module:app, quindi dal menù Build -> Select Build Variant, infine generare l’APK.

Rispondi

Ricevi gli aggiornamenti del blog

Vuoi rimanere aggiornato riguardo gli ultimi articoli pubblicati nel blog? Inserisci la tua email per sottoscriverti alla newsletter!