Farben mit der Palette API auswählen

Ein gutes visuelles Design ist für eine erfolgreiche App unerlässlich und Farbschemata sind ein wichtiger Bestandteil des Designs. Die Palette-Bibliothek ist eine Jetpack Bibliothek, die markante Farben aus Bildern extrahiert, um visuell ansprechende Apps zu erstellen.

Mit der Palette-Bibliothek können Sie Layout designs erstellen und benutzerdefinierte Farben auf visuelle Elemente in Ihrer App anwenden. Sie können beispielsweise eine Palette verwenden, um eine farblich abgestimmte Titelkarte für einen Song basierend auf dem Albumcover zu erstellen oder die Farbe der Symbolleiste einer App anzupassen, wenn sich das Hintergrundbild ändert. Das Palette Objekt bietet Zugriff auf die Farben in einem BitmapBild und stellt außerdem sechs Hauptfarbprofile aus der Bitmap bereit, um Ihre Designentscheidungenzu unterstützen.

Bibliothek einrichten

Fügen Sie Folgendes zu build.gradle hinzu, um die Palette-Bibliothek zu verwenden:

android {
    compileSdkVersion(36)
    ...
}

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

android {
    compileSdkVersion 36
    ...
}

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

Palette erstellen

Ein Palette-Objekt bietet Zugriff auf die Primärfarben in einem Bild sowie auf die entsprechenden Farben für überlagerten Text. Verwenden Sie Paletten, um den Stil Ihrer App zu gestalten und das Farbschema Ihrer App dynamisch basierend auf einem bestimmten Quellbild zu ändern.

Um eine Palette zu erstellen, instanziieren Sie zuerst einen Palette.Builder aus einer Bitmap. Anschließend können Sie die Palette mit Palette.Builder anpassen, bevor Sie sie generieren. In diesem Abschnitt wird die Palettengenerierung und -anpassung aus einem Bitmap-Bild beschrieben.

Palette-Instanz generieren

Generieren Sie eine Palette-Instanz mit der from(Bitmap bitmap) Methode, um zuerst eine Palette.Builder aus einer Bitmap zu erstellen.

Der Builder kann die Palette synchron oder asynchron generieren. Verwenden Sie die synchrone Palettengenerierung, wenn Sie die Palette im selben Thread erstellen möchten, in dem die Methode aufgerufen wird. Wenn Sie die Palette asynchron in einem anderen Thread generieren, verwenden Sie die Methode onGenerated(), um direkt nach der Erstellung auf die Palette zuzugreifen.

Das folgende Code-Snippet enthält Beispielmethoden für beide Arten der Palettengenerierung:

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

Wenn Sie kontinuierlich Paletten für eine sortierte Liste von Bildern oder Objekten generieren müssen, sollten Sie das Caching der Palette Instanzen in Betracht ziehen, um eine langsame UI-Leistung zu vermeiden. Erstellen Sie die Paletten nicht im Hauptthread.

Palette anpassen

Mit Palette.Builder können Sie Ihre Palette anpassen, indem Sie auswählen, wie viele Farben in der resultierenden Palette enthalten sind, welchen Bereich des Bildes der Builder zum Generieren der Palette verwendet und welche Farben in der Palette enthalten sind. Sie können beispielsweise die Farbe Schwarz herausfiltern oder dafür sorgen, dass der Builder nur die obere Hälfte eines Bildes verwendet, um Ihre Palette zu generieren.

Mit den folgenden Methoden der Klasse Palette.Builder können Sie die Größe und die Farben Ihrer Palette anpassen:

addFilter()

Mit dieser Methode wird ein Filter hinzugefügt, der angibt, welche Farben in der resultierenden Palette zulässig sind. Übergeben Sie Ihren eigenen Palette.Filter und ändern Sie die Methode isAllowed(), um festzulegen, welche Farben aus der Palette gefiltert werden.

maximumColorCount()

Mit dieser Methode wird die maximale Anzahl der Farben in Ihrer Palette festgelegt. Der Standardwert ist 16 und der optimale Wert hängt vom Quellbild ab. Bei Landschaften liegen die optimalen Werte zwischen 8 und 16, während Bilder mit Gesichtern in der Regel Werte zwischen 24 und 32 haben. Die Palette.Builder dauert länger, um Paletten mit mehr Farben zu generieren.

setRegion()

