Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Questa pagina è stata tradotta dall'API Cloud Translation.

Android Fundamentals 10.1 di Kotlin: stili e temi

Questo codelab fa parte del corso Android Kotlin Fundamentals. Otterrai il massimo valore da questo corso se lavori in sequenza nei codelab. Tutti i codelab del corso sono elencati nella pagina di destinazione di Android Kotlin Fundamentals.

Introduzione alla progettazione

L'argomento principale di questa serie di codelab è uno degli aspetti più importanti dello sviluppo di Android, la progettazione di app. Ovviamente la progettazione dell'app è costituita da visualizzazioni, testo e pulsanti, nonché dal punto in cui appaiono sullo schermo, nonché dai colori e dai caratteri utilizzati. Anche i suggerimenti all'utente su cosa fare sono un aspetto essenziale del design. Gli utenti devono essere in grado di capire con una rapida occhiata cosa guardano, cosa è importante e cosa possono fare.

Confronta i due schermi seguenti. Notando che lo spostamento di elementi e il disegno si concentrano su ciò che è importante, puoi aiutare l'utente a capire che cosa sta succedendo. Per gli schermi semplici, una buona progettazione spesso significa che vengono mostrati meno contenuti. Per gli schermi con molte informazioni importanti, un design efficace rende le informazioni dense comprensibili a colpo d'occhio. Mentre lavori sulle app per Android, potresti sentire questo concetto chiamato architettura delle informazioni (IA).

Un altro livello di progettazione consiste nel creare flussi di utenti coerenti, o casi d'uso, che consentano agli utenti di svolgere attività. Questa forma di progettazione è chiamata esperienza utente (UXD) e alcuni designer sono specializzati in tale design.

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

Definire i casi d'uso. Scrivi cosa devono fare gli utenti con la tua app e come.
Implementa un design. Non allegare la tua prima bozza e renderla "solo abbastanza buona", perché la modificherai dopo che avrai visto in che modo gli utenti interagiscono con essa.
Ricevere un feedback. Puoi trovare persone con cui puoi parlare nel testare la tua app: la tua famiglia, i tuoi amici o persino le persone che hai appena incontrato in un gruppo di sviluppatori Google. Chiedi loro di utilizzare la tua app per eseguire un caso d'uso mentre guardi e prendi appunti dettagliati.
Perfeziona! Con tutte queste informazioni, migliora l'app e testala di nuovo.

Ecco alcune altre domande che dovresti porti quando progetti un'ottima app. Hai imparato le tecniche per affrontare questi problemi nei codelab precedenti:

L'app perde lo stato quando l'utente ruota il dispositivo?
Cosa succede quando l'utente apre l'app? L'utente vede una rotellina di caricamento o i dati sono pronti in una cache offline?
L'app è codificata in modo da garantire efficienza e assicura che l'app sia sempre reattiva al tocco degli utenti?
L'app interagisce con i sistemi di backend in modo che all'utente non vengano mai presentati dati strani, errati o inattivi?

Man mano che lavori su app per un pubblico più ampio, è essenziale rendere le tue app accessibili a quanti più tipi di utenti possibile. Ad esempio:

Molti utenti interagiscono con i sistemi informatici in vari modi. Molti utenti sono daltonici e i colori che contrastano per un utente potrebbero non funzionare per un altro. Molti utenti soffrono di problemi di vista, dalla necessità di leggere gli occhiali alla cieca.
Alcuni utenti non possono utilizzare i touchscreen e interagiscono tramite altri dispositivi di immissione, ad esempio i pulsanti.

Un design efficace è il modo più importante per far sì che gli utenti utilizzino la tua app.

Questi codelab sono troppo brevi per spiegarti tutto ciò che riguarda la progettazione di Android, ma ti consentiranno di iniziare in modo efficace e potrai continuare a imparare e sviluppare in autonomia.

Informazioni importanti

Dovresti acquisire familiarità con:

