Coloreando Aplicaciones Android con Palette

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 objetos Swatch deben ser generados del mapa de bits. El numero por defecto del builder es 16. Mientras más objetos Swatch generes, más tiempo te llevará generar la Palette.
• 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 una Palette. 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!