Stili e temi

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come utilizzare i temi in Compose.

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

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

Un tema è una raccolta di attributi applicati a un'intera app, attività o gerarchia delle viste, non solo a una singola vista. Quando applichi un tema, ogni visualizzazione nell'app o nell'attività applica ciascuno degli attributi del tema che supporta. I temi consentono anche di applicare gli stili a elementi non di visualizzazione, ad esempio 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/, di solito denominato styles.xml.

Figura 1. Due temi applicati alla stessa attività: Theme.AppCompat (sinistra) e Theme.AppCompat.Light (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 style specifica gli attributi per un determinato 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 di uno stile ne semplifica l'uso e la gestione in più widget.

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

Stili e temi sono pensati per integrarsi. 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 entra in modalità notturna, l'app può passare dal tema "chiaro" al tema "scuro", modificando i valori di tutti i nomi delle risorse. Non è necessario modificare gli stili, poiché utilizzano i nomi semantici e non specifiche definizioni di colore.

Per ulteriori informazioni sull'interazione tra 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 tuo progetto. Per ogni stile che vuoi creare:

  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 verrà utilizzato come attributo XML nel tuo layout. Il valore nell'elemento <item> è il valore dell'attributo.

Ad esempio, supponi 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 vista nel seguente modo:

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

Ogni attributo specificato nello stile viene applicato a quella vista, se la accetta. La vista ignora gli attributi non accettati.

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

Estendi e personalizza uno stile

Quando crei i tuoi stili, estendi sempre uno stile esistente dal framework o dalla libreria di assistenza, 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, eredita sempre gli stili delle app principali dalla libreria di assistenza Android. Gli stili nella libreria di supporto forniscono compatibilità ottimizzando ogni stile per gli attributi dell'interfaccia utente disponibili in ogni versione. Gli stili della libreria di assistenza hanno spesso 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, l'esempio seguente eredita gli stili di aspetto del testo dalla libreria di supporto:

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

Puoi anche ereditare gli stili, ad eccezione di quelli provenienti dalla piattaforma, estendendo il nome di uno stile con una notazione punto anziché utilizzare l'attributo parent. Vale a dire, fai precedere il nome dello stile da quello da ereditare, separato da un punto. In genere questa operazione viene eseguita solo quando si estendono i propri stili, non quelli di altre librerie. Ad esempio, il seguente stile eredita tutti gli stili da GreenText nell'esempio precedente, 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 eseguendo il concatenamento su più nomi.

Per individuare gli attributi che puoi dichiarare con un tag <item>, consulta la tabella "Attributi XML" nei vari riferimenti alle classi. Tutte le viste supportano gli attributi XML della classe View di base, mentre molte viste aggiungono attributi speciali. Ad esempio, gli attributi XML di TextView includono l'attributo android:inputType che puoi applicare a una visualizzazione di testo che riceve input, come 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 lo applichi: invece di applicare uno stile con l'attributo style in una vista, applichi un tema con l'attributo android:theme nel tag <application> o in un tag <activity> nel file AndroidManifest.xml.

Ad esempio, ecco come applicare il tema "scuro" di Material Design della libreria di assistenza 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 supportati rispetto a quelli definiti nel tema specificato. Se una vista supporta solo alcuni degli attributi dichiarati nello stile, vengono applicati solo questi attributi e vengono ignorati 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 visualizzazione nel file di layout. Il tema viene modificato per quella vista e le eventuali visualizzazioni secondarie, il che è utile per modificare le tavolozze dei colori del tema in una porzione specifica dell'interfaccia.

Gli esempi precedenti mostrano come applicare un tema, ad esempio Theme.AppCompat, fornito da Android Support Library. In genere, però, è consigliabile 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, un tema a un layout e persino impostare gli attributi in modo programmatico.

Quando scegli lo stile della tua app, tieni presente la gerarchia dello stile di Android. In generale, usa temi e stili il più possibile per ottenere coerenza. Se specifichi gli stessi attributi in più punti, 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 di attributi in modo programmatico.
  3. Applicazione diretta di singoli attributi a una vista.
  4. Applicazione di uno stile a una vista.
  5. Stili predefiniti.
  6. Applicazione di un tema a una raccolta di visualizzazioni, a un'attività o all'intera app.
  7. Applicazione di determinati stili specifici per le visualizzazioni, ad esempio l'impostazione di un elemento TextAppearance su un elemento TextView.

Figura 2. Lo stile di un elemento span sostituisce quello di un elemento textAppearance.

Aspetto del testo

Un limite degli stili è che puoi applicare un solo stile a un View. Tuttavia, in TextView puoi specificare anche 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 del testo, lasciando lo stile di un elemento View disponibile per altri utilizzi. Tuttavia, tieni presente che se definisci attributi di testo direttamente in 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 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.

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 tuo progetto. Questo stile AppTheme estende un tema della libreria di supporto 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 a questo:

<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 modifichi per cambiare i colori. Consulta la panoramica sui colori di Material Design per migliorare l'esperienza utente con colori dinamici e colori personalizzati aggiuntivi.

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 qualsiasi altro stile che preferisci. 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 di attributi da utilizzare nel tema, consulta la tabella degli attributi alla pagina R.styleable.Theme. Quando aggiungi gli stili per le viste nel layout, puoi trovare gli attributi anche osservando la tabella "Attributi XML" nei riferimenti alle classi delle visualizzazioni. Ad esempio, tutte le viste supportano gli attributi XML della classe View di base.

La maggior parte degli attributi viene applicata a tipi specifici di viste, mentre alcuni si applicano a tutte le viste. Tuttavia, alcuni attributi dei temi elencati in R.styleable.Theme si applicano alla finestra dell'attività, non alle visualizzazioni nel layout. Ad esempio, windowBackground cambia lo sfondo della finestra e windowEnterTransition definisce un'animazione di transizione da utilizzare quando inizia l'attività. Per maggiori dettagli, consulta Avviare un'attività utilizzando un'animazione.

La libreria di assistenza Android fornisce anche altri attributi che puoi usare per personalizzare il tuo tema esteso a partire da Theme.AppCompat, ad esempio l'attributo colorPrimary mostrato nell'esempio precedente. La visualizzazione migliore è nel file attrs.xml della libreria.

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

Aggiungi stili specifici della versione

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

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 ereditare. Ciò significa che puoi evitare di duplicare gli stili iniziando con un tema "di 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. Di conseguenza, 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 maggiori informazioni sull'utilizzo di risorse alternative per i diversi dispositivi, consulta Fornire risorse alternative.

Personalizza gli stili dei widget

Ogni widget nel framework e nella libreria di supporto ha uno stile predefinito. Ad esempio, quando lo stile della tua app viene utilizzato con un tema della libreria di assistenza, a un'istanza di Button viene applicato 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, quanto segue applica lo stile del pulsante senza bordo della libreria:

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

Se vuoi applicare questo stile a tutti i pulsanti, puoi dichiararlo nell'elemento buttonStyle del tuo 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, come estendere qualsiasi altro stile, e poi applicare lo stile personalizzato del widget al tuo layout o tema.

Risorse aggiuntive

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

Post sui blog