Material Theme
Material Theme è uno stile di interfaccia utente che determina l'aspetto delle visualizzazioni e delle attività a partire da Android 5.0 (Lollipop). Il tema materiale è integrato in Android 5.0, quindi viene usato dall'interfaccia utente di sistema e dalle applicazioni. Tema materiale non è un "tema" nel senso di un'opzione di aspetto a livello di sistema che un utente può scegliere dinamicamente da un menu delle impostazioni. Il tema materiale può invece essere considerato come un set di stili di base predefiniti correlati che puoi usare per personalizzare l'aspetto della tua app.
Android offre tre tipi di tema materiale:
Theme.Material
– Versione scura del tema materiale; questo è il sapore predefinito in Android 5.0.Theme.Material.Light
– Versione leggera del tema materiale.Theme.Material.Light.DarkActionBar
– Versione chiara del tema materiale, ma con una barra delle azioni scura.
Di seguito sono riportati alcuni esempi di questi tipi di tema materiale:
È possibile derivare da Material Theme per creare un tema personalizzato, sovrascrivendo alcuni o tutti gli attributi di colore. Ad esempio, è possibile creare un tema che deriva da Theme.Material.Light
, ma sostituisce il colore della barra dell'app in modo che corrisponda al colore del marchio. È anche possibile applicare uno stile alle singole visualizzazioni; Ad esempio, è possibile creare uno stile per CardView con angoli più arrotondati e usa un colore di sfondo più scuro.
Puoi usare un singolo tema per un'intera app oppure puoi usare temi diversi per schermate diverse (attività) in un'app. Negli screenshot precedenti, ad esempio, una singola app usa un tema diverso per ogni attività per dimostrare le combinazioni di colori predefinite. I pulsanti di opzione passano l'app a diverse attività e, di conseguenza, visualizzano temi diversi.
Poiché il tema materiale è supportato solo in Android 5.0 e versioni successive, non puoi usarlo (o un tema personalizzato derivato dal tema materiale) per tema l'app per l'esecuzione in versioni precedenti di Android. Tuttavia, è possibile configurare l'app per l'uso del tema materiale nei dispositivi Android 5.0 ed eseguire normalmente il fallback a un tema precedente quando viene eseguito su versioni precedenti di Android (vedere la sezione Compatibilità di questo articolo per informazioni dettagliate).
Requisiti
Di seguito è necessario usare le nuove funzionalità del tema materiale Android 5.0 nelle app basate su Xamarin:
Xamarin.Android: Xamarin.Android 4.20 o versione successiva deve essere installato e configurato con Visual Studio o Visual Studio per Mac.
Android SDK : Android 5.0 (API 21) o versione successiva deve essere installato tramite Android SDK Manager.
Java JDK 1.8 - JDK 1.7 può essere usato se si ha come destinazione specifica il livello API 23 e versioni precedenti. JDK 1.8 è disponibile in Oracle.
Per informazioni su come configurare un progetto di app Android 5.0, vedere Configurazione di un progetto Android 5.0.
Uso dei temi predefiniti
Il modo più semplice per usare Material Theme consiste nel configurare l'app per l'uso di un tema predefinito senza personalizzazione. Se non vuoi configurare in modo esplicito un tema, l'app verrà impostata come Theme.Material
predefinita (tema scuro). Se l'app ha una sola attività, è possibile configurare un tema a livello di attività. Se l'app ha più attività, puoi configurare un tema a livello di applicazione in modo che usi lo stesso tema in tutte le attività oppure puoi assegnare temi diversi a diverse attività. Le sezioni seguenti illustrano come configurare i temi a livello di app e a livello di attività.
Tema di un'applicazione
Per configurare un'intera applicazione per l'uso di un tema materiale, impostare l'attributo android:theme
del nodo applicazione in AndroidManifest.xml su uno dei seguenti elementi:
@android:style/Theme.Material
– Tema scuro.@android:style/Theme.Material.Light
– Tema chiaro.@android:style/Theme.Material.Light.DarkActionBar
- Tema chiaro con barra delle azioni scura.
L'esempio seguente configura l'applicazione MyApp per l'uso del tema chiaro:
<application android:label="MyApp"
android:theme="@android:style/Theme.Material.Light">
</application>
In alternativa, è possibile impostare l'attributo dell'applicazione Theme
in AssemblyInfo.cs (o Properties.cs). Ad esempio:
[assembly: Application(Theme="@android:style/Theme.Material.Light")]
Quando il tema dell'applicazione è impostato su @android:style/Theme.Material.Light
, ogni attività in MyApp verrà visualizzata usando Theme.Material.Light
.
Tema di un'attività
Per assegnare un tema a un'attività, aggiungere un'impostazione Theme
all'attributo [Activity]
sopra la dichiarazione di attività e assegnare Theme
al sapore del tema materiale che si vuole usare. Nell'esempio seguente viene temata un'attività con Theme.Material.Light
:
[Activity(Theme = "@android:style/Theme.Material.Light",
Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]
Altre attività in questa app useranno la combinazione di colori scura predefinita Theme.Material
(o, se configurata, l'impostazione del tema dell'applicazione).
Uso di temi personalizzati
Puoi migliorare il tuo marchio creando un tema personalizzato che stili la tua app con i colori del tuo marchio. Per creare un tema personalizzato, definisci un nuovo stile che deriva da un tema materiale predefinito, ignorando gli attributi di colore che vuoi modificare. Ad esempio, è possibile definire un tema personalizzato che deriva da Theme.Material.Light.DarkActionBar
e modifica il colore di sfondo dello schermo in beige anziché in bianco.
Material Theme espone gli attributi di layout seguenti per la personalizzazione:
colorPrimary
: colore della barra dell'app.colorPrimaryDark
– Colore della barra di stato e delle barre contestuali dell'app; si tratta in genere di una versione scura dicolorPrimary
.colorAccent
: colore dei controlli dell'interfaccia utente, ad esempio caselle di controllo, pulsanti di opzione e caselle di testo di modifica.windowBackground
: colore dello sfondo dello schermo.textColorPrimary
: colore del testo dell'interfaccia utente nella barra dell'app.statusBarColor
: colore della barra di stato.navigationBarColor
: colore della barra di spostamento.
Queste aree dello schermo sono etichettate nel diagramma seguente:
Per impostazione predefinita, statusBarColor
è impostato sul valore di colorPrimaryDark
. È possibile impostare statusBarColor
su un colore a tinta unita oppure impostarlo su per @android:color/transparent
rendere trasparente la barra di stato. La barra di spostamento può anche essere resa trasparente impostando navigationBarColor
su @android:color/transparent
.
Creazione di un tema dell'app personalizzata
È possibile creare un tema dell'app personalizzato creando e modificando i file nella cartella Risorse del progetto dell'app. Per applicare uno stile all'app con un tema personalizzato, seguire questa procedura:
- Creare un file colors.xml in Risorse/valori . Questo file viene usato per definire i colori del tema personalizzati. Ad esempio, è possibile incollare il codice seguente in colors.xml per iniziare:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<color name="my_blue">#3498DB</color>
<color name="my_green">#77D065</color>
<color name="my_purple">#B455B6</color>
<color name="my_gray">#738182</color>
</resources>
Modificare questo file di esempio per definire i nomi e i codici colore per le risorse colore che verranno usate nel tema personalizzato.
Creare una cartella Resources/values-v21 . In questa cartella creare un file styles.xml :
Si noti che Resources/values-v21 è specifico di Android 5.0: le versioni precedenti di Android non leggeranno i file in questa cartella.
Aggiungere un
resources
nodo per styles.xml e definire unstyle
nodo con il nome del tema personalizzato. Ecco ad esempio un file styles.xml che definisce MyCustomTheme (derivato dallo stile del tema predefinitoTheme.Material.Light
):
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<!-- Inherit from the light Material Theme -->
<style name="MyCustomTheme" parent="android:Theme.Material.Light">
<!-- Customizations go here -->
</style>
</resources>
A questo punto, un'app che usa MyCustomTheme visualizzerà il tema azionario
Theme.Material.Light
senza personalizzazioni:Aggiungere personalizzazioni dei colori a styles.xml definendo i colori degli attributi di layout da modificare. Ad esempio, per modificare il colore
my_blue
della barra dell'app in e modificare il colore dei controlli dell'interfaccia utente inmy_purple
, aggiungere sostituzioni dei colori a styles.xml che fanno riferimento alle risorse colore configurate in colors.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<!-- Inherit from the light Material Theme -->
<style name="MyCustomTheme" parent="android:Theme.Material.Light">
<!-- Override the app bar color -->
<item name="android:colorPrimary">@color/my_blue</item>
<!-- Override the color of UI controls -->
<item name="android:colorAccent">@color/my_purple</item>
</style>
</resources>
Con queste modifiche apportate, un'app che usa MyCustomTheme visualizzerà un colore della barra dell'app nei controlli e dell'interfaccia utente in my_blue
my_purple
, ma usa la Theme.Material.Light
combinazione di colori ovunque:
In questo esempio MyCustomTheme prende in prestito i colori da Theme.Material.Light
per il colore di sfondo, la barra di stato e i colori del testo, ma modifica il colore della barra my_blue
dell'app su e imposta il colore del pulsante di opzione su my_purple
.
Creazione di uno stile di visualizzazione personalizzato
Android 5.0 consente anche di applicare uno stile a una singola visualizzazione. Dopo aver creato colors.xml e styles.xml (come descritto nella sezione precedente), è possibile aggiungere uno stile di visualizzazione a styles.xml. Per applicare uno stile a una singola visualizzazione, seguire questa procedura:
- Modificare Resources/values-v21/styles.xml e aggiungere un
style
nodo con il nome dello stile di visualizzazione personalizzato. Impostare gli attributi di colore personalizzati per la visualizzazione all'interno di questostyle
nodo. Ad esempio, per creare uno stile CardView personalizzato con angoli più arrotondatimy_blue
e usa come colore di sfondo della scheda, aggiungere unstyle
nodo a styles.xml (all'interno delresources
nodo) e configurare il colore di sfondo e il raggio dell'angolo:
<!-- Theme an individual view: -->
<style name="CardView.MyBlue">
<!-- Change the background color to Xamarin blue: -->
<item name="cardBackgroundColor">@color/my_blue</item>
<!-- Make the corners very round: -->
<item name="cardCornerRadius">18dp</item>
</style>
- Nel layout impostare l'attributo
style
per tale visualizzazione in modo che corrisponda al nome dello stile personalizzato scelto nel passaggio precedente. Ad esempio:
<android.support.v7.widget.CardView
style="@style/CardView.MyBlue"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal">
Lo screenshot seguente fornisce un esempio del valore predefinito CardView
(visualizzato a sinistra) rispetto a un CardView
oggetto con lo stile con il tema personalizzato CardView.MyBlue
(visualizzato a destra):
In questo esempio, l'oggetto personalizzato CardView
viene visualizzato con il colore my_blue
di sfondo e un raggio dell'angolo 18dp.
Compatibilità
Per applicare uno stile all'app in modo che usi tema materiale in Android 5.0, ma ripristina automaticamente uno stile compatibile verso il basso nelle versioni precedenti di Android, seguire questa procedura:
- Definire un tema personalizzato in Resources/values-v21/styles.xml che deriva da uno stile tema materiale. Ad esempio:
<resources>
<style name="MyCustomTheme" parent="android:Theme.Material.Light">
<!-- Your customizations go here -->
</style>
</resources>
- Definire un tema personalizzato in Risorse/valori/styles.xml che deriva da un tema precedente, ma usa lo stesso nome del tema indicato in precedenza. Ad esempio:
<resources>
<style name="MyCustomTheme" parent="android:Theme.Holo.Light">
<!-- Your customizations go here -->
</style>
</resources>
- In AndroidManifest.xml configurare l'app con il nome del tema personalizzato. Ad esempio:
<application android:label="MyApp"
android:theme="@style/MyCustomTheme">
</application>
- In alternativa, è possibile applicare uno stile a un'attività specifica usando il tema personalizzato:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]
Se il tema usa colori definiti in un file di colors.xml, assicurarsi di inserire questo file in Risorse/valori (anziché Resources/values-v21) in modo che entrambe le versioni del tema personalizzato possano accedere alle definizioni dei colori.
Quando l'app viene eseguita in un dispositivo Android 5.0, userà la definizione del tema specificata in Resources/values-v21/styles.xml. Quando questa app viene eseguita su dispositivi Android meno recenti, eseguirà automaticamente il fallback alla definizione del tema specificata in Risorse/valori/styles.xml.
Per altre informazioni sulla compatibilità dei temi con le versioni precedenti di Android, vedere Risorse alternative.
Riepilogo
Questo articolo ha introdotto il nuovo stile dell'interfaccia utente Material Theme incluso in Android 5.0 (Lollipop). Descrive i tre tipi di tema materiale predefiniti che puoi usare per applicare lo stile alla tua app, ha spiegato come creare un tema personalizzato per personalizzare la tua app e ha fornito un esempio di come tema di una singola visualizzazione. Infine, questo articolo ha spiegato come usare il tema materiale nella tua app mantenendo al contempo la compatibilità verso il basso con le versioni precedenti di Android.