Questa pagina è stata tradotta dall'API Cloud Translation.

Kotlin Android Fundamentals 10.1: Styles and themes

Questo codelab fa parte del corso Android Kotlin Fundamentals. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire le codelab in sequenza. Tutti i codelab del corso sono elencati nella pagina di destinazione dei codelab Android Kotlin Fundamentals.

Introduzione alla progettazione

L'attenzione di questa serie di codelab è rivolta a uno degli aspetti più importanti dello sviluppo per Android: la progettazione di app. Gli aspetti ovvi della progettazione di un'app sono le visualizzazioni, il testo e i pulsanti, la loro posizione sullo schermo, nonché i colori e i caratteri utilizzati. Anche i suggerimenti all'utente su cosa fare in seguito sono un aspetto essenziale della progettazione. Gli utenti devono essere in grado di capire a colpo d'occhio cosa stanno guardando, cosa è importante e cosa possono fare.

Confronta le due schermate riportate di seguito. Nota che spostando gli elementi e concentrandoti su ciò che è importante, puoi aiutare l'utente a capire cosa sta succedendo. Per le schermate semplici, un buon design spesso significa mostrare meno informazioni. Per le schermate con molte informazioni importanti, un buon design rende le informazioni dense comprensibili a colpo d'occhio. Quando lavori sulle app per Android, potresti sentire parlare di architettura delle informazioni (AI).

Un altro livello di progettazione è la creazione di flussi utente coerenti, o casi d'uso, che consentono agli utenti di completare le attività. Questa forma di progettazione è chiamata progettazione dell'esperienza utente (UXD) e alcuni designer sono specializzati in questo campo.

Se non hai accesso a un designer, ecco alcuni suggerimenti per iniziare:

Definisci i casi d'uso. Scrivi cosa devono fare gli utenti con la tua app e come.
Implementa un design. Non affezionarti alla prima bozza e rendila solo "abbastanza buona", perché la modificherai dopo aver visto come interagiscono gli utenti reali.
Ricevi un feedback. Trova qualcuno che possa testare la tua app: la tua famiglia, i tuoi amici o anche persone che hai appena incontrato in un Google Developer Group. Chiedi loro di utilizzare la tua app per eseguire un caso d'uso mentre osservi e prendi appunti dettagliati.
Perfeziona. Con tutte queste informazioni, migliora l'app e poi testala di nuovo.

Ecco altre domande da porti quando progetti un'esperienza app ottimale. Nelle esercitazioni precedenti hai imparato le tecniche per affrontare questi problemi:

L'app perde il suo stato quando l'utente ruota il dispositivo?
Che cosa succede quando l'utente apre l'app? L'utente vede un indicatore di caricamento o i dati sono pronti in una cache offline?
L'app è codificata in modo efficiente e garantisce che sia sempre reattiva al tocco dell'utente?
L'app interagisce con i sistemi di backend in modo da non presentare mai all'utente dati strani, errati o obsoleti?

Quando lavori su app per un pubblico più ampio, è essenziale renderle accessibili al maggior numero possibile di tipi di utenti. Ad esempio:

Molti utenti interagiscono con i sistemi informatici in modi diversi. Molti utenti sono daltonici e i colori che contrastano per un utente potrebbero non funzionare per un altro. Molti utenti hanno problemi di vista, che vanno dalla necessità di occhiali da lettura alla cecità.
Alcuni utenti non possono usare i touchscreen e interagiscono tramite altri dispositivi di input, come i pulsanti.

Un buon design è il modo più importante per convincere gli utenti a utilizzare la tua app.

Questi codelab sono troppo brevi per insegnarti tutto sul design per Android, ma ti aiuteranno a iniziare nella giusta direzione e potrai continuare a imparare e sviluppare in autonomia.

Cosa devi già sapere

Devi avere familiarità con:

Come creare app con attività e frammenti e spostarsi tra i frammenti passando i dati
Utilizzo di visualizzazioni e gruppi di visualizzazioni per definire il layout di un'interfaccia utente, incluso RecyclerView
Come utilizzare i componenti dell'architettura, incluso ViewModel, con l'architettura consigliata per creare un'app ben strutturata ed efficiente
Data binding, coroutine e come gestire i clic
Come connettersi a internet e memorizzare i dati nella cache in locale utilizzando un database Room
Come impostare le proprietà della visualizzazione
Come estrarre e utilizzare le risorse dai file di risorse XML