Come creare app con attività e frammenti e navigare tra i frammenti passando dati
Utilizzare le viste e i gruppi di viste per definire un'interfaccia utente, tra cui RecyclerView
Come usare i componenti dell'architettura, incluso ViewModel, con l'architettura consigliata per creare app efficienti e ben strutturate
Associazione di dati, coroutine e gestione dei clic
Come connetterti a Internet e memorizza nella cache i dati in locale usando un database Room
Come impostare le proprietà della vista
Come estrarre e utilizzare le risorse dei file delle risorse XML

Obiettivi didattici

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

In questo lab proverai a:

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

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

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

Il terzo schermo è un rilevatore GDG. I gruppi GDG o Google Developer Group sono community di sviluppatori che si concentrano sulle tecnologie Google, inclusa Android. I GDG di tutto il mondo organizzano incontri, conferenze, jam di studio e altri eventi.

Man mano che sviluppi questa app, lavori sul vero elenco di GDG. La schermata di ricerca utilizza la posizione del dispositivo per ordinare i GDG in base alla distanza.

Se hai fortunato e nella tua area geografica c'è un GDG, puoi visitare il sito web e registrarti ai loro eventi. Gli eventi GDG sono un ottimo modo per incontrare altri sviluppatori Android e scoprire le best practice del settore che non si sono rivelate adatte a questo corso.

Gli screenshot riportati di seguito mostrano come cambierà l'app dall'inizio alla fine di questo codelab.

Android offre un sistema avanzato per lo stile che ti consente di controllare l'aspetto di tutte le visualizzazioni della tua app. Puoi utilizzare gli stili, gli stili e gli attributi di visualizzazione per modificare lo stile. Il diagramma mostrato di seguito riassume la precedenza di ogni metodo di stile. Il diagramma a piramide mostra l'ordine con cui i sistemi vengono applicati dal sistema, dal basso verso l'alto. Ad esempio, se imposti le dimensioni del testo nel tema e poi le imposti in modo diverso negli attributi di visualizzazione, questi ultimi sostituiranno gli stili del tema.

Visualizza attributi

Utilizza gli attributi vista per impostare in modo esplicito gli attributi di ciascuna vista. Gli attributi Visualizza non sono riutilizzabili, così come gli stili.
Puoi utilizzare tutte le proprietà che possono essere impostate tramite stili o temi.

Puoi utilizzarla per progetti personalizzati o una tantum, ad esempio margini, spaziature o vincoli.

Stili

Utilizza uno stile per creare una raccolta di informazioni di stile riutilizzabili, come dimensioni o colori dei caratteri.
Ideale per dichiarare piccoli set di design comuni utilizzati in tutta l'app.

Applica uno stile a più viste, sostituendo quello predefinito. Ad esempio, utilizza uno stile per creare intestazioni con stile coerente o una serie di pulsanti.

Stile predefinito

Si tratta dello stile predefinito fornito dal sistema Android.

Temi

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

Aspetto testo

Per stili solo con attributi di testo quali fontFamily.

Quando Android applica una visualizzazione, viene applicata una combinazione di temi, stili e attributi che puoi personalizzare. Gli attributi sovrascriveno sempre tutto ciò che è specificato in uno stile o in un tema. Gli stili sovrascriveranno sempre tutti gli elementi specificati in un tema.

Gli screenshot riportati di seguito mostrano l'app di ricerca GDG con un tema chiaro (a sinistra) e un tema scuro (a destra), nonché un carattere personalizzato e dimensioni di intestazione. Puoi implementarlo in diversi modi e ne scoprirai alcuni in questo codelab.

In questa attività utilizzerai gli attributi per definire lo stile delle intestazioni del testo nel layout dell'app.

Scarica ed esegui l'app iniziale GDG-finder.
Tieni presente che la schermata Home ha molti testi formattati 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 ScrollView.
Tieni presente che per ogni vista, gli attributi di vincolo e di layout del margine sono impostati nella vista, perché questi attributi sono tendenzialmente personalizzati per ciascuna vista e schermata.
Nella visualizzazione testo title, aggiungi un attributo textSize per modificare le dimensioni del testo in 24sp.

