Stili e temi

Prova la funzionalità Scrivi
Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come utilizzare i temi in Scrivi.
Progettare sistemi in Compose →

Stili e temi su Android ti consentono di separare i dettagli del design della tua app dalla UI struttura e comportamento, simili ai fogli di stile nel web design.

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

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

Gli stili e i temi sono 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. Temi e gli stili hanno la stessa struttura di base: una coppia chiave-valore che mappa gli attributi a risorse.

Un style specifica gli attributi per un determinato tipo di visualizzazione. Ad esempio, uno stile potrebbe specificare gli attributi di un pulsante. Ogni attributo specificato in uno stile è un attributo che puoi impostare il file di layout. L'estrazione di tutti gli attributi in uno stile li rende facili da utilizzare e gestire su più widget.

Un tema definisce una raccolta di risorse denominate a cui è possibile fare riferimento da stili, layout, widget e così via. I temi assegnano nomi semantici, ad esempio colorPrimary, ad Android Google Cloud.

Gli stili e i 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 devi modificare gli stili, poiché gli stili 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 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. La name in ogni elemento specifica un attributo che altrimenti usi come attributo XML nelle tue layout. Il valore nell'elemento <item> è il valore di quell'attributo.

Ad esempio, supponiamo di definire lo stile seguente:

<?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 come segue:

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

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

Tuttavia, invece di applicare uno stile alle singole viste, di solito usi applicare stili come tema per l'intera app, attività o raccolta di come descritto in un'altra sezione di questa guida.

Estendi e personalizza uno stile

Quando crei i tuoi stili, espandi sempre uno stile esistente dal framework o dalla libreria di supporto per 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 eseguire l'override di stile e aggiungerne di nuovi.

Ad esempio, puoi ereditare l'aspetto del testo predefinito della piattaforma Android e modificarlo come che segue:

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

Tuttavia, eredita sempre gli stili di app di base dalla libreria di assistenza Android. Gli stili nella libreria di supporto garantiscono la 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 a quello 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 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 valore con una notazione a punti, invece di utilizzare l'attributo parent. Vale a dire, anteponi il prefisso il nome dello stile da ereditare, separato da un punto. Tu di solito lo fai solo quando estendi i tuoi stili, non quelli di altre librerie. Ad esempio: lo stile seguente eredita tutti gli stili da GreenText nell'esempio precedente e poi aumenta la dimensione 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 collegando altri nomi.

Per sapere quali attributi 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 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 EditText widget.

Applicare uno stile come tema

Puoi creare un tema nello stesso modo in cui crei gli stili. La differenza è come vengono applicati: anziché applicare uno stile con l'attributo style a una vista, applichi un tema con l'attributo android:theme nel tag <application> oppure Tag <activity> 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 supportati da quelli definiti nel tema specificato. Se una vista supporta solo alcuni degli attributi dichiarati nello stile, viene applicata 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 a una vista nel file di layout. Il tema viene modificato quella vista e qualsiasi vista figlio, il che è utile per modificare le tavolozze dei colori del tema in una vista dell'interfaccia.

Gli esempi precedenti mostrano come applicare un tema come Theme.AppCompat che sia fornita da Android Support Library. Tuttavia, generalmente conviene personalizzare il tema per adattarlo il brand della tua app. Il modo migliore per farlo è estendere questi stili dalla raccolta di supporto e override alcuni degli attributi, come descritto nella sezione seguente.

Gerarchia degli stili

Android offre diversi modi per impostare gli attributi nell'app. 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 tramite programmazione.

Quando scegli come definire lo stile dell'app, tieni presente la gerarchia degli stili di Android. In generale, utilizza temi e stili il più possibile per garantire coerenza. Se specifichi gli stessi attributi in più punti, l'elenco seguente determina quali attributi vengono applicati in ultima analisi. L'elenco è in ordine decrescente.

  1. Applicazione di stili a livello di carattere o paragrafo utilizzando intervalli di testo alle classi ricavate da TextView.
  2. Applicazione degli attributi in modo programmatico.
  3. Applicazione di singoli attributi direttamente a una visualizzazione.
  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. L'applicazione di determinati stili specifici di una vista, ad esempio l'impostazione di TextAppearance su un TextView.

Figura 2. Gli stili di un span sostituiscono quelli di 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 valore 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 un View disponibile per altri utilizzi. Tieni presente, tuttavia, che se definisci attributi di testo direttamente su 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 di paragrafo, quindi che interessano l'intero layout non sono supportati.

Personalizzare il tema predefinito

Quando crei un progetto con Android Studio, alla tua app viene applicato un tema Material Design predefinita, come definito nel file styles.xml del progetto. Questo stile di AppTheme estende un tema dalla libreria di supporto e include le sostituzioni per gli attributi colore utilizzati in base a elementi chiave dell'interfaccia utente, come la barra delle app e pulsante di azione mobile, se utilizzato. Quindi, 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 di colore, definite nel file res/values/colors.xml del progetto. Si tratta del file che devi modificare per cambiare i colori. Consulta le 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 l'attività colore sfondo:

<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 alla pagina R.styleable.Theme. Durante l'aggiunta per le visualizzazioni nel layout, puoi trovare gli attributi anche cercando la sezione "Attributi XML" nella tabella Visualizza riferimenti alla classe. 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 visualizzazioni, mentre alcuni si applicano a tutte le visualizzazioni. Tuttavia, alcuni attributi del tema elencati in R.styleable.Theme si applicano a finestra dell'attività, non le 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 Avvia 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, come l'attributo colorPrimary mostrato in dell'esempio precedente. Questi elementi sono visualizzati al meglio nel file attrs.xml della raccolta.

Nella Libreria di assistenza sono disponibili anche temi diversi che potresti voler estendere. anziché quelle mostrate nell'esempio precedente. Il posto migliore per vedere i temi disponibili è il file themes.xml della raccolta.

Aggiungi stili specifici per la versione

Se una nuova versione di Android aggiunge attributi del tema che vuoi utilizzare, puoi aggiungerli al tuo tema rimanendo compatibile con le versioni precedenti. Ti serve solo un altro file styles.xml salvato in una directory values che include versione della risorsa qualificatore:

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 estenderlo negli stili specifici della versione.

Ad esempio, per dichiarare le transizioni delle finestre per Android 5.0 (livello API 21) e versioni successive, devi avere per 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>

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 nel file manifest e il sistema seleziona gli stili disponibili per ogni versione di sistema.

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

Personalizzare gli stili dei widget

Ogni widget nel framework e nella libreria di supporto ha uno stile predefinito. Ad esempio, quando stili la tua app utilizzando un tema della raccolta Support Library, a un'istanza di Button viene applicato lo stile Widget.AppCompat.Button. Se vuoi applicare uno stile di widget diverso a un , puoi farlo con l'attributo style nel file di layout. Ad esempio, che segue 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 nel buttonStyle del tema come segue:

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

Blog post