Obiettivi didattici

Nozioni di base sul sistema di stili di Android
Come utilizzare attributi, stili e temi per personalizzare l'app

In questo lab proverai a:

Migliorare il design di un'app iniziale con attributi, stili e temi della visualizzazione

L'app iniziale GDG-finder si basa su tutto ciò che hai imparato finora in questo corso.

L'app utilizza ConstraintLayout per disporre tre schermate. Due delle schermate sono solo file di layout che utilizzerai per esplorare i colori e il testo su Android.

La terza schermata è un localizzatore di GDG. I GDG, o Google Developer Group, sono community di sviluppatori che si concentrano sulle tecnologie Google, tra cui Android. I GDG di tutto il mondo ospitano meetup, conferenze, study jam e altri eventi.

Mentre sviluppi questa app, lavori sull'elenco reale dei GDG. La schermata di ricerca utilizza la posizione del dispositivo per ordinare i GDG in base alla distanza.

Se hai fortuna e nella tua regione è presente un GDG, puoi visitare il sito web e registrarti ai suoi eventi. Gli eventi GDG sono un ottimo modo per incontrare altri sviluppatori Android e apprendere le best practice del settore che non sono state incluse in questo corso.

Gli screenshot seguenti mostrano come cambierà la tua app dall'inizio alla fine di questo codelab.

Android fornisce un ricco sistema di stili che ti consente di controllare l'aspetto di tutte le visualizzazioni nella tua app. Puoi utilizzare temi, stili e attributi di visualizzazione per influire sullo stile. Il diagramma mostrato di seguito riassume la precedenza di ciascun metodo di applicazione degli stili. Il diagramma a piramide mostra l'ordine in cui i metodi di applicazione degli stili vengono applicati dal sistema, dal basso verso l'alto. Ad esempio, se imposti la dimensione del testo nel tema e poi la imposti in modo diverso negli attributi della visualizzazione, questi ultimi sostituiranno lo stile del tema.

Visualizzare gli attributi

Utilizza gli attributi di visualizzazione per impostare gli attributi in modo esplicito per ogni visualizzazione. Gli attributi di visualizzazione non sono riutilizzabili, a differenza degli stili.
Puoi utilizzare ogni proprietà che può essere impostata tramite stili o temi.

Utilizzalo per design personalizzati o una tantum, come margini, spaziatura interna o vincoli.

Stili

Utilizza uno stile per creare una raccolta di informazioni di stile riutilizzabili, come la dimensione del carattere o i colori.
Ideale per dichiarare piccoli set di design comuni utilizzati in tutta l'app.

Applica uno stile a più visualizzazioni, sostituendo lo stile predefinito. Ad esempio, utilizza uno stile per creare intestazioni o un insieme di pulsanti con uno stile coerente.

Stile predefinito

Questo è lo stile predefinito fornito dal sistema Android.

Temi

Utilizza un tema per definire i colori per l'intera app.
Utilizza un tema per impostare il carattere predefinito per l'intera app.
Si applicano a tutte le visualizzazioni, ad esempio le visualizzazioni di testo o i pulsanti di opzione.
Utilizzalo per configurare le proprietà che puoi applicare in modo coerente per l'intera app.

TextAppearance

Per lo stile con solo attributi di testo, ad esempio fontFamily.

Quando Android applica uno stile a una visualizzazione, utilizza una combinazione di temi, stili e attributi che puoi personalizzare. Gli attributi sovrascrivono sempre qualsiasi elemento specificato in uno stile o un tema. Inoltre, gli stili sovrascrivono sempre qualsiasi elemento specificato in un tema.

Gli screenshot riportati di seguito mostrano l'app GDG-finder con il tema chiaro (a sinistra) e il tema scuro (a destra), nonché con dimensioni personalizzate di carattere e intestazione. Può essere implementato in diversi modi, alcuni dei quali vengono illustrati in questo codelab.

In questa attività, utilizzi gli attributi per applicare uno stile alle intestazioni del testo nel layout dell'app.