Mit dieser Methode wird angegeben, welchen Bereich der Bitmap der Builder beim Erstellen der Palette verwendet. Sie können diese Methode nur verwenden, wenn Sie die Palette aus einer Bitmap generieren. Sie hat keine Auswirkungen auf das Originalbild.

addTarget()

Mit dieser Methode können Sie Ihre eigene Farbabstimmung durchführen, indem Sie dem Builder ein Target Farbprofil hinzufügen. Wenn das Standard-Target nicht ausreicht, können fortgeschrittene Entwickler mit Target.Builder ein eigenes Target erstellen.

Farbprofile extrahieren

Basierend auf den Standards von Material Design extrahiert die Palette-Bibliothek häufig verwendete Farbprofile aus einem Bild. Jedes Profil wird durch ein Target definiert. Die aus dem Bitmap-Bild extrahierten Farben werden anhand der Sättigung, Luminanz und Population (Anzahl der Pixel in der Bitmap, die durch die Farbe dargestellt werden) mit jedem Profil verglichen. Für jedes Profil definiert die Farbe mit der besten Bewertung dieses Farbprofil für das jeweilige Bild.

Standardmäßig enthält ein Palette-Objekt 16 Primärfarben aus einem bestimmten Bild. Beim Generieren der Palette können Sie die Anzahl der Farben mit dem Palette.Builder anpassen. Wenn Sie mehr Farben extrahieren, gibt es mehr potenzielle Übereinstimmungen für jedes Farbprofil. Die Generierung der Palette mit Palette.Builder dauert dann aber auch länger.

Die Palette-Bibliothek versucht, die folgenden sechs Farbprofile zu extrahieren:

• Light Vibrant
• Vibrant
• Dark Vibrant
• Light Muted
• Muted
• Dark Muted

Jede der get<Profile>Color() Methoden in Palette gibt die Farbe in der Palette zurück, die mit diesem Profil verknüpft ist. Dabei wird <Profile> durch den Namen eines der sechs Farbprofile ersetzt. Die Methode zum Abrufen des Farbprofils „Dark Vibrant“ ist beispielsweise getDarkVibrantColor(). Da nicht alle Bilder alle Farbprofile enthalten, geben Sie eine Standardfarbe an, die zurückgegeben werden soll.

Abbildung 1 zeigt ein Foto und die entsprechenden Farbprofile aus den get<Profile>Color() Methoden.

Farbmuster zum Erstellen von Farbschemata verwenden

Die Palette Klasse generiert auch Palette.Swatch Objekte für jedes Farbprofil. Palette.Swatch -Objekte enthalten die zugehörige Farbe für dieses Profil sowie die Anzahl der Pixel in der Farbe.

Farbmuster haben zusätzliche Methoden für den Zugriff auf weitere Informationen zum Farbprofil, z. B. HSL-Werte und Pixelanzahl. Mit Farbmustern können Sie mit den Methoden getBodyTextColor() und getTitleTextColor() umfassendere Farbschemata und App-Designs erstellen. Diese Methoden geben Farben zurück, die für die Verwendung über der Farbe des Farbmusters geeignet sind.

Jede der get<Profile>Swatch() Methoden aus Palette gibt das Farbmuster zurück, das mit diesem Profil verknüpft ist, wobei <Profile> durch den Namen eines der sechs Farbprofile ersetzt wird. Für die Methoden get<Profile>Swatch() der Palette sind keine Standardwertparameter erforderlich. Sie geben jedoch null zurück, wenn dieses Profil im Bild nicht vorhanden ist. Prüfen Sie daher, ob ein Farbmuster nicht null ist, bevor Sie es verwenden. Der folgende Code ruft beispielsweise die Farbe des Titeltexts aus einer Palette ab, wenn das Farbmuster „Vibrant“ nicht null ist:

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

Mit der Methode getSwatches() können Sie auf alle Farben in einer Palette zugreifen. Sie gibt eine Liste aller Farbmuster zurück, die aus einem Bild generiert wurden, einschließlich der sechs Standardfarbprofile.

Im folgenden Code-Snippet werden die Methoden aus den vorherigen Code-Snippets verwendet, um synchron eine Palette zu generieren, das Farbmuster „Vibrant“ abzurufen und die Farben einer Symbolleiste an das Bitmap-Bild anzupassen. Abbildung 2 zeigt das resultierende Bild und die Symbolleiste.

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