Un buen diseño visual es esencial para una app exitosa, y los esquemas de color son componente principal del diseño. El La biblioteca Palette es un componente de Jetpack que extrae colores prominentes de las imágenes para crear imágenes de Google Chat.
Puedes usar la biblioteca Palette para diseñar diseños
temas y aplicar colores personalizados a
elementos visuales en tu aplicación. Por ejemplo, puedes usar una paleta para crear una
una tarjeta de título con colores coordinados para una canción según la portada del álbum o para ajustar una
el color de la barra de herramientas de la app cuando cambia su imagen de fondo. El
Palette
te da acceso a los colores de una
Imagen de Bitmap
a la vez que proporcionas seis perfiles de color principales del mapa de bits para informar a
las decisiones de diseño.
Cómo configurar la biblioteca
Para usar la biblioteca Palette, agrega lo siguiente a tu
build.gradle
:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Groovy
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Crea una paleta
Un objeto Palette
te da acceso a los colores primarios de una
así como los colores correspondientes para el texto superpuesto. Usa las paletas para
diseñar el estilo de tu app y cambiar dinámicamente su esquema de colores según
en una imagen de origen determinada.
Para crear una paleta, primero debes crear una instancia
Palette.Builder
desde un Bitmap
. Luego, puedes usar Palette.Builder
para
personalizar la paleta antes de generarla. En esta sección, se describe la paleta
la generación y personalización
a partir de una imagen de mapa de bits.
Genera una instancia de paleta
Genera una instancia de Palette
con su
from(Bitmap bitmap)
para crear primero un Palette.Builder
a partir de un
Bitmap
El compilador puede generar la paleta de forma síncrona o asíncrona. Usa
generación síncrona de paleta si deseas crear la paleta en el mismo
subproceso como el método al que se llama. Si generas la paleta de forma asíncrona,
en otro subproceso, usa el
onGenerated()
para acceder a la paleta inmediatamente después de crearla.
En el siguiente fragmento de código, se proporcionan métodos de ejemplo para ambos tipos de paleta generación:
Kotlin
// Generate palette synchronously and return it. fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate() // Generate palette asynchronously and use it on a different thread using onGenerated(). fun createPaletteAsync(bitmap: Bitmap) { Palette.from(bitmap).generate { palette -> // Use generated instance. } }
Java
// Generate palette synchronously and return it. public Palette createPaletteSync(Bitmap bitmap) { Palette p = Palette.from(bitmap).generate(); return p; } // Generate palette asynchronously and use it on a different thread using onGenerated(). public void createPaletteAsync(Bitmap bitmap) { Palette.from(bitmap).generate(new PaletteAsyncListener() { public void onGenerated(Palette p) { // Use generated instance. } }); }
Si necesitas generar paletas continuamente para una lista ordenada de imágenes o
los objetos, considera
almacenar en caché
Palette
para evitar un rendimiento lento de la IU. No crees
paletas en tu
subproceso principal.
Personaliza tu paleta
Palette.Builder
te permite personalizar la paleta eligiendo
cuántos colores tiene la paleta resultante, a qué área de la imagen
usa el compilador para generar la paleta y los colores que se incluyen en la
paleta. Por ejemplo, puedes filtrar el color negro
o asegurarte de que el generador
solo utiliza la mitad superior de una imagen para generar tu paleta.
Ajusta el tamaño y los colores de la paleta con los siguientes métodos del
Clase Palette.Builder
:
addFilter()
- Este método agrega un filtro que indica los colores que están permitidos en la
paleta resultante. Ingresa el tuyo
Palette.Filter
y modificar su métodoisAllowed()
para determinar qué colores filtrado de la paleta. maximumColorCount()
-
Este método establece la cantidad máxima de colores en la paleta. Predeterminado
es 16 y el valor óptimo depende de la imagen de origen. Para
paisajes, los valores óptimos varían entre 8 y 16, mientras que las imágenes con rostros suelen
tienen valores entre 24 y 32. El
Palette.Builder
tarda más en generar paletas con más colores. setRegion()
- Este método indica qué área del mapa de bits usa el compilador cuando creando la paleta. Solo puedes usar este método cuando generas la paleta de un mapa de bits y no afecta a la imagen original.
addTarget()
- Este método te permite realizar tu propia coincidencia de colores agregando una
Target
de color al generador. Si el valor predeterminado deTarget
es insuficientes, los desarrolladores avanzados pueden crear sus propiosTarget
con unTarget.Builder
Cómo extraer perfiles de color
Según el
estándares de Material
en Google Cloud, la biblioteca Palette extrae los perfiles de color de uso común de un
imagen. Cada perfil se define con un Target
, y los colores se extraen
de la imagen de mapa de bits se califican en función de cada perfil en función de la saturación,
la luminancia y la propagación (cantidad de píxeles en el mapa de bits representados por el valor
color). Para cada perfil, el color con la mejor puntuación define ese color
de la imagen dada.
De forma predeterminada, un objeto Palette
contiene 16 colores primarios de un
determinada imagen. Cuando generes la paleta, puedes
personalizar la cantidad de colores
Palette.Builder
Extraer más colores proporciona un mayor potencial
coincide para cada perfil de color, pero también hace que Palette.Builder
tome más tiempo al generar la paleta.
La biblioteca Palette intenta extraer los siguientes seis perfiles de color:
- Vibrante claro
- Vibrante
- Vibrante oscuro
- Tenue claro
- Tenue
- Tenue oscuro
Cada uno de los métodos get<Profile>Color()
en
Palette
muestra el color en la paleta asociada con ese
perfil particular, en el que <Profile>
se reemplaza por
el nombre de uno de los seis perfiles de color. Por ejemplo, el método para obtener la
El perfil de color oscuro vibrante es
getDarkVibrantColor()
Como no todas las imágenes contienen todos los perfiles de color, proporciona un color predeterminado a
el resultado.
En la figura 1, se muestra una foto y los perfiles de color correspondientes de la
get<Profile>Color()
.
![Una imagen que muestra un atardecer a la izquierda y la paleta de colores extraída a la derecha.](https://developer.android.google.cn/static/training/material/images/palette-library-color-profiles_2-1_2x.png?authuser=9&hl=es)
Usa muestras para crear esquemas de colores
La clase Palette
también genera
Palette.Swatch
objetos para cada perfil de color. Los objetos Palette.Swatch
contienen lo siguiente:
el color asociado a ese perfil, así como la población del color en
píxeles.
Las muestras tienen métodos adicionales para acceder a más información sobre el
y el perfil de color, como los valores HSL y la población de píxeles. Puedes usar muestras para
ayudan a crear esquemas de colores y temas de aplicaciones más completos mediante el
getBodyTextColor()
y
getTitleTextColor()
. Estos métodos devuelven colores apropiados para usar sobre el valor
color.
Cada método get<Profile>Swatch()
de
Palette
devuelve la muestra asociada con ese perfil en particular.
donde <Profile>
se reemplaza por el nombre de uno de
los seis perfiles de color. Aunque los
Los métodos get<Profile>Swatch()
no requieren el valor predeterminado
value, muestran null
si ese perfil en particular
que no existe en la imagen. Por lo tanto, comprueba que una muestra no sea nula antes
y la usan. Por ejemplo, el siguiente código obtiene el color del texto del título de un
paleta si la muestra vibrante no es nula:
Kotlin
val vibrant = myPalette.vibrantSwatch // In Kotlin, check for null before accessing properties on the vibrant swatch. val titleColor = vibrant?.titleTextColor
Java
Palette.Swatch vibrant = myPalette.getVibrantSwatch(); if(vibrant != null){ int titleColor = vibrant.getTitleTextColor(); // ... }
Para acceder a todos los colores de una paleta,
getSwatches()
muestra una lista de todas las muestras generadas a partir de una imagen, incluida la
seis perfiles de color estándar.
En el siguiente fragmento de código, se usan los métodos del código anterior para generar una paleta de forma síncrona, obtener su muestra vibrante y cambiar los colores de la barra de herramientas para que coincidan con la imagen del mapa de bits. En la Figura 2, se muestra imagen y barra de herramientas resultantes.
Kotlin
// Set the background and text colors of a toolbar given a bitmap image to // match. fun setToolbarColor(bitmap: Bitmap) { // Generate the palette and get the vibrant swatch. val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch // Set the toolbar background and text colors. // Fall back to default colors if the vibrant swatch isn't available. with(findViewById<Toolbar>(R.id.toolbar)) { setBackgroundColor(vibrantSwatch?.rgb ?: ContextCompat.getColor(context, R.color.default_title_background)) setTitleTextColor(vibrantSwatch?.titleTextColor ?: ContextCompat.getColor(context, R.color.default_title_color)) } }
Java
// Set the background and text colors of a toolbar given a bitmap image to // match. public void setToolbarColor(Bitmap bitmap) { // Generate the palette and get the vibrant swatch. // See the createPaletteSync() method from the preceding code snippet. Palette p = createPaletteSync(bitmap); Palette.Swatch vibrantSwatch = p.getVibrantSwatch(); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // Load default colors. int backgroundColor = ContextCompat.getColor(getContext(), R.color.default_title_background); int textColor = ContextCompat.getColor(getContext(), R.color.default_title_color); // Check that the Vibrant swatch is available. if(vibrantSwatch != null){ backgroundColor = vibrantSwatch.getRgb(); textColor = vibrantSwatch.getTitleTextColor(); } // Set the toolbar background and text colors. toolbar.setBackgroundColor(backgroundColor); toolbar.setTitleTextColor(textColor); }
![Una imagen que muestra un atardecer y una barra de herramientas con TitleTextColor en su interior](https://developer.android.google.cn/static/training/material/images/palette-library-title-text-color_2-1_2x.png?authuser=9&hl=es)