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

優れたビジュアル デザインはアプリの成功に不可欠であり、カラーパターンはデザインの主要な要素です。Palette ライブラリは、画像から目立つ色を抽出して視覚的に魅力的なアプリを作成するための Jetpack ライブラリです。

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

ライブラリを設定する

Palette ライブラリを使用するには、build.gradle に以下を追加します。

android {
    compileSdkVersion(36)
    ...
}

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

android {
    compileSdkVersion 36
    ...
}

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

パレットを作成する

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

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

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

Palette インスタンスを生成するには、from(Bitmap bitmap) メソッドを使用して、まず 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 つのカラー プロファイルのいずれかの名前に置き換えられます。たとえば、Dark Vibrant カラー プロファイルを取得するメソッドは 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);
}