Farben mit der Palette API auswählen

Gutes visuelles Design ist für eine erfolgreiche App unerlässlich. Farbschemata sind ein wesentlicher Bestandteil des Designs. Die Palette-Bibliothek ist eine Jetpack-Bibliothek, die auffällige Farben aus Bildern extrahiert, um optisch ansprechende Apps zu erstellen.

Sie können die Palettenbibliothek verwenden, um Layoutdesigns zu entwerfen und benutzerdefinierte Farben auf visuelle Elemente in Ihrer App anzuwenden. So können Sie beispielsweise mit einer Palette eine farbkoordinierte Titelkarte für einen Titel basierend auf seinem Albumcover erstellen oder die Symbolleistenfarbe einer App anpassen, wenn sich ihr Hintergrundbild ändert. Mit dem Objekt Palette erhältst du Zugriff auf die Farben in einem Bitmap Bild und es werden sechs Hauptfarbprofile aus der Bitmap für deine Designentscheidungen bereitgestellt.

Bibliothek einrichten

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

Kotlin

android {
    compileSdkVersion(33)
    ...
}

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

Groovig

android {
    compileSdkVersion 33
    ...
}

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

Palette erstellen

Mit einem Palette-Objekt erhalten Sie Zugriff auf die Primärfarben in einem Bild sowie auf die entsprechenden Farben für eingeblendeten Text. Mit Paletten können Sie den Stil Ihrer Anwendung entwerfen und das Farbschema Ihrer Anwendung basierend auf einem bestimmten Quellbild dynamisch ändern.

Zum Erstellen einer Palette müssen Sie zuerst eine Palette.Builder aus einer Bitmap instanziieren. Sie können dann Palette.Builder verwenden, um die Palette anzupassen, bevor Sie sie generieren. In diesem Abschnitt wird beschrieben, wie eine Palette anhand eines Bitmapbilds erstellt und angepasst wird.

Paletteninstanz generieren

Generieren Sie eine Palette-Instanz mit ihrer 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 wie die aufgerufene Methode erstellen möchten. Wenn Sie die Palette asynchron in einem anderen Thread generieren, können Sie die Methode onGenerated() verwenden, um direkt nach ihrer Erstellung auf die Palette zuzugreifen.

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

Kotlin

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

Java

// 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 die Palette-Instanzen im Cache speichern, um eine langsame UI-Leistung zu vermeiden. Erstellen Sie die Paletten nicht im Hauptthread.

Palette anpassen

Mit Palette.Builder können Sie die Palette anpassen. Dazu wählen Sie aus, wie viele Farben die resultierende Palette enthalten soll, welchen Bereich Ihres Bildes der Builder zum Generieren der Palette verwendet und welche Farben die Palette enthalten soll. Beispielsweise können Sie die Farbe Schwarz herausfiltern oder dafür sorgen, dass der Builder nur die obere Hälfte eines Bildes verwendet, um die Palette zu generieren.

Passen Sie die Größe und Farben der Palette mit den folgenden Methoden aus der Klasse Palette.Builder an:

addFilter()

Bei dieser Methode wird ein Filter hinzugefügt, der angibt, welche Farben in der resultierenden Palette zulässig sind. Übergeben Sie Ihre eigene Palette.Filter und ändern Sie ihre isAllowed()-Methode, um zu bestimmen, welche Farben aus der Palette gefiltert werden.

maximumColorCount()

Mit dieser Methode wird die maximale Anzahl von Farben in einer Palette festgelegt. Der Standardwert ist 16 und der optimale Wert hängt vom Quell-Image 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. Das Generieren von Paletten mit mehr Farben dauert mit Palette.Builder länger.

setRegion()

Diese Methode gibt an, 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 keinen Einfluss auf das Originalbild.

addTarget()

