FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

android.support.v7.graphics.Paletteの導入

ファッションコーディネートアプリMANTのAndroid版を担当している湯上です。

たまにAndroidネタを書いていく予定です。

今日はLollipopの登場とともにSupport Libraryに追加されたPaletteを紹介したいと思います。


画像から目立つ色を自動的に抽出することができる便利なクラスです。
同時期に追加されたRecyclerView, Toolbarなどの花形に比べると地味ではありますが、どこかで使ってみたくなる魅力的な機能です。

導入

今のところsupport-v7とは別途インポートしなければなりませんので、build.gradleのdependenciesに下記を追加します。

compile 'com.android.support:palette-v7:21.0.+'

使い方

画像の読み込みには同期型のPalette.generate()と非同期型のPalette.generateAsync()が存在します。

メインスレッドでお手軽に使えるのはgenerateAsyncですね。

Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
extractColors(palette);
}
});

生成されたPaletteからは6種類のSwatch(色見本)が取得できます。

  • Vibrant - getVibrantSwatch()
  • Vibrant Dark - getDarkVibrantSwatch()
  • Vibrant Light - getLightVibrantSwatch()
  • Muted - getMutedSwatch()
  • Muted Dark - getDarkMutedSwatch()
  • Muted Light - getLightMutedSwatch()

それぞれのSwatchからは、

Palette.Swatch swatch  = palette.getVibrantSwatch();
if (swatch != null) {
backgroundView.setBackgroundColor(swatch.getRgb()); // 抽出された色
titleView.setTextColor(swatch.getTitleTextColor()); // 抽出色上に表示するためのタイトル文字色
bodyView.setTextColor(swatch.getBodyTextColor()); // 抽出色上に表示するための本文文字色
}

のようにして色を取得することができます。

該当のSwatchは確実に生成されるわけではないようなので注意です。

この6種類以外のSwatch

List swatches = palette.getSwatches();

とすると取得できます。

ここで取得できるSwatchの数はデフォルトで最大16種類までですが、画像を読み込むときに最大数を指定することも可能です。

// 最大24種類
Palette.generateAsync(bitmap, 24, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
extractColors(palette);
}
});

以上、Paletteの紹介でした。

使い方も簡単なので、画像を扱うアプリではぜひ取り入れていきたい機能ですね!

参考

Palette v21 - Chris Banes

元記事

Qiitaにも同内容で投稿しています。