Ricorda che sp sta per pixel indipendenti dalla scala, che vengono scalati sia in base alla densità dei pixel sia alla preferenza di dimensione del carattere impostata dall'utente nelle impostazioni del dispositivo. Android determina le dimensioni del testo sullo schermo quando lo disegna. Utilizza sempre sp per il testo.

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

android:textSize="24sp"

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

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

android:textColor="#FF555555"

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

Definisci uno stile per il sottotitolo in modo che abbia lo stesso colore dell'intestazione, con un carattere più piccolo, 18sp. L'alpha 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 è modificare l'app in modo che risulti un po' stravagante e dall'aspetto professionale, ma puoi personalizzarla come preferisci. Prova i seguenti attributi per la visualizzazione di testo subtitle. Utilizza la scheda Anteprima per vedere come cambia l'aspetto della tua app. Dopodiché, rimuovi questi attributi.

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

Prima di continuare, ricordati di annullare gli attributi textAllCaps, textStyle e background dalla visualizzazione di subtitle.
Esegui la tua app, che dovrebbe già avere un aspetto migliore.

Se utilizzi i caratteri con la tua app, potresti spedire i file dei caratteri necessari come parte dell'APK. Anche se è semplice, questa soluzione in genere non è consigliata perché riduce i tempi di download e installazione dell'app.

Android consente alle app di scaricare i caratteri in fase di esecuzione utilizzando l'API Scaricabile 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à, utilizzerai i caratteri scaricabili per impostare il carattere di ogni visualizzazione dell'app che utilizza il tema.

Passaggio 1: applica un carattere scaricabile

Apri la home_fragment.xml nella scheda Design.
Nel riquadro Struttura ad albero, seleziona la visualizzazione di testo title.
Nel riquadro Attributi, individua l'attributo fontFamily. Lo puoi trovare nella sezione Tutti gli attributi oppure puoi semplicemente cercarlo.
Fai clic sulla freccia menu a discesa.
Scorri fino ad Altri caratteri e seleziona l'opzione. Si apre la finestra Risorse.

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

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

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

Apri res/values/styles.xml ed esamina il tema AppTheme predefinito creato per il progetto. Al momento è visualizzata come 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 gli attributi di tale elemento. Il codice specifica il tipo Theme definito dalle librerie Android. Il tema MaterialComponents che specifica tutto, dal funzionamento dei pulsanti alla modalità di disegno delle barre degli strumenti. Il tema è caratterizzato da valori predefiniti ragionevoli, che ti consentono di personalizzare solo le parti che preferisci. L'app utilizza la versione Light di questo tema senza la barra delle azioni (NoActionBar), come puoi vedere nello screenshot in alto.

<!-- 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>

Nello stile AppTheme, imposta la famiglia di caratteri su lobster_two. È necessario impostare sia android:fontFamily sia fontFamily, perché il tema principale utilizza entrambi. Puoi controllare home_fragment.xml nella scheda Design per visualizzare un'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 a scomparsa e spostati nelle altre schermate e vedrai che il carattere viene applicato anche qui.

Passaggio 2: applica il tema al titolo

In home_fragment.xml, trova la visualizzazione di testo title, che ha 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 ci sono modifiche.
Inserisci un altro attributo fontFamily nella visualizzazione di testo title:
app:fontFamily="serif-monospace"Assicurati che sia nello spazio app.

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

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

Rimuovi l'attributo fontFamily dalla visualizzazione di testo title.

I temi sono ideali per applicare un tema generale alla tua app, ad esempio un carattere predefinito e colori primari. Gli attributi sono un'ottima soluzione per definire uno stile specifico per una vista e aggiungere informazioni sul layout quali margini, spaziatura interna e vincoli, che tendono a essere specifiche per ogni schermata.

