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. A 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. A Palette objeto dá acesso às cores em um Imagem Bitmap além de fornecer seis perfis de cores principais do bitmap para informar seu escolhas de design.

Configurar a biblioteca

Para usar a biblioteca de paletas, adicione o seguinte ao seu 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 dá 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 alterar dinamicamente o esquema de cores dele com base em uma determinada imagem de origem.

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

Gerar uma instância de Palette

Gere uma instância Palette usando a from(Bitmap bitmap) para criar um Palette.Builder com base em 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 no e a 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 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()

Esse método permite que você faça sua própria correspondência de cores adicionando uma Target de cor ao builder. Se o Target padrão for insuficiente, os desenvolvedores avançados podem criar os próprios 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). Para cada perfil, a cor com a melhor pontuação define essa cor da imagem fornecida.

Por padrão, um objeto Palette contém 16 cores primárias de uma determinada imagem. Ao gerar sua paleta, é possível personalize o número de cores 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 de paletas tenta extrair os seis perfis de cores a seguir:

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

Cada um dos métodos get<Profile>Color() Palette retorna a cor na paleta associada a essa um perfil específico, em que <Profile> é substituído por o nome de um dos seis perfis de cores. Por exemplo, o método para receber o O perfil de cor vibrante escura é getDarkVibrantColor(): Como nem todas as imagens contêm todos os perfis de cores, forneça uma cor padrão para voltar.

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 Palette.Swatch para cada perfil de cor. Os objetos Palette.Swatch contêm o cor associada para esse perfil, bem como o preenchimento da cor no 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 ajudar a criar esquemas de cores e temas de apps mais abrangentes usando o getBodyTextColor() e getTitleTextColor() métodos. Esses métodos retornam cores apropriadas para uso no 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 usá-lo. 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 em uma paleta, a getSwatches() retorna uma lista de todas as amostras geradas a partir de uma imagem, incluindo o seis perfis de cores padrão.

O snippet de código a seguir usa os métodos do código anterior para gerar uma paleta de forma síncrona, ter uma amostra vibrante e alterar as cores de uma barra de ferramentas para combinar com a imagem de bitmap. A Figura 2 exibe a imagem e barra de ferramentas resultante.

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. Um exemplo de imagem com a barra de ferramentas de cores vibrantes e cor de texto do título correspondente.