Extraindo cores de imagens: Integrando Picasso e Palette
Desde que foi apresentado, o Material Design trouxe um novo significado para as cores dos aplicativos. Não basta mais escolher cores e destacar componentes, é necessário gerar significado e ambientação ideal para elas. As imagens e fotos também passaram a ter destaque como conteúdo principal. E que forma melhor de gerar uma ótima experiência de uso do que combinando as cores dos componentes com as cores das imagens? Vamos fazer isso carregando imagens de qualidade usando Picasso, combinando as cores de nossa interface através da extração de cores usando a classe Palette.
Agradecimentos especiais à API do Unsplash, que permite obter imagens aleatórias de excelente qualidade e de graça.
Vamos começar incluindo as bibliotecas no arquivo build.gradle da nossa aplicação. Para extrair as cores das nossas imagens, vamos usar a classe Palette da biblioteca de compatibilidade. Desta forma será possível rodar nosso aplicativo sem problemas em diversas versões do Android. Além disso, vamos importar a biblioteca de imagens Picasso, é claro.
Em seguida, criamos o layout da nossa activity. Este layout conterá a imagem a ser exibida e TextViews para exibir as cores extraídas das imagens. Nossa ImageView tem dimensões fixas definidas à partir do arquivo dimens.xml. Falaremos sobre estas dimensões em um instante.
Agora que temos o layout, vamos carregar uma imagem aleatória no nosso ImageView com o Picasso, de uma maneira muito simples. Vamos incluir algumas linhas de código no onCreate da nossa activity.
Lembre-se, uma imagem será mantida em cache pelo Picasso enquanto a activity não for destruída. Para baixar uma nova imagem, portanto, force a destruição da activity.
O problema com este código é que não temos acesso à imagem em momento algum. A biblioteca baixa a imagem, redimensiona e define ela no ImageView, tudo automaticamente. Para que possamos ter acesso ao bitmap antes de ele ser adicionado à ImageView, vamos trocar algumas linhas do código. Ao invés de carregar a imagem para o bitmap, vamos carregar para um target customizado. Com isso, teremos acesso ao bitmap gerado e poderemos extrair as cores do mesmo como queremos.
Agora podemos tratar o bitmap no método onBitmapLoaded. Poderemos extrair as cores e definir ele como fonte da imagem do nosso ImageView. Mudar o target de carregamento da imagem gera outra consequência direta no carregamento da imagem: não temos mais as dimensões da ImageView como referência. Isto fará o Picasso carregar a imagem em seu tamanho completo, ocupando grande quantidade de memória e tornando a extração das cores um processo muito pesado. Por isso vamos obter as dimensões da ImageView à partir do nosso arquivo dimens.xml e invocar os métodos resize e centerCrop para reduzir nossa imagem ao tamanho correto.
Agora finalmente podemos extrair as cores da nossa imagem. Vamos utilizar a classe Palette da biblioteca de compatibilidade. Vamos construir uma nova instância usando o método from com nosso bitmap e gerar uma nova paleta com o método generate. Faremos a geração assíncrona, uma vez que o processo pode ser demorado e não queremos que o mesmo bloqueie a main thread.
Quando as cores forem extraídas, teremos uma paleta de cores com várias combinações possíveis. Podemos usar o método getVibrantSwatch para obter um conjunto de cores vibrantes ou o método getMutedSwatch para obter um conjunto de cores mais discretas. Recomento explorar os diversos métodos da Palette para comparar os diferentes conjuntos de cores e ver o que mais se adequa ao seu caso de uso. Lembres-se que cada conjunto de cores pode estar nulo, uma vez que a imagem pode não ter cores vibrantes, por exemplo. No exemplo, usei as cores extraídas da paleta para modificar as cores do plano de fundo e dos TextViews como forma de demonstrar o funcionamento.
Agora basta rodar nosso exemplo e ver as cores sendo extraídas para cada imagem. Nos prints abaixo, usei as cores da combinação getDarkMutedSwatch em um device com Android 4.4.4 (a compatibilidade parece funcionar :) ).
O projeto completo do exemplo está disponível no GitHub.
