Selecionar cores com a API Palette

Um bom design visual é essencial para um app de sucesso, e o esquema de cores é componente principal do design. O A biblioteca de paleta é uma biblioteca do Jetpack que extrai cores proeminentes de imagens para criar visualmente envolventes apps.

Você pode usar a biblioteca de paletas para criar o layout temas e aplicar cores personalizadas a elementos visuais em seu aplicativo. Por exemplo, você pode usar uma paleta para criar uma um cartão de título coordenado de cores para uma música com base na capa do álbum ou para ajustar um na barra de ferramentas do app quando a imagem de plano de fundo muda. O objeto Palette dá acesso às cores em uma imagem Bitmap e também oferece seis perfis de cores principais do bitmap para informar suas escolhas de design.

Configurar a biblioteca

Para usar a biblioteca Palette, adicione o seguinte ao 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'
}

Criar uma paleta

Um objeto Palette fornece acesso às cores primárias em um e as cores correspondentes para o texto sobreposto. Use paletas para criar o estilo do seu app e mudar o esquema de cores de forma dinâmica com base em uma determinada imagem de origem.

Para criar uma paleta, primeiro instancie um Palette.Builder de um Bitmap. Você pode usar o Palette.Builder para personalizar a paleta antes de gerá-la. Esta seção descreve as e personalização a partir de uma imagem de bitmap.

Gerar uma instância de Palette

Gere uma instância de Palette usando o método from(Bitmap bitmap) para criar um Palette.Builder a partir de um Bitmap.

O builder pode gerar a paleta de forma síncrona ou assíncrona. Usar a geração síncrona de paletas, se você quiser criar a paleta na mesma como o método que está sendo chamado. Se você gerar a paleta de forma assíncrona, em um thread diferente, use o onGenerated() para acessar a paleta imediatamente após ela ser criada.

O snippet de código a seguir fornece métodos de exemplo para os dois tipos de paleta geração:

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

Se você precisar gerar paletas continuamente para uma lista classificada de imagens ou objetos, considere armazenando em cache o Palette instâncias para evitar um desempenho lento da interface. Não crie o e paletas linha de execução principal.

Personalizar sua paleta

O Palette.Builder permite personalizar a paleta escolhendo quantas cores existem na paleta resultante, em que área da imagem a builder usa para gerar a paleta e quais cores estão incluídas na paleta. Por exemplo, é possível filtrar a cor preta ou garantir que o builder usa somente a metade superior de uma imagem para gerar sua paleta.

Ajuste o tamanho e as cores de sua paleta com os seguintes métodos da Classe Palette.Builder:

addFilter()

Este método adiciona um filtro que indica quais cores são permitidas na paleta resultante. Transmita seu próprio Palette.Filter e modificar o método isAllowed() para determinar quais cores são filtrada da paleta.

maximumColorCount()

Este método configura o número máximo de cores na paleta. O valor padrão é 16, e o valor ideal depende da imagem de origem. Para paisagens, os valores ideais variam de 8 a 16, enquanto fotos com rostos geralmente têm valores de 24 a 32. O Palette.Builder demora mais para gerar paletas com mais cores.

setRegion()

Este método indica qual área do bitmap o builder usa ao criar a paleta. Esse método só pode ser usado ao gerar a paleta de um bitmap e isso não afeta a imagem original.

addTarget()

Este método permite que você faça sua própria correspondência de cores adicionando um perfil de cores Target ao builder. Se o Target padrão não for suficiente, desenvolvedores avançados poderão criar o próprio Target usando um Target.Builder.

Extrair perfis de cores

Com base no normas do Material Design Design, a biblioteca de paletas extrai os perfis de cores mais usados de uma imagem. Cada perfil é definido por um Target, e as cores são extraídas da imagem de bitmap são pontuados em relação a cada perfil com base na saturação, luminância e população (número de pixels no bitmap representado pelo cor). Em cada perfil, a cor com a melhor pontuação define o perfil de cores da imagem especificada.

Por padrão, um objeto Palette contém 16 cores primárias de uma determinada imagem. Ao gerar sua paleta, você pode personalizar o número de cores dela usando o Palette.Builder. Extrair mais cores aumenta o potencial corresponde a cada perfil de cor, mas também faz com que Palette.Builder de levar mais tempo para gerar a paleta.

A biblioteca Palette tenta extrair estes seis perfis de cores:

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

Cada um dos métodos get<Profile>Color() em Palette retorna a cor da paleta associada a esse perfil específico, em que <Profile> é substituído pelo nome de um dos seis perfis de cores. Por exemplo, o método para conseguir o perfil de cor "Dark Vibrant" é getDarkVibrantColor(). Como nem todas as imagens têm todos os perfis de cores, forneça uma cor padrão para ser retornada.

A Figura 1 exibe uma foto e seus perfis de cores correspondentes da get<Profile>Color().

Figura 1. Um exemplo de imagem e seus perfis de cor extraídos, considerando o contagem máxima de cores padrão (16) para a paleta.

Usar amostras para criar esquemas de cores

A classe Palette também gera objetos Palette.Swatch para cada perfil de cor. Os objetos Palette.Swatch contêm a cor associada a esse perfil, bem como o preenchimento da cor em pixels.

As amostras têm outros métodos para acessar mais informações sobre a como valores HSL e preenchimento de pixels. Você pode usar amostras para criar esquemas de cores e temas de apps mais abrangentes usando os métodos getBodyTextColor() e getTitleTextColor(). Esses métodos retornam cores adequadas para o uso cor

Cada método get<Profile>Swatch() de Palette retorna a amostra associada a esse perfil específico; em que <Profile> é substituído pelo nome de um dos os seis perfis de cores. Embora o foco da paleta Os métodos get<Profile>Swatch() não exigem padrão parâmetros de valor, eles retornarão null se esse perfil específico não existe na imagem. Portanto, verifique se uma amostra não é nula antes de usá-la. Por exemplo, o código a seguir obtém a cor do texto do título de uma paleta caso a amostra "Vibrant" não seja nula:

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

Para acessar todas as cores de uma paleta, o método getSwatches() retorna uma lista de todas as amostras geradas a partir de uma imagem, incluindo os seis perfis de cores padrão.

O snippet de código a seguir usa os métodos dos snippets de código anteriores para gerar uma paleta de forma síncrona, receber a amostra "Vibrant" dela e mudar as cores de uma barra de ferramentas para que correspondam à imagem de bitmap. A Figura 2 mostra a imagem e a barra de ferramentas resultantes.

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

Figura 2. Exemplo de imagem com barra de ferramentas de cores vibrantes e cor do texto do título correspondente.