Stili e temi

Prova il metodo Scrivi
Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come lavorare con i temi in Compose.
Progetta sistemi in Compose →

Gli stili e i temi su Android consentono di separare i dettagli del design dell'app dalla struttura e dal comportamento dell'interfaccia utente, come per i fogli di stile nella progettazione web.

Uno stile è una raccolta di attributi che specifica l'aspetto di un singolo View. Uno stile può specificare attributi come colore e dimensione del carattere, 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 attività applica ogni attributo del tema supportato. I temi possono anche applicare gli stili agli elementi non visibili, come la barra di stato e lo sfondo della finestra.

Stili e temi sono dichiarati in un file di risorse degli stili 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 presentano 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 relativi a un particolare tipo di vista. 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 il loro utilizzo e la loro gestione 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, ad esempio colorPrimary, alle risorse Android.

Stili e temi sono pensati per funzionare insieme. Ad esempio, potresti avere uno stile che specifica che una parte di un pulsante è colorPrimary e un'altra è 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" a quello "scuro", modificando i valori di tutti i nomi delle risorse. Non è necessario modificare gli stili, poiché utilizzano nomi semantici e non definizioni specifiche dei colori.

Per ulteriori informazioni sull'interazione tra temi e stili, vedi 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 lo stile in modo univoco.
  2. Aggiungi un elemento <item> per ogni attributo di stile che vuoi definire. name in ogni elemento specifica un attributo che altrimenti utilizzi come attributo XML nel tuo layout. Il valore nell'elemento <item> è il valore di quell'attributo.

Ad esempio, supponiamo che tu definisca 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>

Per applicare lo stile a una vista:

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

Ogni attributo specificato nello stile viene applicato alla vista se la visualizzazione la accetta. La visualizzazione ignora gli attributi non accettati.

Tuttavia, invece di applicare uno stile alle singole viste, in genere puoi applicare gli stili come tema all'intera app, attività o raccolta di visualizzazioni, come descritto in un'altra sezione di questa guida.

Estendi e personalizza uno stile

Quando crei stili personalizzati, estendi sempre uno stile esistente dal framework o dalla libreria di supporto in modo da mantenere la compatibilità con gli stili dell'interfaccia utente della piattaforma. Per estendere uno stile, specifica lo stile da 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 come segue:

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

Tuttavia, puoi sempre ereditare gli stili principali delle app da Android Support Library. Gli stili nella Libreria di supporto offrono la compatibilità ottimizzando ogni stile per gli attributi UI disponibili in ogni versione. Gli stili della libreria di supporto spesso hanno un nome simile a quello della piattaforma, ma con AppCompat incluso.

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

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

Puoi anche ereditare gli stili, ad eccezione di quelli dalla piattaforma, estendendo il nome di uno stile con una notazione a punti, invece di utilizzare l'attributo parent. In altre parole, aggiungi il nome dello stile da ereditare prima del nome, separato da un punto. In genere questa operazione viene eseguita solo quando estendi i tuoi stili, non quelli di altre librerie. Ad esempio, il seguente stile eredita tutti gli stili dall'elemento GreenText nell'esempio precedente e quindi aumenta le dimensioni del testo:

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

Puoi continuare a ereditare stili come questo tutte le volte che vuoi concatenando più nomi.

Per trovare gli attributi che puoi dichiarare con un tag <item>, consulta la tabella "Attributi XML" nei vari riferimenti alle classi. Tutte le visualizzazioni supportano gli attributi XML della classe View di base e molte viste aggiungono i propri attributi speciali. Ad esempio, gli attributi XML TextView includono l'attributo android:inputType che puoi applicare a una visualizzazione di 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 sta nel modo in cui viene applicato: anziché applicare uno stile con l'attributo style a una vista, applichi un tema con l'attributo android:theme nel tag <application> o un tag <activity> nel file AndroidManifest.xml.

Ad esempio, ecco come applicare il tema "scuro" di Material Design di Android Support Library all'intera app:

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

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

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

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

A partire da Android 5.0 (livello API 21) e Android Support Library v22.1, puoi anche specificare l'attributo android:theme per una vista nel file di layout. In questo modo si modifica il tema della vista in questione e di tutte le viste secondarie. Questo è utile per modificare le tavolozze dei colori del tema in una parte specifica dell'interfaccia.

