Permite que los usuarios personalicen su experiencia de color en tu app

Dynamic Color, que se agregó en Android 12, permite a los usuarios personalizar sus dispositivos para que se alineen tonalmente con el esquema de colores de su fondo de pantalla personal o con un color seleccionado en el selector de fondo de pantalla.

Puedes aprovechar esta función si agregas la API de DynamicColors, que aplica este tema a tu app o actividad para que esta sea más personalizada para el usuario.

Figura 1: Ejemplos de esquemas de colores tonales derivados de diferentes fondos de pantalla

En esta página, se incluyen instrucciones para implementar colores dinámicos en tu app. Esta función también está disponible por separado para íconos adaptables y widgets, como se describe más adelante en esta página. También puedes probar el codelab.

Cómo crea Android los esquemas de colores

Android realiza los siguientes pasos para generar esquemas de colores a partir del fondo de pantalla de un usuario.

  1. El sistema detecta los colores principales de la imagen del fondo de pantalla seleccionada y extrae un color de la fuente.

  2. El sistema usa ese color de origen para extrapolar aún más cinco colores clave conocidos como Primary, Secondary, Tertiary, Neutral y Neutral variante.

    Ejemplo de extracción del color de origen
    Figura 2: Ejemplo de extracción del color de origen de una imagen de fondo de pantalla y una extracción a cinco colores clave
  3. El sistema interpreta cada color clave en una paleta tonal de 13 tonos.

    Ejemplo de generación de una determinada paleta tonal
    Figura 3: Ejemplo de cómo generar una paleta tonal determinada
  4. El sistema usa este único fondo de pantalla para derivar cinco combinaciones de colores diferentes, que proporcionan la base para cualquier tema claro y oscuro.

Cómo se muestran las variantes de color en el dispositivo de un usuario

Los usuarios pueden seleccionar variantes de color a partir de colores extraídos del fondo de pantalla y diferentes temas a partir de Android 12, y se agregan más variantes en Android 13. Por ejemplo, un usuario con un teléfono Pixel con Android 13 seleccionaría una variante de la configuración Estilo y fondo de pantalla, como se muestra en la Figura 4.

Figura 4: Selección de variantes de color en la configuración de fondo de pantalla (se muestra en un dispositivo Pixel)

En Android 13, Android 12 agregó la variante Tonal Spot, seguida de las variantes Neutral, Vibrant Tonal y Expressive. Cada variante tiene una receta única que transforma los colores de origen del fondo de pantalla del usuario mediante la intensidad y la rotación del tono. En el siguiente ejemplo, se muestra un solo esquema de colores expresado a través de estas cuatro variantes de color.

Figura 5: Ejemplo de cómo se ven las diferentes variantes de color en un solo dispositivo

Tu app sigue usando los mismos tokens para acceder a estos colores. Para obtener más información sobre los tokens, consulta Cómo crear tu tema con tokens en esta página.

Cómo comenzar a usar Compose

Si compilas tu IU con Compose, consulta Temas de Material en Compose para obtener detalles sobre cómo aplicar color dinámico a tu app.

Comienza a usar Views

Puedes aplicar color dinámico a nivel de la app o de la actividad. Para hacerlo, llama a applyToActivitiesIfAvailable() para registrar un ActivityLifeCycleCallbacks en tu 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);
  }
}

A continuación, agrega el tema a tu app.

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

Crea tu tema con tokens

Dynamic Color aprovecha los tokens de diseño para que la asignación de colores a diferentes elementos de la IU sea más optimizada y coherente. Un token de diseño te permite asignar de manera semántica funciones de color, en lugar de un valor establecido, a diferentes elementos de una IU. Esto permite que el sistema tonal de tu app tenga más flexibilidad, escalabilidad y coherencia, y es particularmente potente cuando se diseñan temas claros y oscuros, y color dinámico.

En los siguientes fragmentos, se muestran ejemplos de temas claros y oscuros, y un xml de color correspondiente, después de aplicar tokens de color dinámicos.

Tema claro

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 oscuro

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>

Colores en XML

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>

Para obtener más información:

  • Para obtener más información sobre el color dinámico, los colores personalizados y la generación de tokens, consulta la página Color dinámico de Material 3.

  • Para generar la paleta de colores base y los colores y el tema de tu app, consulta Material Theme Builder, que está disponible a través de un complemento de Figma o en el navegador.

  • Para obtener más información sobre cómo el uso de esquemas de color puede permitir una mejor accesibilidad en tu app, consulta la página de Material 3 sobre Accesibilidad del sistema de color.

Mantener los colores personalizados o de la marca

Si tu app tiene colores personalizados o de marca que no quieres cambiar según las preferencias del usuario, puedes agregarlos de forma individual a medida que desarrollas tu esquema de colores. Por ejemplo:

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>

Como alternativa, puedes usar Material Theme Builder para importar colores adicionales que extiendan tu esquema de colores, lo que creará un sistema de colores unificados. Con esta opción, usa HarmonizedColors para cambiar el tono de los colores personalizados. Esto logra un equilibrio visual y un contraste accesible cuando se combina con colores generados por el usuario. Se lleva a cabo en el tiempo de ejecución con applyToContextIfAvailable().

Figura 6: Ejemplo de cómo armonizar colores personalizados

Consulta la guía de Material 3 sobre la unificación de colores personalizados.

Cómo aplicar colores dinámicos a tus íconos y widgets adaptables

Además de habilitar los temas de color dinámico en tu app, también puedes admitir el tema de color dinámico para widgets a partir de Android 12 y para íconos adaptables a partir de Android 13.