Farben mit der Palette API auswählen

Ein gutes visuelles Design ist für eine erfolgreiche App unerlässlich und Farbschemas sind eine Hauptkomponente 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 entwerfen 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 Objekt Palette ermöglicht den Zugriff auf die Farben in einem Bitmap-Bild und stellt sechs Hauptfarbprofile aus der Bitmap bereit, die Sie bei Ihren Designentscheidungen unterstützen.

Bibliothek einrichten

Wenn Sie die Palette-Bibliothek verwenden möchten, fügen Sie der Datei build.gradle Folgendes hinzu:

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 eingeblendeten Text. Mit Paletten können Sie den Stil Ihrer App entwerfen und das Farbschema Ihrer App dynamisch anhand eines bestimmten Quellbilds ändern.

Wenn Sie eine Palette erstellen möchten, instanziieren Sie zuerst ein Palette.Builder aus einem Bitmap. Anschließend können Sie die Palette mit Palette.Builder anpassen, bevor Sie sie generieren. In diesem Abschnitt wird beschrieben, wie Sie eine Palette aus einem Bitmapbild generieren und anpassen.

Palette-Instanz generieren

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

Der Builder kann die Palette synchron oder asynchron generieren. Verwenden Sie die synchrone Palettenerstellung, wenn Sie die Palette im selben Thread wie die aufgerufene Methode erstellen möchten. Wenn Sie die Palette asynchron in einem anderen Thread generieren, verwenden Sie die Methode onGenerated(), um sofort nach dem Erstellen auf die Palette zuzugreifen.

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

// 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 du kontinuierlich Paletten für eine sortierte Liste von Bildern oder Objekten generieren musst, solltest du die Palette-Instanzen im Cache speichern, um eine langsame UI-Leistung zu vermeiden. Erstellen Sie die Paletten nicht im Hauptthread.

Palette anpassen

Mit dem Palette.Builder können Sie Ihre Palette anpassen, indem Sie festlegen, wie viele Farben die resultierende Palette enthält, welchen Bereich Ihres 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 festlegen, dass der Builder nur die obere Hälfte eines Bildes verwendet, um die Palette zu generieren.

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

addFilter()

Diese Methode fügt einen Filter hinzu, der angibt, welche Farben in der resultierenden Palette zulässig sind. Übergib deine eigene Palette.Filter und ändere die Methode isAllowed(), um festzulegen, welche Farben aus der Palette gefiltert werden.

maximumColorCount()

Mit dieser Methode wird die maximale Anzahl von Farben in Ihrer Palette festgelegt. Der Standardwert ist 16. Der optimale Wert hängt vom Quellbild ab. Bei Landschaftsaufnahmen liegen die optimalen Werte zwischen 8 und 16, während Bilder mit Gesichtern normalerweise Werte zwischen 24 und 32 haben. Die Palette.Builder benötigt mehr Zeit, um Paletten mit mehr Farben zu generieren.

setRegion()

Diese Methode gibt an, welchen Bereich der Bitmap der Builder beim Erstellen der Palette verwendet. Diese Methode kann nur verwendet werden, wenn die Palette aus einer Bitmap generiert wird. Das Originalbild wird dadurch nicht beeinflusst.

addTarget()

Mit dieser Methode können Sie einen eigenen Farbabgleich durchführen, indem Sie dem Builder ein Target-Farbprofil hinzufügen. Wenn die Standard-Target nicht ausreicht, können fortgeschrittene Entwickler mit einem Target.Builder eine eigene 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 für jedes Profil anhand von Sättigung, Luminanz und Population (Anzahl der Pixel in der Bitmap, die durch die Farbe dargestellt werden) bewertet. Für jedes Profil definiert die Farbe mit der besten Punktzahl das 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 Palette.Builder anpassen. Wenn mehr Farben extrahiert werden, gibt es mehr potenzielle Übereinstimmungen für jedes Farbprofil. Allerdings dauert es dann auch länger, bis Palette.Builder die Palette generiert hat.

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

• Hell und dynamisch
• Leuchtend
• Dark Vibrant
• Licht gedimmt
• Stummgeschaltet
• Dunkel, gedämpft

Jede der get<Profile>Color()-Methoden in Palette gibt die Farbe in der Palette zurück, die mit dem jeweiligen Profil verknüpft ist. Dabei wird <Profile> durch den Namen eines der sechs Farbprofile ersetzt. Die Methode zum Abrufen des Farbprofils „Dark Vibrant“ lautet 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.

Farbfelder zum Erstellen von Farbschemas verwenden

Die Klasse Palette 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 mit dieser Farbe.

Farbfelder bieten zusätzliche Methoden, um weitere Informationen zum Farbprofil abzurufen, z. B. HSL-Werte und Pixelpopulation. Mit Farbfeldern können Sie mithilfe der Methoden getBodyTextColor() und getTitleTextColor() umfassendere Farbschemas und App-Designs erstellen. Diese Methoden geben Farben zurück, die für die Verwendung über der Farbe des Farbfelds geeignet sind.

Jede get<Profile>Swatch()-Methode von Palette gibt das Farbmuster zurück, das mit dem jeweiligen Profil verknüpft ist. Dabei wird <Profile> durch den Namen eines der sechs Farbprofile ersetzt. Die get<Profile>Swatch()-Methoden der Palette erfordern zwar keine Standardwertparameter, geben aber null zurück, wenn das jeweilige Profil im Bild nicht vorhanden ist. Prüfe daher, ob ein Farbfeld null ist, bevor du es verwendest. Mit dem folgenden Code wird beispielsweise die Textfarbe des Titels aus einer Palette abgerufen, wenn das Vibrant-Swatch 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();
    // ...
}

Wenn du auf alle Farben in einer Palette zugreifen möchtest, kannst du die Methode getSwatches() verwenden. Sie gibt eine Liste aller Farbfelder 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 lebendige Farbfeld 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);
}