Gli esempi precedenti mostrano come applicare un tema, ad esempio Theme.AppCompat, fornito da Android Support Library. Tuttavia, generalmente conviene personalizzare il tema per adattarlo al brand dell'app. Il modo migliore per farlo è estendere questi stili dalla libreria di supporto e sostituire alcuni attributi, come descritto nella sezione seguente.

Gerarchia degli stili

Android offre diversi 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 vista, applicare un tema a un layout e perfino impostare gli attributi in modo programmatico.

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

  1. Applicazione di stili a livello di carattere o paragrafo utilizzando intervalli di testo alle classi derivate da TextView.
  2. Applicazione programmatica degli attributi.
  3. Applicazione di singoli attributi direttamente a una vista.
  4. Applicazione di uno stile a una vista.
  5. Stile predefinito.
  6. Applicazione di un tema a una raccolta di visualizzazioni, a un'attività o all'intera app.
  7. Applicazione di determinati stili specifici della vista, ad esempio l'impostazione di un TextAppearance su un TextView.

Figura 2. Lo stile da un span sostituisce lo stile da un textAppearance.

Aspetto del testo

Un limite degli stili è che puoi applicare un solo stile a View. In un TextView, tuttavia, puoi anche specificare un attributo TextAppearance che funzioni 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 consente di definire stili specifici per il testo lasciando lo stile di View disponibile per altri utilizzi. Tuttavia, tieni presente che se definisci attributi di testo direttamente su View o in uno stile, questi valori sostituiscono i valori di TextAppearance.

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

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

Personalizza 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 AppTheme estende un tema della libreria di assistenza e include override per gli attributi di colore utilizzati da elementi chiave dell'interfaccia utente, come la barra dell'app e il pulsante di azione mobile, se utilizzato. In questo modo, puoi personalizzare rapidamente il design dei colori della tua app aggiornando i colori forniti.

Ad esempio, il tuo 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 colore, definite nel file res/values/colors.xml del progetto. Si tratta del file che devi modificare per cambiare i colori. Consulta la panoramica sui colori di Material Design per migliorare l'esperienza utente con colori dinamici e altri colori personalizzati.

Quando 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 gli altri stili che preferisci. Ad esempio, puoi modificare il colore dello sfondo dell'attività come segue:

<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 all'indirizzo R.styleable.Theme. Quando aggiungi gli stili per le viste nel layout, puoi trovare gli attributi anche nella tabella "Attributi XML" nei riferimenti alle classi di visualizzazione. Ad esempio, tutte le viste supportano gli attributi XML della classe di base View.

La maggior parte degli attributi viene applicata a tipi specifici di visualizzazioni e alcuni si applicano a tutte le viste. Tuttavia, alcuni attributi del tema elencati in R.styleable.Theme si applicano alla finestra delle attività, non alle visualizzazioni nel layout. Ad esempio, windowBackground cambia 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 assistenza Android fornisce anche altri attributi che puoi utilizzare per personalizzare il tema esteso da Theme.AppCompat, ad esempio l'attributo colorPrimary mostrato nell'esempio precedente. La visualizzazione è ottimale nel file attrs.xml della raccolta.

Nella Libreria di supporto sono disponibili anche temi diversi che potresti voler estendere anziché quelli mostrati nell'esempio precedente. Il posto migliore per vedere i temi disponibili è il file themes.xml della libreria.

Aggiungi stili specifici per la versione

Se una nuova versione di Android aggiunge gli attributi del tema che vuoi utilizzare, puoi aggiungerli al tema mantenendo la compatibilità con le versioni precedenti. È sufficiente un altro file styles.xml salvato in una directory values che include 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 di base per poi estenderlo agli 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 tuo 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>

Poi, 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 al 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, consulta la pagina Fornire risorse alternative.

Personalizza gli stili dei widget

Ogni widget nel framework e nella libreria di supporto ha uno stile predefinito. Ad esempio, quando hai applicato uno stile alla tua app utilizzando un tema della Libreria di assistenza, lo stile di un'istanza di Button viene definito 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, di seguito viene applicato 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 nell'elemento buttonStyle del tema in questo 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, come estendendo qualsiasi altro stile, e poi applicare lo stile del widget personalizzato al layout o al tema.

Risorse aggiuntive

Per ulteriori informazioni su temi e stili, consulta le seguenti risorse aggiuntive:

Blog post