Eseguire la migrazione dei temi XML a Material 3 in Compose

Quando introduci Compose in un'app esistente, devi eseguire la migrazione dei temi XML Material per utilizzare MaterialTheme per i componenti Compose. Ciò significa che i temi della tua app avranno due fonti di riferimento: il tema basato su View e il tema Compose. Eventuali modifiche allo stile devono essere apportate in più posizioni. Una volta eseguita la migrazione completa dell'app a Compose, rimuovi i temi XML.

Puoi utilizzare lo strumento Material Theme Builder per la migrazione dei colori.

Quando avvii la migrazione da XML a Compose, esegui la migrazione dei temi al tema Material 3 Compose.

Glossario

Termine Definizione
MaterialTheme La funzione componibile che fornisce i temi (colori, tipografia, forme) ai componenti UI di Compose.
Shape Un oggetto Compose utilizzato per definire forme di componenti personalizzati per un MaterialTheme.
Typography Un oggetto Compose utilizzato per definire stili di testo personalizzati (famiglie di caratteri, dimensioni, pesi) per un MaterialTheme.
Color Un oggetto Compose utilizzato per definire combinazioni di colori personalizzate per MaterialTheme.
Tema XML Il sistema di temi Android definito nei file XML, utilizzato dal sistema di visualizzazione.

Limitazioni

Prima della migrazione, tieni presente le seguenti limitazioni:

  • Questa guida si concentra solo sulla migrazione a Material 3. Per la migrazione da sistemi di progettazione alternativi, vedi Material 2 o Sistemi di progettazione personalizzati in Compose.
  • L'obiettivo finale è una migrazione completa a Compose, che consente la rimozione dei temi XML. Questa guida spiega come eseguire la migrazione, ma non spiega come rimuovere definitivamente i temi XML.

Passaggio 1: valuta il sistema di progettazione

Identifica il sistema di progettazione utilizzato nel progetto XML View. Analizza il percorso di migrazione e i passaggi necessari per eseguire la migrazione del sistema di progettazione esistente a Material 3 in Compose.

Passaggio 2: identifica i file di origine del tema

Identifica e individua tutte le risorse e i file XML necessari per la creazione di temi: schemi di colori chiari e scuri, temi, forme, dimensioni, tipografia, stili e altri file pertinenti.

Le risorse come le stringhe possono essere riutilizzate così come sono e non devono essere migrate.

Passaggio 3: esegui la migrazione dei colori

Esegui la migrazione delle combinazioni di colori scuri e chiari da XML ai relativi equivalenti in Material 3 Compose.

Passaggio 4: esegui la migrazione di forme e tipografia personalizzate

  • Se la tua app utilizza forme personalizzate:

    1. Nel codice Compose, definisci un oggetto Shape per replicare le definizioni della forma XML.

    2. Fornisci questo oggetto Shape al tuo MaterialTheme.

      Per maggiori dettagli, vedi Forme.

  • Se la tua app utilizza una tipografia personalizzata:

    1. Nel codice Compose, definisci un oggetto Typography per replicare gli stili di testo e le definizioni dei caratteri XML.

    2. Fornisci questo oggetto Typography al tuo MaterialTheme.

      Per ulteriori dettagli, consulta la sezione Tipografia.

Passaggio 5: convalida la migrazione del tema

Utilizza sempre i valori del tema esistenti del tema XML originale come fonte di riferimento per il nuovo tema Material in Compose. Non inventare mai nuovi valori del tema durante la migrazione, per mantenere la coerenza del brand ed evitare regressioni visive.

Verifica che tutti i nuovi valori del tema Compose corrispondano ai valori XML esistenti. Non codificare i valori migrati.