Stili e temi

Prova Compose

Jetpack Compose è il toolkit UI consigliato per Android. Scopri come utilizzare i temi in Compose.

Sistemi di progettazione in Compose →

Gli stili e i temi su Android ti consentono di separare i dettagli della progettazione dell'app dalla struttura e dal comportamento dell'UI, in modo simile ai fogli di stile nella progettazione web.

Uno stile è una raccolta di attributi che specifica l'aspetto di una singola View. Uno stile può specificare attributi come il colore del carattere, le dimensioni del carattere, il colore di sfondo e molto altro.

Un tema è una raccolta di attributi applicata a un'intera app, attività o gerarchia di visualizzazioni, non solo a una singola visualizzazione. Quando applichi un tema, ogni visualizzazione nell'app o nell'attività applica ciascuno degli attributi del tema che supporta. I temi possono anche applicare stili a elementi non di visualizzazione, come la barra di stato e lo sfondo della finestra.

Gli stili e i temi vengono dichiarati in un file di risorse di stile in res/values/, in genere denominato styles.xml.

Figura 1. Due temi applicati alla stessa attività: Theme.AppCompat (a sinistra) e Theme.AppCompat.Light (a destra).

Temi e stili

I temi e gli stili hanno molte somiglianze, ma vengono utilizzati per scopi diversi. I temi e gli stili hanno la stessa struttura di base: una coppia chiave-valore che mappa gli attributi alle risorse.

Uno stile specifica gli attributi per un tipo particolare di visualizzazione. Ad esempio, uno stile potrebbe specificare gli attributi di un pulsante. Ogni attributo specificato in uno stile è un attributo che puoi impostare nel file di layout. L'estrazione di tutti gli attributi in uno stile semplifica l'utilizzo e la manutenzione in più widget.

Un tema definisce una raccolta di risorse denominate a cui possono fare riferimento stili, layout, widget e così via. I temi assegnano nomi semantici, come colorPrimary, alle risorse Android.

Gli stili e i temi sono progettati per funzionare insieme. Ad esempio, potresti avere uno stile che specifica che una parte di un pulsante è colorPrimary e un'altra parte è colorSecondary. Le definizioni effettive di questi colori sono fornite nel tema. Quando il dispositivo passa alla modalità notturna, l'app può passare dal tema "chiaro" al tema "scuro", modificando i valori di tutti questi nomi di risorse. Non devi modificare gli stili, perché utilizzano i nomi semantici e non definizioni di colore specifiche.

Per ulteriori informazioni su come funzionano insieme temi e stili, consulta il post del blog Stili Android: temi e stili.

Creare e applicare uno stile

Per creare un nuovo stile, apri il file res/values/styles.xml del progetto. Per ogni stile che vuoi creare, segui questi passaggi:

1. Aggiungi un elemento <style> con un nome che identifichi in modo univoco lo stile.
2. Aggiungi un elemento <item> per ogni attributo di stile che vuoi definire. Il name in ogni elemento specifica un attributo che altrimenti utilizzeresti come attributo XML nel layout. Il valore nell'elemento <item> è il valore di quell'attributo.

Ad esempio, supponiamo di definire il seguente stile:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

Puoi applicare lo stile a una visualizzazione nel seguente modo:

<TextView
    style="@style/GreenText"
    ... />

Ogni attributo specificato nello stile viene applicato alla visualizzazione, se la visualizzazione lo accetta. La visualizzazione ignora gli attributi che non accetta.

Tuttavia, anziché applicare uno stile alle singole visualizzazioni, in genere applichi gli stili come tema per l'intera app, attività o raccolta di visualizzazioni, come descritto in un'altra sezione di questa guida.

Estendere e personalizzare uno stile

Quando crei i tuoi stili, estendi sempre uno stile esistente dal framework o dalla libreria di supporto in modo da mantenere la compatibilità con gli stili dell'UI della piattaforma. Per estendere uno stile, specifica lo stile che vuoi estendere con l'attributo parent. Puoi quindi sostituire gli attributi di stile ereditati e aggiungerne di nuovi.

Ad esempio, puoi ereditare l'aspetto del testo predefinito della piattaforma Android e modificarlo nel seguente modo:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Tuttavia, eredita sempre gli stili principali dell'app dalla Android Support Library. Gli stili nella Support Library forniscono compatibilità ottimizzando ogni stile per gli attributi dell'UI disponibili in ogni versione. Gli stili della Support Library spesso hanno un nome simile allo stile della piattaforma, ma con AppCompat incluso.

Per ereditare gli stili da una libreria o dal tuo progetto, dichiara il nome dello stile principale senza la parte @android:style/ mostrata nell'esempio precedente. Ad esempio, il seguente esempio eredita gli stili dell'aspetto del testo dalla Support Library:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

