Palette API を使用して色を選択する

アプリを成功させるには優れたビジュアル デザインが不可欠であり、カラーパターンはデザインの主要なコンポーネントです。Palette ライブラリは、画像から代表色を抽出して視覚に訴えるアプリを作成する Jetpack ライブラリです。

Palette ライブラリを使用すると、レイアウトのテーマをデザインし、アプリの視覚要素にカスタムカラーを適用できます。たとえば、パレットを使用して、アルバムカバーに基づいて曲の色調整されたタイトルカードを作成したり、背景画像が変更されたときにアプリのツールバーの色を調整したりできます。Palette オブジェクトを使用すると、Bitmap 画像の色にアクセスできます。また、ビットマップから 6 つの主要なカラー プロファイルを提供し、デザインの選択に役立てることができます。

ライブラリを設定する

Palette ライブラリを使用するには、次のコードを build.gradle に追加します。

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

パレットを作成する

Palette オブジェクトを使用すると、画像のプライマリ カラーと、オーバーレイ テキストに対応する色にアクセスできます。パレットを使用すると、特定のソース画像に基づいてアプリのスタイルを設計し、アプリのカラーパターンを動的に変更できます。

パレットを作成するには、まず Bitmap から Palette.Builder をインスタンス化します。その後、Palette.Builder を使用してパレットをカスタマイズしてから生成できます。このセクションでは、ビットマップ画像からのパレットの生成とカスタマイズについて説明します。

Palette インスタンスを生成する

from(Bitmap bitmap) メソッドを使用して Palette インスタンスを生成し、まず Bitmap から Palette.Builder を作成します。

ビルダーでは、パレットを同期または非同期で生成できます。呼び出されるメソッドと同じスレッドでパレットを作成する場合は、同期パレット生成を使用します。パレットを別のスレッドで非同期に生成する場合は、onGenerated() メソッドを使用して作成後すぐにパレットにアクセスします。

次のコード スニペットは、両方のタイプのパレット生成に使用するメソッドの例を示しています。

// 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.
    }
}

// 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.
    }
  });
}

画像やオブジェクトの並べ替えリストのパレットを継続的に生成する必要がある場合は、UI のパフォーマンスが低下しないように、Palette インスタンスをキャッシュに保存することを検討してください。メインスレッドでパレットを作成しないでください。

パレットをカスタマイズする

Palette.Builder を使用すると、生成されるパレットの色の数、パレットの生成に使用する画像の領域、パレットに含める色を選択することで、パレットをカスタマイズできます。たとえば、黒をフィルタで除外したり、ビルダーで画像の上半分のみを使用してパレットを生成したりできます。

Palette.Builder クラスの以下のメソッドを使用して、パレットのサイズと色を微調整します。

addFilter()

このメソッドは、作成されたパレットで使用できる色を示すフィルタを追加します。独自の Palette.Filter を渡し、その isAllowed() メソッドを変更して、パレットから除外する色を指定します。

maximumColorCount()

このメソッドは、パレットに含まれる色の最大数を設定します。デフォルト値は 16 です。最適な値はソース画像によって異なります。風景の場合の最適な値は 8 ～ 16 ですが、顔が写っている画像の場合、通常は 24 ～ 32 の値になります。Palette.Builder はより多くの色のパレットを生成するのに時間がかかります。

setRegion()

このメソッドは、ビルダーがパレットを作成する際に使用するビットマップの領域を示します。このメソッドは、ビットマップからパレットを生成する場合にのみ使用でき、元の画像には影響しません。

addTarget()

このメソッドでは、Target カラー プロファイルをビルダーに追加することで、独自のカラー マッチングを実行できます。デフォルトの Target では不十分な場合、上級開発者は Target.Builder を使用して独自の Target を作成できます。

カラー プロファイルを抽出する

Palette ライブラリは、マテリアル デザインの標準に基づいて、よく使用されるカラー プロファイルを画像から抽出します。各プロファイルは Target によって定義され、ビットマップ画像から抽出された色は、彩度、輝度、母集団（色で表されるビットマップ内のピクセル数）に基づいて各プロファイルに対してスコア付けされます。プロファイルごとに、スコアが最も高い色によって、指定された画像のカラー プロファイルが定義されます。

デフォルトでは、Palette オブジェクトには指定された画像から取得した 16 原色が含まれます。パレットを生成するときに、Palette.Builder を使用して色の数をカスタマイズできます。より多くの色を抽出すると、各カラー プロファイルで一致する候補の数が増えますが、パレットの生成時の Palette.Builder の処理時間が長くなります。

Palette ライブラリは、次の 6 つのカラー プロファイルの抽出を試みます。

• 明るいビブラント
• ビブラント
• 暗いビブラント
• 明るいミュート
• ミュート
• 暗いミュート

Palette の各 get<Profile>Color() メソッドは、その特定のプロファイルに関連付けられたパレット内の色を返します。<Profile> は 6 つのカラー プロファイルのいずれかの名前に置き換えられます。たとえば、ダーク ビブラントのカラー プロファイルを取得するメソッドは getDarkVibrantColor() です。すべての画像にすべてのカラー プロファイルが含まれているわけではないため、返されるデフォルトの色を指定します。

図 1 は、get<Profile>Color() メソッドで取得した写真とそれに対応するカラー プロファイルを示しています。

見本を使用してカラーパターンを作成する

また、Palette クラスは各カラー プロファイルの Palette.Swatch オブジェクトを生成します。Palette.Swatch オブジェクトには、プロファイルに関連する色と、色の母集団（ピクセル単位）が含まれます。

見本には、HSL 値やピクセル母集団など、色プロファイルに関する詳細情報にアクセスするための追加のメソッドがあります。見本を使用すると、getBodyTextColor() メソッドと getTitleTextColor() メソッドで、より包括的なカラーパターンとアプリテーマを作成できます。これらのメソッドは、見本の色に対して使用するのに適した色を返します。

Palette の各 get<Profile>Swatch() メソッドは、その特定のプロファイルに関連付けられた見本を返します。<Profile> は 6 つのカラー プロファイルのいずれかの名前に置き換えられます。パレットの get<Profile>Swatch() メソッドはデフォルト値のパラメータを必要としませんが、その特定のプロファイルが画像に存在しない場合、null を返します。そのため、見本が null でないことを確認してから使用します。たとえば、次のコードは、Vibrant 見本が null でない場合に、パレットからタイトルのテキストの色を取得します。

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

パレット内のすべての色にアクセスするには、getSwatches() メソッドは、画像から生成されたすべての見本のリストを返します。これには、標準の 6 つのカラー プロファイルも含まれます。

次のコード スニペットは、前述のコード スニペットのメソッドを使用してパレットを同期的に生成し、鮮やかな見本を取得して、ビットマップ画像に合わせてツールバーの色を変更します。図 2 は、生成された画像とツールバーを示しています。

// 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))
    }
}

// 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);
}