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

L'opzione Dynamic Color, aggiunta in Android 12, consente agli utenti di personalizzare i loro dispositivi per allineare i toni con la combinazione di colori dello sfondo personale o tramite un colore selezionato nel selettore dello sfondo.

Puoi sfruttare questa funzionalità aggiungendo l'API DynamicColors, che applica questi temi alla tua app o alla tua attività per personalizzare di più l'app all'utente.

Figura 1. Esempi di combinazioni di colori tonali derivate 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 adattive, come descritto più avanti in questa pagina. Puoi anche provare il codelab.

In che modo Android crea combinazioni di colori

Android esegue i seguenti passaggi per generare combinazioni di colori dalla sfondo.

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

  2. Il sistema utilizza quel colore di origine per estrapolare ulteriormente i cinque colori chiave noto come Principale, Secondario, Terziario, Neutrale e Neutrale. di addestramento.

    Esempio di estrazione del colore di origine
    Figura 2. Esempio di estrazione dei colori di origine dall'immagine di sfondo e fino a cinque colori chiave
  3. Il sistema interpreta ogni colore dei tasti in una tavolozza di 13 toni.

    Esempio di generazione di una specifica tavolozza dei toni
    Figura 3. Esempio di generazione di una determinata tavolozze dei toni
  4. Il sistema utilizza questo singolo sfondo per ricavare cinque colori diversi che forniscono la base per eventuali temi chiari e scuri.

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

Gli utenti possono selezionare varianti di colore da colori estratti dallo sfondo e diversi temi a partire da Android 12, con altre varianti aggiunte in Android 13. Per Ad esempio, un utente con uno smartphone Pixel con Android 13 deve selezionare una variante dalla sezione Sfondo e delle impostazioni, come mostrato nella Figura 4.

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

Android 12 ha aggiunto la variante Macchia tonale, seguita da Neutrale e Vibrante. Varianti tonali ed espressive in Android 13. Ogni variante ha un ricetta che trasforma i colori dei semi dello sfondo di un utente con una vivacità e ruotando la tonalità. L'esempio seguente mostra una singola combinazione di colori espressi attraverso queste quattro varianti di colore.

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 maggiori dettagli sui token, consulta Creare il tema con i token in questa pagina.

Inizia a utilizzare Compose

Se crei la tua UI con Compose, dai un'occhiata Temi Material in Compose per avere informazioni dettagliate sull'applicazione del colore dinamico alle tue dell'app.

Come iniziare a utilizzare le visualizzazioni

Puoi applicare il colore dinamico a livello di app o attività. A questo scopo, chiama applyToActivitiesIfAvailable() per registrare un ActivityLifeCycleCallbacks alla 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);
  }
}

Poi, aggiungi il tema alla tua app.

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

Crea il tuo tema con i token

Dynamic Color sfrutta i token di progettazione per rendere l'assegnazione dei colori i diversi elementi dell'interfaccia utente in modo più semplice e coerente. Un token di progettazione ti consente assegnare semanticamente i ruoli di colore, anziché un valore impostato, a diversi elementi di una UI. In questo modo il sistema tonale dell'app può avere flessibilità, scalabilità e coerenza ed è particolarmente potente progettando temi chiari e scuri e colori dinamici.

I seguenti snippet mostrano esempi di temi chiari e scuri. un file XML di colore corrispondente, dopo l'applicazione dei token di colore dinamico.

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>

xml 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 Dynamic Color, sui colori personalizzati e sulla generazione dei token, consulta la pagina Colore dinamico di Material 3.

  • Per generare la tavolozza dei colori di base nonché i colori e il tema della tua app, controlla il generatore di temi Material, disponibile tramite plug-in Figma o nel browser).

  • Per saperne di più su come l'uso delle combinazioni di colori può migliorare l'accessibilità nell'app, consulta la pagina Material 3 su Accessibilità del sistema di colori.

Mantieni i colori personalizzati o del brand

Se per la tua app sono presenti colori personalizzati o del brand che non vuoi modificare con in base alle preferenze dell'utente, puoi aggiungerle singolarmente mentre crei il colore . 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 il generatore di temi Material per importare colori che estendono la tua combinazione di colori, creando così un sistema di colori unificato. Con questa opzione, usa HarmonizedColors per cambiare il tono delle colori. In questo modo si ottiene un equilibrio visivo e un contrasto accessibile. con colori generati dagli utenti. Viene eseguito in fase di runtime applyToContextIfAvailable()

Figura 6. Esempio di armonizzazione dei colori personalizzati

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

Applicare il colore dinamico a widget e icone adattive

Oltre ad attivare i temi di colore dinamico nella tua app, puoi anche supportare Temi di colore dinamico per widget che iniziano con Android 12 e per Icone adattive che iniziano tra Android 13.