Sistema de color

Android TV cumple con los lineamientos de color de Material de Google, lo que garantiza una interfaz cohesiva y visualmente atractiva. Crea un estilo visual muy envolvente y atractivo adaptado a la pantalla de la TV. En esta guía, se detalla cómo aplicar el tema de Material Design a una interfaz de Android TV.

Lo más destacado

  • Android TV cumple con los lineamientos de color de Material de Google, pero se optimiza para TV.
  • Compila a partir de temas oscuros para crear experiencias cinemáticas.
  • Usa Material Theme Builder para crear un tema.

Esquema de colores

Un esquema de colores te ayuda a aplicar color a tu IU de manera significativa, creando armonía, coherencia de marca y escalabilidad.

La base de un esquema de colores es el conjunto de cinco colores clave que se relacionan individualmente con paletas tonales separadas con trece tonos o más. Se asignan tonos específicos de cada paleta tonal a las funciones de color en una IU. Los colores clave son la base para crear cualquier esquema de colores dinámico. Puedes crear colores clave basados en un color raíz con Material Theme Builder o elegir tus propios colores clave.

Colores clave

Con los colores clave establecidos, el algoritmo de Material especifica el espectro completo de colores necesario para expresar estados de interacción, errores y contraste accesible.

Proceso de generación de temas de color

El compilador de temas de Material genera esquemas de colores oscuros y claros con los mismos tokens de color, lo que facilita el cambio entre temas.

Roles de color

Principal

Las funciones principales se usan para los componentes clave de la IU, como los botones destacados, los estados activos y el tono de las superficies elevadas.

Acento primario

Secundario

Las funciones secundarias se usan para componentes menos destacados en la IU, como chips de filtro y oportunidades para agregar más expresiones de color.

Acento secundario

Tertiary

Las funciones terciarias se usan para contrastar acentos que se pueden usar para equilibrar los colores primarios y secundarios, o llamar la atención sobre un elemento, como un campo de entrada.

Terciario de acento

Plataformas

Los roles neutrales se usan para las superficies y los fondos, y el texto y los íconos de alto énfasis. Obtén más información sobre las plataformas en los lineamientos de Material Design.

Plataformas

Resúmenes

Obtén más información sobre los roles de esquema en los lineamientos de Material Design.

Contorno

Color dinámico

En Android para dispositivos móviles, a partir de Android 12, los usuarios pueden generar esquemas individualizados a través de selecciones de fondos de pantalla y otras personalizaciones. Android TV no admite el fondo de pantalla, lo que significa que no se admiten los esquemas generados por el usuario y el SO Android TV solo transmite paletas base.

En lugar de esquemas generados por usuarios, puedes usar esquemas de colores basados en el contenido para crear diseños dinámicos y divertidos, basados en contenido como pósteres de películas, portadas de álbumes y otras imágenes hero. Para obtener más información, consulta los esquemas de colores basados en el contenido.

Con las bibliotecas para desarrolladores de utilidades de color de Material, puedes extraer colores clave directamente de la imagen o ejecutar tu propio algoritmo de extracción de colores para encontrar un color clave y, luego, usar las utilidades de color de Material para generar un tema.

Este es un ejemplo de cómo se extraen los colores de una imagen:

Color dinámico

  1. Imagen de origen
  2. Color de origen extraído
  3. Colores de clave generados

Puedes generar un esquema de colores con estos colores clave o usarlos para aplicarlos en tu IU.

Ejemplo de aplicación de color dinámico

Accesibilidad

Si quieres conocer las consideraciones de accesibilidad, consulta Prácticas recomendadas de accesibilidad para Android TV.