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 l'attività applica ogni attributo del tema supportato. I temi possono anche applicare stili che non consentono di visualizzare, ad esempio 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
.
![](https://developer.android.com/static/training/material/images/material-themes_2x.png?authuser=0000&hl=it)
Figura 1. Due temi applicati alla stessa attività:
Theme.AppCompat
(sinistra) e Theme.AppCompat.Light
(destra).
Temi e stili
I temi e gli stili presentano 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.
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 il file di layout. L'estrazione di tutti gli attributi in uno stile semplifica il loro utilizzo e la loro gestione su 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
, ad Android
Google Cloud.
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
Se il dispositivo passa alla modalità notturna, l'app può passare dalla modalità "Luce" tema "scuro" tema,
e modificare 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, 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
per ogni stile che vuoi creare:
- Aggiungi un elemento
<style>
con un nome che identifichi lo stile in modo univoco. - Aggiungi un elemento
<item>
per ogni attributo di stile che vuoi definire. Laname
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 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 vista ignora gli attributi non accettati.
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 personalizzati, estendi sempre uno stile esistente dal framework o dall'assistenza
libreria in modo da mantenere la compatibilità con gli stili dell'interfaccia utente della piattaforma. Per estendere uno stile, specifica
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, puoi sempre ereditare gli stili principali delle app da Android Support Library. Gli stili nel
La libreria di supporto fornisce compatibilità ottimizzando ogni stile per gli attributi UI disponibili in
ciascuna 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 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 concatenando altri i nomi degli utenti.
Per trovare gli attributi che puoi dichiarare con un tag <item>
, consulta la sezione
attributi" nei vari riferimenti alle classi. Supporto per tutte le visualizzazioni
Attributi XML dalla base
View
e molte visualizzazioni aggiungono attributi speciali. Ad esempio,
TextView
attributi XML
includi il
android:inputType
che puoi applicare a una visualizzazione di testo che riceve input, come
widget EditText
.
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 Material Design della libreria di assistenza Android "scuro" tema su dell'intera app:
<manifest ... > <application android:theme="@style/Theme.AppCompat" ... > </application> </manifest>
Ecco come applicare la "luce" tema 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 nei un determinato tema. 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, solitamente conviene personalizzare il tema per adattarlo
il brand della tua app. Il modo migliore per farlo è estendere questi stili dalla libreria di supporto e
eseguire l'override di alcuni attributi, come descritto nella sezione che segue.
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 e persino 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 maggior numero possibile di 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 è in ordine decrescente.
- Applicazione di stili a livello di carattere o paragrafo utilizzando intervalli di testo a derivati da
TextView
. - Applicazione programmatica degli attributi.
- Applicazione di singoli attributi direttamente a una vista.
- Applicazione di uno stile a una vista.
- Stile predefinito.
- Applicazione di un tema a una raccolta di visualizzazioni, a un'attività o all'intera app.
- L'applicazione di determinati stili specifici di una vista, ad esempio l'impostazione di
TextAppearance
su unTextView
.
![](https://developer.android.com/static/guide/topics/ui/images/text-multiple-styles.png?authuser=0000&hl=it)
Figura 2. Lo stile da un span
sostituisce lo stile di una
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 lo stile specifico del testo senza modificare lo stile di un
View
disponibile per altri utilizzi. Ricorda, tuttavia, che se definisci attributi di testo
direttamente in View
o in uno stile, questi valori sostituiscono il valore
TextAppearance
valori.
TextAppearance
supporta un sottoinsieme di attributi di stile che TextView
offerte. 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.
Personalizza 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 altri
risorse colore, definite nel
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
Attributi XML dalla 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 a
finestra dell'attività, non le visualizzazioni nel layout. Ad esempio, windowBackground
cambia il valore
sfondo della finestra e windowEnterTransition
definisce un'animazione di transizione da utilizzare quando
inizia l'attività. Per ulteriori dettagli, consulta Inizia
un'attività che utilizza 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. Si tratta di una visualizzazione ottimale
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 modo 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 gli attributi del tema che vuoi utilizzare, puoi aggiungerli al tema
pur mantenendo la compatibilità 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
duplicando gli stili iniziando con una "base" ed estenderlo a un tema specifico per la tua versione
stili.
Ad esempio, per dichiarare le transizioni delle finestre per Android 5.0 (livello API 21) e versioni successive, devi avere
per utilizzare nuovi attributi. Quindi, il tuo tema di base in res/values/styles.xml
può avere il seguente aspetto
questo:
<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, vedi Fornire risorse alternative.
Personalizza gli stili dei widget
Ogni widget nel framework e nella libreria di supporto ha uno stile predefinito. Ad esempio, quando
Definisci lo stile della tua app utilizzando un tema della Libreria di supporto, un'istanza di
Lo stile di Button
è impostato tramite
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 campo
buttonStyle
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 estendere 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
- Stili Android: temi e stili
- Stile Android: attributi comuni del tema
- Stile Android: preferisci gli attributi del tema