Creare un'app per biglietti di auguri di compleanno

In questo codelab, creerai una semplice app Android che mostra testo. Potrai posizionare il testo sullo schermo grazie a una maggiore comprensione dei componenti Interfaccia utente (UI) di Android.

Prerequisiti

• Come creare una nuova app in Android Studio.
• Come eseguire un'app nell'emulatore o sul tuo dispositivo Android.

Cosa imparerai a fare

• Cosa sono gli elementi dell'interfaccia utente, come Views e ViewGroups.
• Come visualizzare testo in una TextView in un'app.
• Come impostare gli attributi, come testo, carattere e margine, su un TextView.

Cosa devi creare

• App Android che mostra un annuncio di compleanno in formato di testo.

Ecco come apparirà la tua app quando avrai finito.

Cosa serve

• Un computer su cui è installato Android Studio.

Creare un progetto Attività vuota

1. Per iniziare, crea un nuovo progetto Kotlin in Android Studio utilizzando il modello Attività vuota.
2. Chiama l'app "Buon compleanno", con un livello API minimo di 19 (KitKat).

Importante: se non hai familiarità con la creazione di un nuovo progetto in Android Studio, consulta l'articolo Creare ed eseguire la tua prima app Android per i dettagli.

3. Esegui la tua app. L'app dovrebbe essere simile allo screenshot di seguito.

Quando hai creato questa app Buon compleanno con il modello Attività vuota, Android Studio ha configurato le risorse per un'app per Android di base, incluso un messaggio "Hello World!", al centro dello schermo. In questo codelab, imparerai come quel messaggio arriva, come modificare il testo in modo che diventi un saluto di compleanno e come aggiungere e formattare messaggi aggiuntivi.

Informazioni sulle interfacce utente

L'interfaccia utente (UI) di un'app è ciò che vedi sullo schermo: testo, immagini, pulsanti e molti altri tipi di elementi. Scopri come l'app mostra cose all'utente e in che modo interagisce con quest'ultima.

Ciascuno di questi elementi è chiamato View. Quasi tutti i contenuti visualizzati sullo schermo dell'app sono View. Views può essere interattivo, ad esempio un pulsante cliccabile o un campo di immissione modificabile.

In questo codelab lavorerai con un tipo di View per la visualizzazione di testo, chiamato TextView.

Il Views in un'app Android non è mobile. Views hanno rapporti gli uni con gli altri. Ad esempio, un'immagine potrebbe essere accanto a un testo e i pulsanti potrebbero formare una riga. Per organizzare Views, inseriscili in un contenitore. ViewGroup è un container in cui possono essere inseriti gli oggetti View ed è responsabile dell'organizzazione degli elementi Views al suo interno. La disposizione, o layout, può cambiare a seconda delle dimensioni e delle proporzioni dello schermo del dispositivo Android su cui viene eseguita l'app e il layout può adattarsi al dispositivo in modalità verticale o orizzontale.

Un tipo di ViewGroup è un ConstraintLayout, che ti aiuta a disporre l'elemento Views al suo interno in modo flessibile.

Informazioni sull'editor di layout

La creazione dell'interfaccia utente disponendo Views e ViewGroups è una parte importante della creazione di un'app Android. Android Studio fornisce uno strumento che ti consente di farlo, chiamato Editor layout. Utilizzerai l'Editor Layout per modificare il testo "Hello World!" a "Buon compleanno" e in seguito per applicare uno stile al testo.

L'editor di layout si apre in molte parti. Imparerai a usare la maggior parte di questi dati in questo codelab. Utilizza lo screenshot annotato riportato di seguito per riconoscere le finestre nell'editor di layout. Scoprirai di più su ogni fase del processo di modifica della tua app.

• A sinistra (1) è visualizzata la finestra Progetto, che hai già visto in precedenza. Elenca tutti i file che costituiscono il tuo progetto.
• Al centro puoi vedere due disegni (4) e (5) che rappresentano il layout dello schermo per la tua app. La rappresentazione a sinistra (4) è un'approssimazione simile all'aspetto dello schermo quando l'app è in esecuzione. È la visualizzazione Design.
• La rappresentazione a destra (5) è la vista Blueprint, che può essere utile per operazioni specifiche.
• La Tavolozza (2) contiene elenchi di diversi tipi di Views che puoi aggiungere alla tua app.
• La albero dei componenti (3) è una rappresentazione diversa delle visualizzazioni dello schermo. Elenca tutte le visualizzazioni dello schermo.
• All'estrema destra (6) si trovano gli attributi. Mostra gli attributi di un elemento View e ti consente di modificarli.

Scopri di più sull'editor di layout e su come configurarlo nella guida di riferimento per gli sviluppatori.

Screenshot annotato dell'intero editor di layout:

Apportamo alcune modifiche nell'editor di layout per personalizzare ulteriormente la tua app.

Cambiare il messaggio Hello World