Scarica ed esegui l'app iniziale GDG-finder.
Nota che la schermata Home contiene molto testo formattato in modo uniforme, il che rende difficile capire l'argomento della pagina e cosa è importante.
Apri il file di layout home_fragment.xml.
Tieni presente che il layout utilizza ConstraintLayout per posizionare gli elementi all'interno di un ScrollView.
Tieni presente che per ogni visualizzazione, gli attributi di layout del vincolo e del margine sono impostati nella visualizzazione, perché questi attributi tendono a essere personalizzati per ogni visualizzazione e schermata.
Nella visualizzazione di testo title, aggiungi un attributo textSize per modificare le dimensioni del testo in 24sp.

Ti ricordiamo che sp sta per pixel indipendenti dalla scala, che vengono scalati sia dalla densità di pixel sia dalla preferenza per le dimensioni del carattere impostata dall'utente nelle impostazioni del dispositivo. Android calcola le dimensioni del testo sullo schermo quando lo disegna. Utilizza sempre sp per le dimensioni del testo.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

Imposta il textColor della visualizzazione di testo title su grigio opaco impostando un valore aRGB di #FF555555.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

Per aprire la scheda Anteprima in Android Studio, seleziona Visualizza > Finestre degli strumenti > Anteprima oppure fai clic sul pulsante verticale Anteprima sul bordo destro dell'editor layout. Nell'anteprima, verifica che il titolo sia grigio e più grande di prima, come mostrato di seguito.

Applica uno stile al sottotitolo in modo che abbia lo stesso colore dell'intestazione, con un carattere più piccolo, 18sp. L'alfa predefinito è FF, opaco. Puoi omettere il valore alfa se non lo modifichi.)

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

In questo codelab, l'obiettivo è dare uno stile all'app che sia un po' stravagante ma dall'aspetto professionale, ma puoi darle lo stile che preferisci. Prova i seguenti attributi per la visualizzazione del testo subtitle. Utilizza la scheda Anteprima per vedere come cambia l'aspetto della tua app. Poi rimuovi questi attributi.

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

Prima di continuare, non dimenticare di annullare gli attributi textAllCaps, textStyle e background dalla visualizzazione subtitle.
Esegui l'app e dovrebbe già avere un aspetto migliore.

Quando utilizzi i caratteri con la tua app, puoi includere i file dei caratteri necessari nell'APK. Sebbene semplice, questa soluzione di solito non è consigliata perché l'app impiega più tempo per essere scaricata e installata.

Android consente alle app di scaricare i caratteri in fase di runtime utilizzando l'API Downloadable Fonts. Se la tua app utilizza lo stesso carattere di un'altra app sul dispositivo, Android scarica il carattere una sola volta, risparmiando spazio di archiviazione sul dispositivo.

In questa attività, utilizzi i caratteri scaricabili per impostare il carattere di ogni visualizzazione dell'app che utilizza il tema.

Passaggio 1: applica un carattere scaricabile

Apri home_fragment.xml nella scheda Progettazione.
Nel riquadro Albero dei componenti, seleziona la visualizzazione di testo title.
Nel riquadro Attributi, trova l'attributo fontFamily. Puoi trovarlo nella sezione Tutti gli attributi oppure puoi semplicemente cercarlo.
Fai clic sulla freccia del menu a discesa.
Scorri fino a Altri caratteri e selezionala. Si apre la finestra Risorse.

Nella finestra Risorse, cerca lobster o semplicemente lo.
Nei risultati, seleziona Lobster Two.
A destra, sotto il nome del carattere, seleziona il pulsante di opzione Crea carattere scaricabile. Fai clic su Ok.
Apri il file manifest di Android.
Verso la parte inferiore del file manifest, trova il nuovo tag <meta-data> con gli attributi name e resource impostati su "preloaded_fonts". Questo tag comunica a Google Play Services che questa app vuole utilizzare i caratteri scaricati. Quando l'app viene eseguita e richiede il carattere Lobster Two, il fornitore di caratteri lo scarica da internet, se non è già disponibile sul dispositivo.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

Nella cartella res/values, trova il file preloaded_fonts.xml, che definisce l'array che elenca tutti i caratteri scaricabili per questa app.
Allo stesso modo, il file res/fonts/lobster_two.xml contiene informazioni sul carattere.
Apri home_fragment.xml e nota nel codice e nell'anteprima che il carattere Lobster Two viene applicato a title TextView e quindi al titolo.

