Consenti agli utenti di personalizzare la loro esperienza cromatica nella tua app

Prova la funzionalità Scrivi
Jetpack Compose è il toolkit per l'interfaccia utente consigliato per Android. Scopri come utilizzare il colore dinamico in Scrivi.

Il colore dinamico, aggiunto in Android 12, consente agli utenti di personalizzare i propri dispositivi in modo che siano in linea con la combinazione di colori dello sfondo personale o di un colore selezionato nel selettore di sfondi.

Puoi sfruttare questa funzionalità aggiungendo l'API DynamicColors, che applica questo tema alla tua app o attività per renderla più personalizzata per l'utente.

Figura 1. Esempi di combinazioni di colori tonali ricavate da sfondi diversi

Questa pagina include le istruzioni per implementare i colori dinamici nella tua app. Questa funzionalità è disponibile anche separatamente per widget e icone adattabili, come descritto più avanti in questa pagina. Puoi anche provare il codelab.

Come Android crea le combinazioni di colori

Android esegue i seguenti passaggi per generare combinazioni di colori dalla schermata iniziale di un utente.

  1. Il sistema rileva i colori principali nell'immagine di sfondo selezionata ed estrae un colore di origine.

  2. Il sistema utilizza questo colore di origine per estrapolare ulteriormente cinque colori chiave noti come Principale, Secondario, Terziario, Neutro e Variante neutra.

    Esempio di estrazione del colore di origine
    Figura 2. Esempio di estrazione del colore di origine dall'immagine di sfondo ed estrazione in cinque colori chiave
  3. Il sistema interpreta ogni colore chiave in una tavolozza di 13 tonalità.

    Esempio di generazione di una determinata tavolozza di tonalità
    Figura 3. Esempio di generazione di una determinata tavolozza di tonalità
  4. Il sistema utilizza questo singolo sfondo per ricavare cinque diverse combinazioni di colori, che costituiscono la base per qualsiasi tema chiaro e scuro.

Come vengono visualizzate le varianti di colore sul dispositivo di un utente

A partire da Android 12, gli utenti possono selezionare le varianti di colore tra i colori estratti dallo sfondo e temi diversi, con altre varianti aggiunte in Android 13. Ad esempio, un utente con uno smartphone Pixel con Android 13 seleziona una variante dalle impostazioni Sfondo e stile, come mostrato nella figura 4.

Figura 4. Selezionare le varianti di colore nelle impostazioni dello sfondo (mostrate su un Pixel)

Android 12 ha aggiunto la variante Tonal Spot, seguita da Neutro, Tonal Vibrante e Espressivo in Android 13. Ogni variante ha una ricetta unica che trasforma i colori di base dello sfondo di un utente tramite la saturazione e la rotazione della tonalità. L'esempio seguente mostra una singola combinazione di colori expressed through these four color variants.

Figura 5. Esempio di come appaiono le diverse varianti di colore su un singolo dispositivo

L'app utilizza ancora gli stessi token per accedere a questi colori. Per informazioni dettagliate sui token, vedi Creare il tema con i token in questa pagina.

Iniziare a utilizzare le visualizzazioni

Puoi applicare il colore dinamico a livello di app o attività. Per farlo, chiama applyToActivitiesIfAvailable() per registrare un ActivityLifeCycleCallbacks nella tua app.

Kotlin

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Java

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    DynamicColors.applyToActivitiesIfAvailable(this);
  }
}

Aggiungi il tema all'app.

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

Creare il tema con i token

Il colore dinamico sfrutta i token di design per semplificare e rendere più coerente l'assegnazione dei colori ai diversi elementi dell'interfaccia utente. Un token di design consente di assegnare semanticamente i ruoli di colore, anziché un valore impostato, a diversi elementi di un'interfaccia utente. In questo modo, il sistema di tonalità della tua app avrà più flessibilità, scalabilità e coerenza ed è particolarmente efficace quando si progetta per temi chiari e scuri e colori dinamici.

