1. Prima di iniziare
In questo codelab, aggiornerai l'app iniziale, un'app per il calcolo della mancia, per utilizzare le nuove funzionalità di Material Design 3 che consentono di applicare temi dinamici all'interfaccia utente di un'applicazione in base allo sfondo dell'utente. Di seguito sono riportati alcuni screenshot dell'applicazione con il colore dinamico applicato. Esamineremo anche alcuni scenari aggiuntivi che ti consentono di controllare la modalità di applicazione dei colori.
Prerequisiti
Gli sviluppatori devono
- Familiarità con i concetti di base dei temi in Android
- Avere familiarità con la modifica del tema di un'app
Obiettivi didattici
- Come distinguere i componenti Material esistenti dai temi Material 3
- Come aggiornare un tema a Material 3
- Come creare temi utilizzando i nostri strumenti e applicarli
- Come si relazionano tra loro gli attributi del tema
Che cosa ti serve
- Un computer su cui è installato Android Studio.
- Codice per l'applicazione Tip Time. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Panoramica dell'app di base
L'app Tip Time è una calcolatrice per mance con opzioni per personalizzare la mancia. È una delle app di esempio del nostro corso di formazione Android Basics in Kotlin.
3. Aggiornamento delle dipendenze di Gradle
Prima di aggiornare il tema effettivo e applicare il colore dinamico, è necessario apportare alcune modifiche al file build.gradle per l'applicazione.
Nella sezione delle dipendenze, assicurati che la libreria Material sia 1.5.0-alpha04 o versioni successive:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
Nella sezione Android, modifica compileSdkVersion e targetSdkVersion.
al 31 o a una data successiva:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
Queste istruzioni presuppongono un'app con dipendenze relativamente recenti. Per un'app che non utilizza già Material o una versione meno recente, consulta le istruzioni nella documentazione Guida introduttiva dei componenti Material Design per Android.
Ovunque tu abbia creato i temi, modifica i riferimenti a Theme.MaterialComponents.* con Theme.Material3.*. Alcuni stili non hanno ancora un nuovo stile nello spazio dei nomi Material3, ma la maggior parte dei componenti erediterà comunque il nuovo stile una volta che il tema principale sarà aggiornato a Theme.Material3.*. Come puoi vedere di seguito, i pulsanti ora hanno il nuovo tema arrotondato.
Nel file dei temi riportato di seguito, l'unica cosa che è stata modificata è il tema principale. Tra poco sostituiremo completamente questo tema. Alcuni attributi di colore sono stati ritirati e alcuni degli stili personalizzati che abbiamo creato sono ora standard in Material3, ma volevamo che tu avessi
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Informazioni sui temi di colore e sui ruoli dei colori
Il sistema di colori Material 3 utilizza un approccio organizzato per applicare i colori all'interfaccia utente. Alcuni attributi di Theme.AppCompat sono ancora in uso. Tuttavia, in Theme.MaterialComponents.* sono stati aggiunti altri attributi e in Theme.Material3.* altri ancora, quindi è importante esaminare tutte le schermate dell'app per assicurarsi che non vengano visualizzate proprietà non implementate dal tema di base.
Informazioni sui ruoli dei colori
In un tema Material 3 sono presenti oltre 20 attributi correlati al colore. All'inizio può sembrare scoraggiante, ma in realtà ci sono alcuni colori chiave che si combinano con gli stessi 4-5 ruoli di colore per creare colori derivati.
Questi gruppi di colori sono:
- Principale, il colore principale della tua app
- Secondario, il colore secondario della tua app
- Terziario, un terzo colore complementare a Primario e Secondario
- Errore, utilizzato per il testo e le finestre di dialogo di errore
- Sfondo
- Superficie, Variante superficie, Inversa superficie
I ruoli sono i seguenti per Primario, Secondario, Terziario ed Errore:
<base color> | Il colore di base |
on<base color> | il colore delle icone e del testo visualizzati sul colore di base |
<base color>Container | derivato dal colore di base, utilizzato per pulsanti, finestre di dialogo e così via |
on<base color>Container | il colore delle icone e del testo sul contenitore |
Ad esempio, un pulsante di azione rapida con stile predefinito in Material 3 utilizza Primary come colore di base, quindi utilizza primaryContainer per il colore di sfondo del pulsante e onPrimaryContainer per i suoi contenuti.
Quando personalizzi un tema manualmente, devi almeno verificare che l'attributo on<base color> per ogni colore di base che modifichi sia ancora leggibile.
Le best practice prevedono di modificare tutti i ruoli in un gruppo di colori contemporaneamente per garantire che non ci siano artefatti dalla base all'app.
Lo sfondo e i colori di base di Surface hanno generalmente due ruoli: per il colore di base stesso e on<base color> per le icone o il testo che vi appaiono sopra.
5. Creare un tema Material 3 con Material Theme Builder
Material Theme Builder semplifica la creazione di una combinazione di colori personalizzata, l'utilizzo dell'esportazione di codice integrata per la migrazione al sistema di colori M3 e l'utilizzo del colore dinamico. Scopri di più material.io/material-theme-builder
Il tema dell'app Tip Time contiene diversi stili per i componenti, ma la maggior parte degli stili sono predefiniti nei temi Material 3. Gli unici due colori chiave di cui dobbiamo occuparci sono il colore principale e quello secondario.
Questi corrispondono a un colore primario verde (#1B5E20) e a un colore secondario blu (#0288D1).
Puoi inserire questi colori in Material Theme Builder ed esportare un tema completo (supponendo un link a una panoramica completa altrove).
Tieni presente che i colori inseriti potrebbero cambiare tonalità per adattarsi all'algoritmo di generazione dei colori e garantire colori complementari e leggibili.
Di seguito è riportato un sottoinsieme dei valori generati quando inserisci colori personalizzati.
6. Utilizzare i file di esportazione di Material Theme Builder
L'archivio di esportazione contiene le directory values e values-night/ con il proprio file themes.xml, corrispondenti ai temi chiaro e scuro. Tutti i colori sono definiti in values/colors.xml.
I file possono essere copiati così come sono, ma dovrai modificare il nome del tema in AndroidManifest.xml o nei file del tema in modo che corrispondano. Il nome predefinito degli strumenti è AppTheme.
Riavvia l'app e vedrai che è quasi identica. Una modifica degna di nota riguarda i controlli Switch e RadioButton, i cui stati selezionati ora sono tematizzati con tonalità del colore principale anziché con colori secondari. Nelle applicazioni più grandi, potresti dover rivedere alcuni design.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Aggiunta del colore dinamico
Con un tema Material 3 in uso, possiamo rendere dinamica la UI con un paio di piccole aggiunte.
L'API Dynamic Colors ti consente di applicare il colore dinamico a tutte le attività
in un'app, in singole attività o in singole visualizzazioni o frammenti. Per
applicheremo il colore dinamico a livello globale.
Crea un file della classe Application
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Dobbiamo fare riferimento a questo file appena creato nel manifest Android:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Sui sistemi Android 12 e versioni successive, lo sfondo dell'utente per lo schema predefinito viene esaminato per generare diverse tavolozze tonali. I valori di queste tavolozze vengono utilizzati per creare un ThemeOverlay.
La classe DynamicColors registra un ActivityLifecycleCallbacks che intercetta ActivityPreCreated per applicare l'overlay del tema dinamico creato dal sistema o quello che hai fornito.
8. Applicare una sovrapposizione di tema personalizzato
I nostri strumenti possono esportare le sovrapposizioni dei temi, ma puoi anche crearle manualmente se esegui l'override di un numero ridotto di attributi.
Un overlay del tema deve essere utilizzato insieme a un altro tema e fornisce solo i valori che verranno modificati in aggiunta al tema di base.
Supponiamo che per qualche motivo, magari per il branding, abbiamo bisogno che i toni del colore principale siano sfumature di rosso. Potremmo farlo con i seguenti file e attributi.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
Per il codice riportato sopra, Android 12 applicherà un tema chiaro dinamico e sovrapporrà le modifiche. In alternativa, puoi utilizzare qualsiasi overlay valido come overlay principale, incluso uno dei seguenti:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Per utilizzare questo overlay del tema anziché quello predefinito di Material, modifica la chiamata a DynamicColors.applyToActivitiesIfAvailable in:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Aggiunta di colori dinamici agli attributi personalizzati
Finora abbiamo sostituito le proprietà già esistenti in un tema Material 3. Abbiamo un altro possibile caso nel colore dinamico in cui potremmo avere uno o più attributi personalizzati da allocare.
Quando un'app attiva il colore dinamico, ottiene l'accesso a cinque tavolozze tonali: tre tavolozze di accenti e due tavolozze neutre con i seguenti ruoli approssimativi:
system_accent1 | Tonalità del colore principale |
system_accent2 | Tonalità del colore secondario |
system_accent3 | Tonalità di colore terziarie |
system_neutral1 | Sfondi e superfici neutri |
system_neutral2 | Superfici e contorni neutri |
Ogni tavolozza ha un numero di passaggi tonali che vanno dal bianco
a nero: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Quando progetti un'interfaccia utente per il colore dinamico, devi pensare meno al colore specifico e più alla relazione tra la tonalità e la luminanza di quel componente e quelle degli altri elementi del sistema di progettazione.
Supponiamo che tu voglia che le icone siano a tema utilizzando la tavolozza dei colori secondari e che tu abbia aggiunto un attributo per colorare le icone con la seguente voce in attrs.xml.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
La sovrapposizione del tema potrebbe avere il seguente aspetto:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Quando reinstalli l'app e cambi lo sfondo, l'app rileva la tavolozza secondaria.
Queste tavolozze sono specifiche di Android 12 (API 31), quindi dovrai inserire i file pertinenti in cartelle con il suffisso -v31, a meno che l'SDK minimo della tua app non sia impostato su 31 o versioni successive.
10. Riepilogo
In questo codelab hai potuto:
- Aggiungi dipendenze per eseguire l'upgrade del tema a Material 3.
- Informazioni sui nuovi gruppi di colori e ruoli.
- Scopri come eseguire la migrazione da un tema statico al colore dinamico.
- Scopri come utilizzare le sovrapposizioni dei temi e il colore dinamico per gli attributi dei temi personalizzati.