Sélectionner des couleurs avec l'API Palette

Une bonne conception visuelle est essentielle à une application performante, et les jeux de couleurs sont un élément principal de la conception. La La bibliothèque Palette est un Jetpack qui extrait des couleurs proéminentes à partir d'images pour les rendre visuellement attrayantes applications.

Vous pouvez utiliser la bibliothèque Palette pour concevoir des thèmes de mise en page et appliquer des couleurs personnalisées aux éléments visuels de votre application. Par exemple, vous pouvez utiliser une palette pour créer une carte de titre coordonnée aux couleurs d'un titre en fonction de la pochette de son album ou pour ajuster la couleur de la barre d'outils d'une application lorsque son image de fond change. La Palette vous donne accès aux couleurs d'une Bitmap image tout en fournissant six profils de couleur principaux du bitmap pour informer choix de conception.

Configurer la bibliothèque

Pour utiliser la bibliothèque Palette, ajoutez ce qui suit à votre build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

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

Groovy

android {
    compileSdkVersion 33
    ...
}

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

Créer une palette

Un objet Palette vous donne accès aux couleurs primaires d'une l'image et les couleurs correspondantes pour le texte superposé. Utilisez des palettes pour concevoir le style de votre application et modifier dynamiquement son jeu de couleurs en fonction d'une image source donnée.

Pour créer une palette, instanciez d'abord un Palette.Builder à partir d'un Bitmap. Vous pouvez ensuite utiliser Palette.Builder pour personnaliser la palette avant de la générer. Cette section décrit la génération et la personnalisation de palettes à partir d'une image bitmap.

Générer une instance de palette

Générez une instance Palette à l'aide de sa méthode from(Bitmap bitmap) pour créer d'abord un Palette.Builder à partir d'un Bitmap.

L'outil de création peut générer la palette de manière synchrone ou asynchrone. Utilisez la génération de palette synchrone si vous souhaitez créer la palette sur le même thread que la méthode appelée. Si vous générez la palette de manière asynchrone, sur un fil de discussion différent, utilisez la onGenerated() pour accéder à la palette immédiatement après sa création.

L'extrait de code suivant fournit des exemples de méthodes pour les deux types de génération de palettes :

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

Si vous devez générer en continu des palettes pour une liste triée d'images ou des objets, envisagez mettre en cache Palette instances pour éviter une lenteur des performances de l'interface utilisateur. Ne créez pas les palettes sur votre thread principal.

Personnaliser votre palette

Palette.Builder vous permet de personnaliser votre palette en choisissant le nombre de couleurs de la palette générée, la zone de votre image utilisée par le générateur pour générer la palette et les couleurs incluses dans la palette. Par exemple, vous pouvez filtrer la couleur noire ou vous assurer que le compilateur n'utilise que la moitié supérieure d'une image pour générer votre palette.

Ajustez la taille et les couleurs de votre palette à l'aide des méthodes suivantes de la classe Palette.Builder :

addFilter()

Cette méthode ajoute un filtre qui indique les couleurs autorisées dans la palette obtenue. Transmettez votre propre Palette.Filter et modifiez sa méthode isAllowed() pour déterminer quelles couleurs sont filtrées de la palette.

maximumColorCount()

Cette méthode définit le nombre maximal de couleurs dans votre palette. La valeur par défaut est de 16. La valeur optimale dépend de l'image source. Pour des paysages, les valeurs optimales sont comprises entre 8 et 16, alors que les photos avec des visages ont des valeurs comprises entre 24 et 32. La génération de palettes avec plus de couleurs prend plus de temps avec Palette.Builder.

setRegion()

Cette méthode indique la zone du bitmap utilisée par le compilateur pour créer la palette. Vous ne pouvez utiliser cette méthode que pour générer la palette à partir d'un bitmap. Elle n'a aucune incidence sur l'image d'origine.

addTarget()

Cette méthode vous permet d'effectuer votre propre mise en correspondance des couleurs en ajoutant un profil de couleur Target au générateur. Si le Target par défaut est insuffisant, les développeurs expérimentés peuvent créer leur propre Target à l'aide d'un Target.Builder.

Extraire des profils de couleurs

Basée sur les normes de Material Design, la bibliothèque Palette extrait des profils de couleurs couramment utilisés à partir d'une image. Chaque profil est défini par un Target, et les couleurs sont extraites de l'image bitmap sont évalués pour chaque profil en fonction de leur saturation, la luminance et la population (nombre de pixels dans le bitmap représenté par couleur). Pour chaque profil, la couleur avec le meilleur score définit cette couleur. pour l'image donnée.

Par défaut, un objet Palette contient 16 couleurs primaires issues d'une une image donnée. Lors de la génération de votre palette, vous pouvez personnaliser le nombre de couleurs à l'aide des Palette.Builder L'extraction de couleurs augmente le potentiel correspond à chaque profil de couleur, mais provoque également Palette.Builder peut prendre plus de temps lors de la génération de la palette.

La bibliothèque Palette tente d'extraire les six profils de couleurs suivants :

• Vif
• Vibrant
• Vif foncé
• Léger désactivé
• Leur son est coupé.
• Sombre coupé

Chacune des méthodes get<Profile>Color() de Palette renvoie la couleur de la palette associée. profil particulier, où <Profile> est remplacé par le nom de l'un des six profils de couleur. Par exemple, la méthode permettant d'obtenir le profil de couleurs Dark Vibrant est getDarkVibrantColor(). Étant donné que toutes les images ne contiennent pas tous les profils de couleur, fournissez une couleur par défaut pour retour.

La figure 1 affiche une photo et ses profils de couleur correspondants à partir de get<Profile>Color().

Image 1. Exemple d'image et de profils de couleurs extraits en fonction du nombre maximal de couleurs par défaut (16) de la palette.

Utiliser des échantillons pour créer des jeux de couleurs

La classe Palette génère également Palette.Swatch des objets pour chaque profil de couleur. Les objets Palette.Swatch contiennent couleur associée à ce profil ainsi que la population de la couleur dans de pixels.

Les échantillons disposent de méthodes supplémentaires pour accéder à davantage d'informations sur le profil de couleur, comme les valeurs TSL et le nombre de pixels. Vous pouvez utiliser des échantillons pour créer des jeux de couleurs et des thèmes d'applications plus complets à l'aide de getBodyTextColor() et getTitleTextColor() méthodes. Ces méthodes renvoient des couleurs appropriées pour une utilisation sur la couleur.

Chaque méthode get<Profile>Swatch() de Palette renvoie l'échantillon associé à ce profil particulier, où <Profile> est remplacé par le nom de l'une les six profils de couleur. Bien que la palette Les méthodes get<Profile>Swatch() ne nécessitent pas de valeurs par défaut , ils renvoient null si ce profil particulier n'existe pas dans l'image. Par conséquent, vérifiez qu'un échantillon n'est pas nul avant de l'utiliser. Par exemple, le code suivant récupère la couleur du texte du titre à partir d'une palette si l'échantillon Vibrant n'est pas nul :

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

Pour accéder à toutes les couleurs d'une palette, getSwatches() renvoie la liste de tous les échantillons générés à partir d'une image, y compris les standards six profils de couleur.

L'extrait de code suivant utilise les méthodes du code précédent extraits pour générer une palette de manière synchrone, obtenir son échantillon dynamique et modifier les couleurs d'une barre d'outils pour correspondre à l'image bitmap. La figure 2 affiche l'image et la barre d'outils obtenues.

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

Figure 2 : Exemple d'image avec sa barre d'outils aux couleurs vives et la couleur du texte du titre correspondant.