Al centro della gerarchia delle gerarchie di stile si trovano gli stili. Gli stili sono riutilizzabili "gruppi" di attributi che puoi applicare alle viste di tua scelta. In questa attività, utilizzerai 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>

È importante pensare ai nomi di stile come semantici quando li assegni. Seleziona un nome di stile in base a ciò che verrà utilizzato, non in base alle proprietà interessate dallo stile. Ad esempio, chiama questo stile Title, non LargeFontInGrey. Questo stile verrà utilizzato con qualsiasi titolo nell'app. Come convenzione, gli stili TextAppearance sono chiamati TextAppearance.Name, quindi in questo caso il nome è TextAppearance.Title.

Lo stile ha un elemento principale, così come un tema può avere un elemento principale. Questa volta, invece di estendere un tema, lo stile estende uno stile, TextAppearance.MaterialComponents.Headline6. Questo stile è uno stile di testo predefinito per il tema MaterialComponents, pertanto, estendendolo, puoi modificare lo stile predefinito anziché partire da zero.

Definisci due elementi nel nuovo stile. 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. Assegna un nome a TextAppearance.Subtitle.
Poiché l'unica differenza rispetto a TextAppearance.Title riguarda le dimensioni del testo, imposta questo stile come secondario in TextAppearance.Title.
Nello 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 il TextAppearance.Stile Title alla visualizzazione di 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 che hai 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 abbia la precedenza su quello che imposti qui.

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

Esegui l'app e lo stile del testo sarà coerente.

Progetto Android Studio: GDGFinderStyles.

Utilizza i temi, gli stili e gli attributi delle viste per modificarne l'aspetto.
I temi influiscono sullo stile di tutta l'app e offrono molti valori preimpostati per colori, caratteri e dimensioni dei caratteri.
Un attributo viene applicato alla vista in cui è impostato l'attributo. Utilizza gli attributi se hai stili applicabili a una sola vista, 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 di contenuti, pulsanti o visualizzazioni di testo.
I temi e gli stili ereditano il tema o lo stile principale. Puoi creare una gerarchia di stili.
I valori degli attributi (impostati nelle viste) sostituiscono gli stili. Gli stili hanno la precedenza su quello predefinito. Gli stili sostituiscono i temi. I temi sostituiscono qualsiasi stile impostato dalla proprietà textAppearance.

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

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

L'uso dei caratteri scaricabili rende i caratteri disponibili per gli utenti senza aumentare le dimensioni dell'APK. Per aggiungere un carattere scaricabile per una vista:

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 un carattere e questo non è già disponibile, il fornitore del carattere lo scarica da Internet.

Documentazione per gli sviluppatori Android:

Altre risorse:

Qual è l'aspetto del testo
Esadecimale
Sviluppo di app Android con Kotlin (corso Udacity)
Kotlin Bootcamp per programmatori (corso su Udacity)
Bootcamp Kotlin per programmatori codelab

In questa sezione sono elencati i possibili compiti per gli studenti che lavorano attraverso questo codelab nell'ambito di un corso tenuto da un insegnante. Spetta all'insegnante fare quanto segue:

Assegna i compiti, se necessario.
Comunica agli studenti come inviare compiti.
Valuta i compiti.

Gli insegnanti possono utilizzare i suggerimenti solo quanto e come vogliono e dovrebbero assegnare i compiti che ritengono appropriati.

Se stai lavorando da solo a questo codelab, puoi utilizzare questi compiti 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 tra i seguenti NON è un buon utilizzo degli stili?

▢ Specifica i vincoli di una vista.

▢ Specifica il colore di sfondo delle intestazioni.

▢ Unifica le dimensioni dei caratteri tra le viste.

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

Domanda 3

Qual è la differenza tra temi e stili?

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

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

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

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

Domanda 4

Se TextView nell'app ha un Theme che imposta le dimensioni del carattere su 12sp, uno stile definito che lo imposta su 14sp e un attributo fontSize di 16sp, quali sono le dimensioni 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 in questo corso, consulta la pagina di destinazione di Android Kotlin Fundamentals.