Apri res/values/styles.xml ed esamina il tema AppTheme predefinito creato per il progetto. Al momento ha l'aspetto mostrato di seguito. Per applicare il nuovo carattere Lobster Two a tutto il testo, devi aggiornare questo tema.
Nel tag <style>, nota l'attributo parent. Ogni tag di stile può specificare un elemento principale ed ereditare tutti i relativi attributi. Il codice specifica Theme definito dalle librerie Android. Il tema MaterialComponents che specifica tutto, dal funzionamento dei pulsanti al modo in cui disegnare le barre degli strumenti. Il tema ha valori predefiniti ragionevoli, quindi puoi personalizzare solo le parti che ti interessano. L'app utilizza la versione Light di questo tema senza la barra delle azioni (NoActionBar), come puoi vedere nello screenshot sopra.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

All'interno dello stile AppTheme, imposta la famiglia di caratteri su lobster_two. Devi impostare sia android:fontFamily sia fontFamily, perché il tema genitore li utilizza entrambi. Puoi controllare home_fragment.xml nella scheda Design per visualizzare l'anteprima delle modifiche.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

Esegui di nuovo l'app. Il nuovo carattere viene applicato a tutto il testo. Apri il riquadro di navigazione e passa alle altre schermate. Vedrai che il carattere è applicato anche lì.

Passaggio 2: applica il tema al titolo

In home_fragment.xml, trova la visualizzazione di testo title, che include l'attributo per il carattere lobster_two. Elimina l'attributo fontFamily ed esegui l'app. Poiché il tema imposta la stessa famiglia di caratteri, non vengono apportate modifiche.
Inserisci un attributo fontFamily diverso nella visualizzazione di testo title:
app:fontFamily="serif-monospace"assicurati che si trovi nello spazio app.

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

Esegui l'app e vedrai che l'attributo locale della visualizzazione sostituisce il tema.

Rimuovi l'attributo fontFamily dalla visualizzazione di testo title.

I temi sono ideali per applicare un tema generale all'app, ad esempio un carattere predefinito e colori principali. Gli attributi sono ideali per applicare uno stile a una visualizzazione specifica e aggiungere informazioni sul layout come margini, spaziatura interna e vincoli, che tendono a essere specifici per ogni schermata.

Al centro della piramide della gerarchia degli stili si trovano gli stili. Gli stili sono "gruppi" riutilizzabili di attributi che puoi applicare alle visualizzazioni che preferisci. In questa attività utilizzi uno stile per il titolo e il sottotitolo.

Passaggio 1: crea uno stile

Apri res/values/styles.xml.
All'interno del tag <resources>, definisci un nuovo stile utilizzando il tag <style>, come mostrato di seguito.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

Quando assegni un nome agli stili, è importante considerarli semantici. Seleziona un nome di stile in base all'utilizzo dello stile, non in base alle proprietà interessate dallo stile. Ad esempio, chiama questo stile Title, non LargeFontInGrey. Questo stile verrà utilizzato da qualsiasi titolo all'interno dell'app. Per convenzione, gli stili TextAppearance sono chiamati TextAppearance.Name, quindi in questo caso il nome è TextAppearance.Title.

Lo stile ha un elemento principale, proprio come un tema. Ma questa volta, anziché estendere un tema, lo stile estende uno stile, TextAppearance.MaterialComponents.Headline6. Questo stile è uno stile di testo predefinito per il tema MaterialComponents, quindi estendendolo modifichi lo stile predefinito anziché iniziare da zero.

All'interno del nuovo stile, definisci due elementi. In un elemento, imposta textSize su 24sp. Nell'altro elemento, imposta textColor sullo stesso grigio scuro utilizzato in precedenza.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

Definisci un altro stile per i sottotitoli codificati. Assegna il nome TextAppearance.Subtitle.
Poiché l'unica differenza rispetto a TextAppearance.Title sarà nelle dimensioni del testo, imposta questo stile come figlio di TextAppearance.Title.
All'interno dello stile Subtitle, imposta la dimensione del testo su 18sp. Ecco lo stile completato:

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Passaggio 2: applica lo stile che hai creato

In home_fragment.xml, aggiungi TextAppearance.Title alla visualizzazione del testo title. Elimina gli attributi textSize e textColor.

I temi sostituiscono qualsiasi stile TextAppearance impostato. Il diagramma a piramide all'inizio del codelab mostra l'ordine in cui viene applicato lo stile. Utilizza la proprietà textAppearance per applicare lo stile come TextAppearance, in modo che il carattere impostato in Theme sostituisca quello impostato qui.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

