Coloreando Aplicaciones Android con Palette
Spanish (Español) translation by Javier Salesi (you can also view the original English article)
Una de las características definitorias de material design es el uso del color para halagar y enfatizar el contenido en la pantalla. Usando la clase Palette
, los desarrolladores pueden extraer los colores prominentes de un mapa de bits para usar en sus aplicaciones buscando personalizar los elementos de la interfaz de usuario.
En éste artículo, aprenderás cómo crear un objeto Palette
de un mapa de bits. Contenido de cada Palette
hay un conjunto de objetos Swatch
que te permitirán trabajar con perfiles de color específicos y una lista de colores visibles de la imagen.



1. Crear una Palette (Paleta)
Para comenzar, necesitarás importar la librería de soporte de paletas a tu proyecto al incluir la siguiente línea en el nodo de dependencias del archivo build.gradle de tu proyecto. Ya que ésta es una librería de soporte v7, las clases relacionadas con Palette
están disponibles desde la Android API 7.
compile 'com.android.support:palette-v7:+'
Después de ejecutar un gradle sync en tu proyecto, puedes generar una Palette
de un mapa de bits. Ésto puede hacerse usando Palette.Builder
ya sea sincrónicamente al llamar al método generate()
sin usar ningún parámetro, o asincrónicamente al llamar al método generat(Palette.PaletteAsyncListener listener)
. Debido a que puede llevar tiempo crear la Palette
, se recomienda que el método síncrónico solo sea llamado de un subproceso en segundo plano. Además de los dos métodos generate, la clase Palette.Builder
tiene otro par de métodos útiles que vienen con sus propias compensaciones:
-
maximumColorCount(int numOfSwatches)
te permite cambiar cuántos objetosSwatch
deben ser generados del mapa de bits. El numero por defecto del builder es 16. Mientras más objetosSwatch
generes, más tiempo te llevará generar laPalette
. -
resizeBitmapSize(int maxDimension)
redimensiona el mapa de bits para que su máxima dimensión solo sea tan larga como el valor pasado de éste método. Mientras más grande es tu mapa de bits, más tiempo te llevará generar unaPalette
. Asimismo, mapas de bits más pequeños se procesarán más rápido, pero perderás precisión de color.
El siguiente fragmento de código muestra cómo crear un mapa de bits de un recurso local y asincrónicamente crear un objeto Palette
.
Bitmap bitmap = BitmapFactory.decodeResource( getResources(), R.drawable.union_station ); Palette.from( bitmap ).generate( new Palette.PaletteAsyncListener() { @Override public void onGenerated( Palette palette ) { //work with the palette here } });
Una vez que tienes una Palette
, puedes comenzar a trabajar con los objetos Swatch
asociados.
2. Swatches (muestras)
Objetos Swatch
representan colores generados de la paleta de una imagen. Cada Swatch
contiene:
- un valor RGB (Red-rojo, Green-verde, Blue-azul) y HSL (Hue-Tono, Saturation-saturación, Lightness-luminosidad) para cada color.
- un valor de población que refleja el número de pixeles representados por el
Swatch
. - un valor de color que puede usarse para el texto del título cuando se muestra en el color primario del
Swatch
. - un valor de color que puede usarse para un cuerpo de texto cuando se muestra en el color primario del
Swatch
.
Perfiles Swatch
Cada Palette
tiene un conjunto de seis perfiles predefinidos de color:
- vibrant (intenso)
- light vibrant (intenso claro)
- dark vibrant (intenso oscuro)
- muted (apagado)
- light muted (apagado claro)
- dark muted (apagado oscuro)
Mientras que cada uno de éstos puede ser útil dependiendo del diseño de tu aplicación, vibrant y dark vibrant son los más comúnmente usados. Una cosa para notar es que cualquiera de éstos perfiles pueden ser null
(nulo), así que debes manejar ésta situación según sea el caso. En el proyecto de ejemplo, en el método onGenerated(Palette palette
) del asíncronico Palette.Builder
, puedes ver cómo extraer cada perfil Swatch
.
setViewSwatch( mVibrantTextView, palette.getVibrantSwatch() ); setViewSwatch( mLightVibrantTextView, palette.getLightVibrantSwatch() ); setViewSwatch( mDarkVibrantTextView, palette.getDarkVibrantSwatch() ); setViewSwatch( mMutedTextView, palette.getMutedSwatch() ); setViewSwatch( mLightMutedTextView, palette.getLightMutedSwatch() ); setViewSwatch( mDarkMutedTextView, palette.getDarkMutedSwatch() );
setViewSwatch(TextView view, Palette.Swatch swatch)
es un método que acepta un Swatch
y TextView
y establece el fondo y colores de texto de TextView
de valores en el Swatch
. Notarás que primero revisamos para ver si el Swatch
es null
y, si es así, simplemente ocultamos la view (vista).
public void setViewSwatch( TextView view, Palette.Swatch swatch ) { if( swatch != null ) { view.setTextColor( swatch.getTitleTextColor() ); view.setBackgroundColor( swatch.getRgb() ); view.setVisibility( View.VISIBLE ); } else { view.setVisibility( View.GONE ); } }



Swatches adicionales
Además del perfil estándar de objetos Swatch
, cada Palette
contiene una lista de objetos generales Swatch
generada del mapa de bits. Éstos pueden ser capturados de la Palette
como una List
al usar el método getSwatches()
.
En el proyecto de ejemplo, ésta List
es recuperada y colocada en un ArrayAdapter<Palette.Swatch>
que luego muestra el color primario Swatch
y el color del texto del cuerpo, así como el número de pixeles representados en el mapa de bits por éste Swatch
. Una cosa para prestar atención es que la lista no está en un orden particular. En el proyecto de ejemplo, he ordenado los elementos por su valor de población.
for( Palette.Swatch swatch : palette.getSwatches() ) { mAdapter.add( swatch ); } mAdapter.sortSwatches(); mAdapter.notifyDataSetChanged();
En éste fragmento de código, mAdapter
es el adaptador de los objetos Swatch
con los siguientes métodos:
@Override public View getView( int position, View convertView, ViewGroup parent ) { ViewHolder holder; if( convertView == null ) { holder = new ViewHolder(); convertView = LayoutInflater.from( getContext() ).inflate( R.layout.color_item, parent, false ); holder.view = (TextView) convertView.findViewById( R.id.view ); convertView.setTag( holder ); } else { holder = (ViewHolder) convertView.getTag(); } holder.view.setBackgroundColor( getItem( position ).getRgb() ); holder.view.setTextColor( getItem( position ).getBodyTextColor() ); holder.view.setText( "Population: " + getItem( position ).getPopulation() ); return convertView; } public void sortSwatches() { sort(new Comparator<Palette.Swatch>() { @Override public int compare( Palette.Swatch lhs, Palette.Swatch rhs ) { return rhs.getPopulation() - lhs.getPopulation(); } }); } public class ViewHolder { TextView view; }



Conclusión
En éste artículo, has aprendido sobre la librería de soporte Palette
y cómo extraer muestras de color de un mapa de bits. Ésto te permitirá personalizar los elementos de tu interfaz de usuario tales como fondos y texto, para que puedan destacar las imágenes de tu aplicación. Cuando se acompaña con las clases Color
y ColorUtil
(disponibles en la librería de soporte v4), tienes aún más opciones disponibles para la coloración de tu aplicación.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!