Mit dieser Methode können Sie einen eigenen Farbabgleich durchführen, indem Sie dem Builder ein Target-Farbprofil hinzufügen. Wenn die standardmäßige Target nicht ausreicht, können fortgeschrittene Entwickler mit einem Target.Builder eine eigene Target erstellen.

Farbprofile extrahieren

Anhand der Material Design-Standards extrahiert die Palette-Bibliothek häufig verwendete Farbprofile aus einem Bild. Jedes Profil wird durch eine Target definiert. Aus dem Bitmapbild extrahierte Farben werden anhand von Sättigung, Leuchtdichte und Population (Anzahl der Pixel in der Bitmap, dargestellt durch die Farbe) in jedem Profil bewertet. Für jedes Profil bestimmt die Farbe mit dem besten Wert das Farbprofil für das jeweilige Bild.

Standardmäßig enthält ein Palette-Objekt 16 Primärfarben eines bestimmten Bildes. Beim Generieren der Palette können Sie die Anzahl der Farben mit Palette.Builder anpassen. Wenn Sie mehr Farben extrahieren, ergeben sich mehr potenzielle Übereinstimmungen für jedes Farbprofil. Allerdings dauert das Generieren der Palette Palette.Builder jedoch länger.

Die Palettenbibliothek versucht, die folgenden sechs Farbprofile zu extrahieren:

• Leicht leuchtend
• Leuchtend
• Dunkel und leuchtend
• Licht stummgeschaltet
• stummgeschaltet,
• Dunkel gedeckt

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

In Abbildung 1 sind ein Foto und die entsprechenden Farbprofile aus den get<Profile>Color()-Methoden zu sehen.

Abbildung 1: Ein Beispielbild und die extrahierten Farbprofile unter Berücksichtigung der standardmäßigen maximalen Farbzahl (16) für die Palette.

Verwenden Sie Muster, um Farbschemata zu erstellen.

Die Klasse Palette generiert außerdem Palette.Swatch-Objekte für jedes Farbprofil. Palette.Swatch-Objekte enthalten die zugehörige Farbe für dieses Profil sowie die Grundgesamtheit der Farbe in Pixeln.

Muster haben zusätzliche Methoden, um auf weitere Informationen zum Farbprofil zuzugreifen, z. B. HSL-Werte und Pixelpopulation. Sie können Muster verwenden, um mithilfe der Methoden getBodyTextColor() und getTitleTextColor() umfassendere Farbschemata und App-Designs zu erstellen. Diese Methoden geben Farben zurück, die für die Verwendung über der Farbe des Musters geeignet sind.

Jede get<Profile>Swatch()-Methode von Palette gibt das mit diesem Profil verknüpfte Muster zurück, wobei <Profile> durch den Namen eines der sechs Farbprofile ersetzt wird. Für die get<Profile>Swatch()-Methoden der Palette sind zwar keine Standardwertparameter erforderlich, aber sie geben null zurück, wenn dieses Profil nicht im Bild vorhanden ist. Überprüfen Sie daher, ob ein Muster nicht null ist, bevor Sie es verwenden. Mit dem folgenden Code wird beispielsweise die Titeltextfarbe aus einer Palette abgerufen, wenn das Muster "Vibrant" nicht null ist:

Kotlin

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

Java

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

Für den Zugriff auf alle Farben in einer Palette gibt die Methode getSwatches() eine Liste aller Muster zurück, die aus einem Bild generiert wurden, einschließlich der sechs Standardfarbprofile.

Das folgende Code-Snippet verwendet die Methoden aus den vorherigen Code-Snippets, um synchron eine Palette zu generieren, ihr lebendiges Muster abzurufen und die Farben einer Symbolleiste an das Bitmapbild anzupassen. Abbildung 2 zeigt das resultierende Bild und die Symbolleiste.

Kotlin

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

Java

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

Abbildung 2. Ein Beispielbild mit der Symbolleiste in lebhaften Farben und der entsprechenden Titeltextfarbe