Puoi anche ereditare gli stili, ad eccezione di quelli della piattaforma, estendendo il nome di uno stile con una notazione con punti, anziché utilizzare l'attributo parent. Ovvero, anteponi al nome dello stile il nome dello stile che vuoi ereditare, separato da un punto. In genere, questa operazione viene eseguita solo quando si estendono i propri stili, non gli stili di altre librerie. Ad esempio, il seguente stile eredita tutti gli stili di GreenText nell'esempio precedente e poi aumenta le dimensioni del testo:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

Puoi continuare a ereditare gli stili in questo modo tutte le volte che vuoi concatenando altri nomi.

Per scoprire quali attributi puoi dichiarare con un tag <item>, consulta la tabella "Attributi XML" nei vari riferimenti di classe. Tutte le visualizzazioni supportano gli attributi XML della classe View di base e molte visualizzazioni aggiungono i propri attributi speciali. Ad esempio, gli TextView attributi XML includono l' android:inputType attributo che puoi applicare a una visualizzazione testo che riceve input, ad esempio un widget EditText.

Applicare uno stile come tema

Puoi creare un tema nello stesso modo in cui crei gli stili. La differenza è il modo in cui lo applichi: anziché applicare uno stile con l'attributo style a una visualizzazione, applichi un tema con l'attributo android:theme al tag <application> o a un <activity> tag nel file AndroidManifest.xml.

Ad esempio, ecco come applicare il tema "scuro" di Material Design della libreria di supporto Android all'intera app:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

Ecco come applicare il tema "chiaro" a una sola attività:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

Ogni visualizzazione nell'app o nell'attività applica gli stili che supporta da quelli definiti nel tema specificato. Se una visualizzazione supporta solo alcuni degli attributi dichiarati nello stile, applica solo questi attributi e ignora quelli che non supporta.

A partire da Android 5.0 (livello API 21) e dalla Android Support Library v22.1, puoi anche specificare l'attributo android:theme a una visualizzazione nel file di layout. In questo modo viene modificato il tema per la visualizzazione e le visualizzazioni secondarie, il che è utile per modificare le tavolozze dei colori del tema in una parte specifica dell'interfaccia.

Gli esempi precedenti mostrano come applicare un tema come Theme.AppCompat fornito dalla Android Support Library. Tuttavia, in genere vuoi personalizzare il tema in base al brand della tua app. Il modo migliore per farlo è estendere questi stili dalla Support Library e sostituire alcuni degli attributi, come descritto nella sezione seguente.

Gerarchia degli stili

Android offre una serie di modi per impostare gli attributi nella tua app per Android. Ad esempio, puoi impostare gli attributi direttamente in un layout, applicare uno stile a una visualizzazione, applicare un tema a un layout e persino impostare gli attributi a livello di programmazione.

Quando scegli come applicare lo stile alla tua app, tieni presente la gerarchia degli stili di Android. In generale, utilizza i temi e gli stili il più possibile per garantire la coerenza. Se specifichi gli stessi attributi in più posizioni, l'elenco seguente determina quali attributi vengono applicati in definitiva. L'elenco è ordinato dalla precedenza più alta a quella più bassa.

1. Applicare lo stile a livello di carattere o paragrafo utilizzando gli span di testo alle TextView-derived classi.
2. Applicare gli attributi a livello di programmazione.
3. Applicare i singoli attributi direttamente a una visualizzazione.
4. Applicare uno stile a una visualizzazione.
5. Stile predefinito.
6. Applicare un tema a una raccolta di visualizzazioni, a un'attività o all'intera app.
7. Applicare uno stile specifico per la visualizzazione, ad esempio impostare un TextAppearance su un TextView.

Figura 2. Lo stile di uno span sostituisce lo stile di un textAppearance.

TextAppearance

Una limitazione degli stili è che puoi applicare un solo stile a una View. In un TextView, tuttavia, puoi anche specificare un attributo TextAppearance che funziona in modo simile a uno stile, come mostrato nell'esempio seguente:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance ti consente di definire uno stile specifico per il testo, lasciando lo stile di una View disponibile per altri usi. Tieni presente, tuttavia, che se definisci attributi di testo direttamente nella View o in uno stile, questi valori sostituiscono i valori TextAppearance.

TextAppearance supporta un sottoinsieme di attributi di stile offerti da TextView. Per l'elenco completo degli attributi, consulta TextAppearance.

Alcuni attributi comuni TextView non inclusi sono lineHeight[Multiplier|Extra], lines, breakStrategy e hyphenationFrequency. TextAppearance funziona a livello di carattere e non di paragrafo, pertanto gli attributi che interessano l'intero layout non sono supportati.