1. In Android Studio individua la finestra Progetto a sinistra.
2. Prendi nota di questi file e cartelle: la cartella dell'app contiene la maggior parte dei file per l'app che modificherai. La cartella res è riservata alle risorse, come immagini o layout di schermata. La cartella layout serve per i layout dello schermo. Il file activity_main.xml contiene una descrizione del layout dello schermo.
3. Espandi la cartella app, quindi la cartella res e infine la cartella layout.
4. Fai doppio clic su activity_main.xml.
   Viene aperto activity_main.xml nell'editor di layout e viene mostrato il layout descritto nella visualizzazione Design.
   

Nota: in questi codelab ti verrà chiesto spesso di aprire un file, come descritto nei passaggi precedenti. In breve, potrebbe essere abbreviato come:
1. Apri activity_main.xml (res > layout > activity_main.xml)
invece di elencare ogni passaggio separatamente.

5. Consulta l'elenco delle viste nell'albero dei componenti. Noterai una ConstraintLayout e una TextView al di sotto.
   Queste rappresentano l'interfaccia utente della tua app. Il rientro di TextView è all'interno di ConstraintLayout. Man mano che aggiungi altri Views alla ConstraintLayout, verranno aggiunti a questo elenco.
6. Noterai che la parte TextView è accanto a "Hello World!", che è il testo che viene visualizzato quando esegui l'app.
   
7. Nell'albero dei componenti, fai clic sull'TextView.
8. Individua Attributi a destra.
9. Trova la sezione Attributi dichiarati.
10. Tieni presente che l'attributo text nella sezione Attributi dichiarati contiene Hello World!.
    

L'attributo text mostra il testo stampato in un elemento TextView.

11. Fai clic sull'attributo testo in cui si trova il testo Hello World!.
12. Modificala in Buon compleanno, quindi premi il tasto Invio. Se vedi un avviso relativo a una stringa impostata come hardcoded, per il momento non ti preoccupare. Imparerai come eliminare tale avviso nel prossimo codelab.
13. Nota che il testo è cambiato nella Vista struttura...(aspetto fantastico, puoi vedere subito le modifiche!)
14. Esegui l'app e ora dice Buon compleanno!
    

Ottimo! Hai apportato le prime modifiche a un'app Android.

La carta di compleanno che stai creando è diversa da quella presente nella tua app. Invece del testo piccolo al centro, ti servono due messaggi più grandi, uno in alto a sinistra e uno nell'angolo in basso a destra. In questa attività eliminerai TextView l'attuale TextViews e aggiungerai due posizioni all'interno di ConstraintLayout.

Elimina l'attuale TextView

1. Nell'Editor di layout, fai clic per selezionare il TextView al centro del layout.
   
2. Premi il tasto Canc.
   Android Studio elimina TextView e la tua app ora mostra solo un elemento ConstraintLayout nell'Editor di layout e nella Struttura dei componenti.
   

Suggerimento: se vuoi aumentare lo zoom sul layout, puoi utilizzare i controlli in basso a destra dell'Editor layout per regolare le dimensioni. Fai clic sull'icona più in basso per tornare a un livello di zoom in cui viene adattato l'intero layout.

Aggiungere una visualizzazione di testo

In questo passaggio dovrai aggiungere TextView nella parte superiore sinistra dell'app per augurare il compleanno.

La tavolozza in alto a sinistra dell'editor di layout contiene elenchi di diversi tipi di Views, organizzati per categoria, che puoi aggiungere alla tua app.

1. Trova TextView. che viene visualizzato nella categoria Common e nella categoria Text.
   
2. Trascina un elemento TextView dalla Tavolozza nella parte superiore sinistra della superficie di progettazione nell'Editor layout e rilascialo.
   Non è necessario che sia esatto, ma rilascialo nell'angolo in alto a sinistra.
   
3. Noterai l'aggiunta di TextView e il punto esclamativo rosso nell'albero dei componenti.
4. Passa il mouse sopra il punto esclamativo e vedrai un messaggio di avviso che indica che la vista non è vincolata e passa a una posizione diversa quando esegui l'app. Lo risolverai nel passaggio successivo.
   

Posizionare la visualizzazione di testo

Per la scheda di compleanno, la TextView deve trovarsi vicino all'angolo in alto a sinistra, con spazio sufficiente. Per correggere l'avviso, aggiungi alcuni vincoli al TextView, che indicano alla tua app come posizionarlo. I vincoli sono indicazioni e limitazioni relative alla posizione di un View in un layout.

I vincoli aggiunti in alto e a sinistra avranno i margini. Un margine specifica la distanza di un View da un bordo del suo contenitore.

1. In Attributi a destra, individua il widget Vincolo nella sezione Layout. Il quadrato rappresenta la tua vista.
   
