Farben mit der Palette API auswählen

Gutes visuelles Design ist für eine erfolgreiche App unerlässlich und Farbschemata sind ein wesentlicher 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 Layoutdesigns entwerfen und benutzerdefinierte Farben auf visuelle Elemente in Ihrer App anwenden. Mit einer Palette können Sie beispielsweise eine farbkoordinierte Titelkarte für einen Titel basierend auf seinem Albumcover erstellen oder die Farbe der Symbolleiste einer App anpassen, wenn sich das Hintergrundbild ändert. Mit dem Objekt Palette können Sie auf die Farben in einem Bitmap-Bild zugreifen und außerdem sechs Hauptfarbprofile aus der Bitmap bereitstellen, um Ihre Designentscheidungen zu treffen.

Bibliothek einrichten

Wenn Sie die Palettenbibliothek verwenden möchten, fügen Sie Folgendes zu build.gradle hinzu:

android {
    compileSdkVersion(33)
    ...
}

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

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 Vorlagen können Sie den Stil Ihrer App gestalten und das Farbschema Ihrer App basierend auf einem bestimmten Quellbild dynamisch ändern.

Instanziieren Sie zuerst eine Palette.Builder aus einer Bitmap, um eine Palette zu erstellen. Anschließend können Sie die Palette mit Palette.Builder anpassen, bevor Sie sie generieren. In diesem Abschnitt wird die Erstellung und Anpassung von Paletten mithilfe eines Bitmapbilds beschrieben.

Palette-Instanz generieren

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

Der Builder kann die Palette synchron oder asynchron generieren. Verwenden Sie die synchrone Erstellung von Paletten, wenn Sie die Palette in demselben Thread wie die aufgerufene Methode erstellen möchten. Wenn Sie die Palette asynchron in einem anderen Thread generieren, verwenden Sie die Methode onGenerated(), um auf die Palette sofort nach ihrer Erstellung zuzugreifen.

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

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

Palette anpassen

Mit Palette.Builder können Sie Ihre Palette anpassen. Dazu wählen Sie aus, wie viele Farben die Palette enthält, welchen Bereich Ihres Images der Builder zum Generieren der Palette verwendet und welche Farben in der Palette enthalten sind. Sie können beispielsweise die schwarze Farbe 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 aus der Klasse Palette.Builder können Sie die Größe und Farben der Palette optimieren:

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 die isAllowed()-Methode, um zu bestimmen, welche Farben aus der Palette gefiltert werden.

maximumColorCount()

Mit dieser Methode wird die maximale Anzahl von Farben in der 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 normalerweise Werte zwischen 24 und 32 haben. Mit Palette.Builder dauert es länger, um Vorlagen 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 wirkt sich nicht auf das Originalbild aus.

addTarget()

Mit dieser Methode können Sie einen eigenen Farbabgleich durchführen, indem Sie dem Builder ein Target-Farbprofil hinzufügen. Wenn der Standardwert für Target nicht ausreicht, können fortgeschrittene Entwickler ihre eigene Target mit einer Target.Builder erstellen.

Farbprofile extrahieren

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

Standardmäßig enthält ein Palette-Objekt 16 Primärfarben aus einem bestimmten Bild. Beim Erstellen der Palette können Sie die Anzahl der Farben mit Palette.Builder anpassen. Durch das Extrahieren weiterer Farben werden mehr potenzielle Übereinstimmungen für die einzelnen Farbprofile erzielt. Allerdings dauert Palette.Builder beim Generieren der Palette länger.

Die Palettenbibliothek versucht, die folgenden sechs Farbprofile zu extrahieren:

• Hell und leuchtend
• Leuchtend
• Dunkel, leuchtend
• Licht stummgeschaltet
• stummgeschaltet,
• Dunkel stummgeschaltet

Jede der get<Profile>Color()-Methoden in Palette gibt die Farbe in der Palette zurück, die dem jeweiligen Profil zugeordnet ist. Dabei wird <Profile> durch den Namen eines der sechs Farbprofile ersetzt. Beispielsweise lautet die Methode zum Abrufen des Farbprofils „Dark Lively“ getDarkVibrantColor(). Da nicht alle Bilder alle Farbprofile enthalten, sollten Sie eine Standardfarbe angeben, die zurückgegeben werden soll.

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

Farbschemata mithilfe von Mustern 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 bieten zusätzliche Methoden für den Zugriff auf weitere Informationen über das Farbprofil, z. B. HSL-Werte und Pixelpopulation. Mithilfe von Muster können Sie mithilfe der Methoden getBodyTextColor() und getTitleTextColor() umfassendere Farbschemas und App-Designs erstellen. Diese Methoden geben Farben zurück, die anstelle der Farbe des Musters verwendet werden können.

Jede get<Profile>Swatch()-Methode aus Palette gibt das mit dem jeweiligen 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, sie geben aber null zurück, wenn das Profil nicht im Bild vorhanden ist. Prüfen Sie daher vor der Verwendung eines Musters, ob es null ist. Mit dem folgenden Code wird beispielsweise die Titeltextfarbe aus einer Palette abgerufen, wenn das Farbfeld „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();
    // ...
}

Um auf alle Farben in einer Palette zuzugreifen, gibt die Methode getSwatches() eine Liste aller aus einem Bild generierten Muster zurück, einschließlich der sechs standardmäßigen Farbprofile.

Im folgenden Code-Snippet werden die Methoden aus den vorherigen Code-Snippets verwendet, um eine Palette synchron zu generieren, ein lebendiges Farbmuster abzurufen und die Farben einer Symbolleiste so zu ändern, dass sie dem Bitmapbild entsprechen. 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);
}