Personalizzare il tema predefinito

Quando crei un progetto con Android Studio, per impostazione predefinita viene applicato un tema Material Design alla tua app, come definito nel file styles.xml del progetto. Questo stile AppThemeestende un tema dalla Support Library e include sostituzioni per gli attributi di colore utilizzati dagli elementi chiave dell'UI, come la barra dell'app e ilFloating Action Button (FAB), se utilizzati. In questo modo, puoi personalizzare rapidamente la progettazione dei colori della tua app aggiornando i colori forniti.

Ad esempio, il file styles.xml ha un aspetto simile al seguente:

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

I valori di stile sono in realtà riferimenti ad altre risorse di colore, definite nel file res/values/colors.xml del progetto. Questo è il file che modifichi per cambiare i colori. Consulta la panoramica dei colori di Material Design per migliorare l'esperienza utente con il colore dinamico e altri colori personalizzati.

Una volta che conosci i colori, aggiorna i valori in res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

Puoi quindi sostituire tutti gli altri stili che vuoi. Ad esempio, puoi modificare il colore di sfondo dell'attività nel seguente modo:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

Per un elenco degli attributi che puoi utilizzare nel tema, consulta la tabella degli attributi in R.styleable.Theme. Quando aggiungi stili per le visualizzazioni nel layout, puoi anche trovare gli attributi consultando la tabella "Attributi XML" nei riferimenti della classe di visualizzazione. Ad esempio, tutte le visualizzazioni supportano gli attributi XML della classe View di base.

La maggior parte degli attributi viene applicata a tipi specifici di visualizzazioni e alcuni a tutte le visualizzazioni. Tuttavia, alcuni attributi del tema elencati in R.styleable.Theme si applicano alla finestra dell'attività, non alle visualizzazioni nel layout. Ad esempio, windowBackground modifica lo sfondo della finestra e windowEnterTransition definisce un'animazione di transizione da utilizzare all'avvio dell'attività. Per maggiori dettagli, vedi Avviare un'attività utilizzando un'animazione.

La libreria di supporto Android fornisce anche altri attributi che puoi utilizzare per personalizzare il tema esteso da Theme.AppCompat, come l'attributo colorPrimary mostrato nell'esempio precedente. Questi sono visualizzabili al meglio nel file attrs.xml della libreria.

Sono disponibili anche altri temi dalla Support Library che potresti voler estendere anziché quelli mostrati nell'esempio precedente. Il posto migliore per visualizzare i temi disponibili è il file themes.xml della libreria.

Aggiungere stili specifici per la versione

Se una nuova versione di Android aggiunge attributi di tema che vuoi utilizzare, puoi aggiungerli al tema mantenendo la compatibilità con le versioni precedenti. Ti serve solo un altro styles.xml file salvato in una directory values che includa il qualificatore della versione della risorsa:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

Poiché gli stili nel file values/styles.xml sono disponibili per tutte le versioni, i temi in values-v21/styles.xml possono ereditarli. Ciò significa che puoi evitare di duplicare gli stili iniziando con un tema "base" e poi estendendolo negli stili specifici della versione.

Ad esempio, per dichiarare le transizioni delle finestre per Android 5.0 (livello API 21) e versioni successive, devi utilizzare nuovi attributi. Pertanto, il tema di base in res/values/styles.xml può avere il seguente aspetto:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

Quindi, aggiungi gli stili specifici della versione in res/values-v21/styles.xml, come segue:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

Ora puoi applicare AppTheme nel file manifest e il sistema seleziona gli stili disponibili per ogni versione del sistema.

Per ulteriori informazioni sull'utilizzo di risorse alternative per dispositivi diversi, vedi Fornire risorse alternative.

Personalizzare gli stili dei widget

Ogni widget nel framework e nella Support Library ha uno stile predefinito. Ad esempio, quando applichi lo stile alla tua app utilizzando un tema della Support Library, un'istanza di Button viene stilizzata utilizzando lo stile Widget.AppCompat.Button. Se vuoi applicare uno stile di widget diverso a un pulsante, puoi farlo con l'attributo style nel file di layout. Ad esempio, il seguente applica lo stile del pulsante senza bordi della libreria:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

Se vuoi applicare questo stile a tutti i pulsanti, puoi dichiararlo in buttonStyle del tema nel seguente modo:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

Puoi anche estendere gli stili dei widget, proprio come estendere qualsiasi altro stile, e poi applicare lo stile del widget personalizzato nel layout o nel tema.

Risorse aggiuntive

Per scoprire di più su temi e stili, consulta le seguenti risorse aggiuntive:

Post del blog

• Stili Android: temi e stili
• Stili Android: attributi di tema comuni
• Stili Android: preferire gli attributi di tema