Gli snippet seguenti mostrano esempi di temi chiari e scuri e un file XML di colore corrispondente dopo l'applicazione di token di colore dinamici.

Tema chiaro

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/md_theme_light_primary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_light_error</item>
    <item name="colorOnError">@color/md_theme_light_onError</item>
    <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
    <item name="colorSurface">@color/md_theme_light_surface</item>
    <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
    …..
  </style>
</resources>

Tema scuro

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
    <item name="colorPrimary">@color/md_theme_dark_primary</item>
    <item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_dark_error</item>
    <item name="colorOnError">@color/md_theme_dark_onError</item>
    <item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
    <item name="colorSurface">@color/md_theme_dark_surface</item>
    <item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
    ……
  </style>
</resources>

File XML dei colori

Colors.xml

<resources>
  <color name="md_theme_light_primary">#6750A4</color>
  <color name="md_theme_light_onPrimary">#FFFFFF</color>
  <color name="md_theme_light_primaryContainer">#EADDFF</color>
  <color name="md_theme_light_onPrimaryContainer">#21005D</color>
  <color name="md_theme_light_error">#B3261E</color>
  <color name="md_theme_light_onError">#FFFFFF</color>
  <color name="md_theme_light_errorContainer">#F9DEDC</color>
  <color name="md_theme_light_onErrorContainer">#410E0B</color>
  <color name="md_theme_light_surface">#FFFBFE</color>
  <color name="md_theme_light_onSurface">#1C1B1F</color>
  <color name="md_theme_light_surfaceVariant">#E7E0EC</color>
  <color name="md_theme_dark_primary">#D0BCFF</color>
  <color name="md_theme_dark_onPrimary">#381E72</color>
  <color name="md_theme_dark_primaryContainer">#4F378B</color>
  <color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
  <color name="md_theme_dark_secondary">#CCC2DC</color>
  <color name="md_theme_dark_onSecondary">#332D41</color>
  <color name="md_theme_dark_secondaryContainer">#4A4458</color>
  <color name="md_theme_dark_onSurface">#E6E1E5</color>
  <color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>

Per avere ulteriori informazioni:

  • Per scoprire di più su Colore dinamico, colori personalizzati e generazione di token, consulta la pagina Colore dinamico di Material 3.

  • Per generare la tavolozza dei colori di base e i colori e il tema della tua app, consulta Material Theme Builder, disponibile tramite un plug-in Figma o nel browser.

  • Per scoprire di più su come l'utilizzo di combinazioni di colori può migliorare l'accessibilità nella tua app, consulta la pagina di Material 3 sull'accessibilità del sistema di colori.

Mantieni i colori personalizzati o del brand

Se la tua app ha colori personalizzati o del brand che non vuoi modificare in base alle preferenze dell'utente, puoi aggiungerli singolarmente durante la creazione della combinazione di colori. Ad esempio:

Themes.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        ...
        <item name="home_lamp">@color/home_yellow</item>
          ...
    </style>
</resources>
Colors.xml
<resources>
   <color name="home_yellow">#E8D655</color>
</resources>

In alternativa, puoi utilizzare lo strumento per la creazione di temi Material per importare altri colori che estendono la combinazione di colori, creando così un sistema di colori unificato. Con questa opzione, utilizza HarmonizedColors per modificare la tonalità dei colori personalizzati. In questo modo si ottiene un equilibrio visivo e un contrasto accessibile se combinato con i colori generati dagli utenti. Si verifica in fase di esecuzione con applyToContextIfAvailable().

Figura 6. Esempio di armonizzazione dei colori personalizzati

Consulta le linee guida di Material 3 sull'armonizzazione dei colori personalizzati.

Applicare il colore dinamico a icone e widget adattivi

Oltre ad attivare i temi a colori dinamici nella tua app, puoi anche supportare i temi a colori dinamici per i widget a partire da Android 12 e per le icone adattive a partire da Android 13.