Material Theme

Articolo
03/05/2024

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 di colorPrimary.
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 un style nodo con il nome del tema personalizzato. Ecco ad esempio un file styles.xml che definisce MyCustomTheme (derivato dallo stile del tema predefinito Theme.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 in my_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_bluemy_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 questo style nodo. Ad esempio, per creare uno stile CardView personalizzato con angoli più arrotondati my_blue e usa come colore di sfondo della scheda, aggiungere un style nodo a styles.xml (all'interno del resources 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.