Aggiungi anche lo stile TextAppearance.Subtitle alla visualizzazione di testo subtitle ed elimina gli attributi textSize e textColor. Devi applicare questo stile anche come textAppearance, in modo che il carattere impostato nel tema sostituisca quello impostato qui.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

Esegui l'app e il testo ora ha uno stile coerente.

Progetto Android Studio: GDGFinderStyles.

Utilizza temi, stili e attributi nelle visualizzazioni per modificarne l'aspetto.
I temi influiscono sullo stile dell'intera app e includono molti valori preimpostati per colori, caratteri e dimensioni dei caratteri.
Un attributo si applica alla visualizzazione in cui è impostato. Utilizza gli attributi se hai uno stile che si applica a una sola visualizzazione, ad esempio spaziatura interna, margini e vincoli.
Gli stili sono gruppi di attributi che possono essere utilizzati da più viste. Ad esempio, puoi avere uno stile per tutte le intestazioni, i pulsanti o le visualizzazioni di testo dei tuoi contenuti.
I temi e gli stili vengono ereditati dal tema o dallo stile principale. Puoi creare una gerarchia di stili.
I valori degli attributi (impostati nelle visualizzazioni) sostituiscono gli stili. Gli stili sostituiscono lo stile predefinito. Gli stili sostituiscono i temi. I temi sostituiscono qualsiasi stile impostato dalla proprietà textAppearance.

Definisci gli stili nel file di risorse styles.xml utilizzando i tag <style> e <item>.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

L'utilizzo di caratteri scaricabili li rende disponibili agli utenti senza aumentare le dimensioni dell'APK. Per aggiungere un carattere scaricabile a una visualizzazione:

Seleziona la visualizzazione nella scheda Design e seleziona Altri caratteri dal menu a discesa dell'attributo fontFamily.
Nella finestra di dialogo Risorse, trova un carattere e seleziona il pulsante di opzione Crea carattere scaricabile.
Verifica che il manifest Android includa un tag meta-data per i caratteri precaricati.

Quando l'app richiede per la prima volta un carattere e questo non è ancora disponibile, il fornitore di caratteri lo scarica da internet.

Documentazione per sviluppatori Android:

Altre risorse:

Qual è l'aspetto del testo?
Esadecimale
Developing Android Apps with Kotlin (corso Udacity)
Kotlin Bootcamp for Programmers (corso Udacity)
Codelab di Kotlin Bootcamp for Programmers

Questa sezione elenca i possibili compiti a casa per gli studenti che seguono questo codelab nell'ambito di un corso guidato da un insegnante. Spetta all'insegnante:

Assegna i compiti, se richiesto.
Comunica agli studenti come inviare i compiti.
Valuta i compiti a casa.

Gli insegnanti possono utilizzare questi suggerimenti nella misura che ritengono opportuna e sono liberi di assegnare qualsiasi altro compito a casa che ritengono appropriato.

Se stai seguendo questo codelab in autonomia, sentiti libero di utilizzare questi compiti per casa per mettere alla prova le tue conoscenze.

Rispondi a queste domande

Domanda 1

Quale tag viene utilizzato per definire i temi?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Domanda 2

Quale dei seguenti NON è un buon utilizzo degli stili?

▢ Specifica i vincoli di una visualizzazione.

▢ Specifica il colore di sfondo delle intestazioni.

▢ Unifica la dimensione del carattere nelle varie visualizzazioni.

▢ Specifica il colore del testo per un gruppo di visualizzazioni.

Domanda 3

Qual è la differenza tra temi e stili?

▢ I temi vengono applicati all'intera app, mentre puoi applicare stili a visualizzazioni specifiche.

▢ I temi non possono essere ereditati da altri temi, ma gli stili possono essere ereditare da altri stili.

▢ Gli stili non possono essere ereditati da altri stili, ma i temi possono essere ereditati da altri temi.

▢ I temi sono forniti dal sistema Android, mentre gli stili sono definiti dallo sviluppatore.

Domanda 4

Se un TextView nella tua app ha un Theme che imposta la dimensione del carattere su 12sp, uno stile definito che la imposta su 14sp e un attributo fontSize di 16sp, qual è la dimensione del carattere visualizzato sullo schermo?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Inizia la lezione successiva: 10.2: Material Design, dimensioni e colori

Per i link ad altri codelab di questo corso, consulta la pagina di destinazione dei codelab di Android Kotlin Fundamentals.