2. Fai clic sul segno + nella parte superiore del quadrato. Ciò riguarda il vincolo tra la parte superiore della visualizzazione di testo e il bordo superiore del layout del vincolo.
3. Viene visualizzato un campo con un numero per impostare il margine superiore. Il margine è la distanza da TextView al bordo del container, ConstraintLayout. Il numero visualizzato sarà diverso a seconda di dove hai rilasciato il tag TextView. Quando imposti il margine superiore, Android Studio aggiunge automaticamente anche un vincolo dalla parte superiore della visualizzazione di testo alla parte superiore del ConstrainLayout.
   
4. Imposta il margine superiore su 16.

Nota: l'unità per i margini e altre distanze nell'interfaccia utente è pixel indipendenti dalla densità (dp). È simile a centimetri o pollici, ma per le distanze su uno schermo. Android converte questo valore nel numero corretto di pixel reali per ciascun dispositivo. Come base, 1 dp è circa 1/160 di pollice, ma potrebbe essere più grande o più piccolo per alcuni dispositivi.

5. Ripeti l'operazione per il margine sinistro.
   
6. Imposta il testo per augurare un buon compleanno a un amico, ad esempio "Buon compleanno, Mario!" e premi Invio.
   
7. Tieni presente che la vista Design si aggiorna per mostrare l'aspetto dell'app.
   

Aggiungere e posizionare un'altra visualizzazione di testo

La scheda di compleanno richiede una seconda riga di testo nell'angolo in basso a destra, che dovrai aggiungere come passaggio nell'attività precedente. Cosa pensi che dovrebbero essere i margini di questo TextView?

1. Trascina un nuovo elemento TextView dalla tavolozza e rilascialo nella parte in basso a destra della visualizzazione dell'app nell'editor di layout.
   
2. Imposta un margine destro di 16.
3. Imposta un margine inferiore di 16.
   
4. In Attributi, imposta l'attributo text per firmare la tua scheda, ad esempio "Da Emma".
5. Esegui l'app. Dovresti vedere la tua data di nascita in alto a sinistra e la tua firma in basso a destra.
   

Complimenti! Hai aggiunto e posizionato alcuni elementi dell'interfaccia utente nella tua app.

Hai aggiunto del testo all'interfaccia utente, ma non sembra ancora l'app finale. In questa attività imparerai a modificare le dimensioni, il colore del testo e altri attributi che influiscono sull'aspetto di TextView. Puoi anche provare diversi caratteri.

1. Fai clic sul primo TextView nella struttura dei componenti e individua la sezione Attributi comuni della finestra Attributi. Potresti dover scorrere verso il basso per trovarla.
2. Prendi nota dei vari attributi, tra cui fontFamily, textSize e textColor.
   
3. Cerca textAspetto.
4. Se textAspetto non è espanso, fai clic sul triangolo verso il basso.
5. Imposta textSize su 36sp.
   

Nota: proprio come dp è un'unità di misura per le distanze sullo schermo, sp è un'unità di misura per le dimensioni dei caratteri. Gli elementi dell'interfaccia utente delle app per Android utilizzano due diverse unità di misura, i pixel indipendenti dalla densità (dp) utilizzati in precedenza per il layout e i pixel scalabili (sp) che imposti per le dimensioni del testo. Per impostazione predefinita, sp ha le stesse dimensioni di dp, ma si ridimensiona in base alla dimensione di testo preferita dell'utente.

6. Nota la modifica nell'editor di layout.
   
7. Cambia il valore di fontFamily in casual.
8. Prova a utilizzare caratteri diversi per vedere che aspetto hanno. Puoi trovare ancora più caratteri in fondo all'elenco, in Altri caratteri...
9. Dopo aver provato a utilizzare caratteri diversi, imposta fontFamily su sans-gtin-light.
10. Fai clic sulla casella di modifica dell'attributo textColor e inizia a digitare black.
    Tieni presente che Android Studio mostra un elenco di colori contenenti il testo che hai digitato finora.
    
11. Seleziona @android:color/black dall'elenco di colori e premi Invio.
12. Nel TextView con la tua firma, modifica textSize, textColor e fontFamily in modo che corrispondano.
13. Esegui la tua app ed esamina il risultato.
    

Congratulazioni, hai fatto i primi passi per creare un'app per biglietti di auguri di compleanno!

• L'Editor di layout ti consente di creare l'interfaccia utente per la tua app Android.
• Quasi tutti i contenuti visualizzati sullo schermo dell'app sono View.
• TextView è un elemento dell'interfaccia utente per visualizzare il testo nella tua app.
• ConstraintLayout è un contenitore per altri elementi dell'interfaccia utente.
• L'elemento Views deve essere vincolato in orizzontale e in verticale all'interno di un elemento ConstraintLayout.
• Un modo per posizionare un View è lasciare un margine.
• Un margine indica a che distanza si trova un View da un bordo del container in cui si trova.
• Puoi impostare gli attributi della TextView, ad esempio il carattere, le dimensioni del testo e il colore.

• View
• TextView
• ConstraintLayout
• dp rispetto a sp
• Editor di layout in Android Studio