Como extrair cores de uma imagem no Android Studio
Tags: android, palette, ui, kotlin
Published: 2023-12-27 22:15:40

Olá pessoal, tudo bem? neste blog irei explicar como obter as cores de um bitmap no Android utilizando o Kotlin. Espero que tenha alguma serventia para você!

## Dependências

Para buscar as cores iremos utilizar a biblioteca [Palette](https://developer.android.com/develop/ui/views/graphics/palette-colors?hl=pt-br) do Jetpack. Para começar iremos declarar dentro do build.gradle(app): 

```
// Groovy
dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}
```
Ou:
```
// Kotlin
dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}
```
## Criar um Layout XML

Estarei utilizando o seguinte layout XML:

```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="380dp"
        android:layout_height="270dp">

        <ImageView
            android:id="@+id/photo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/photo" />

    </com.google.android.material.card.MaterialCardView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mount Fuji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="10dp">

        <TextView
            android:id="@+id/txt_light_vibranty"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Light Vibranty"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/txt_vibranty"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Vibranty"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/txt_dark_vibranty"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Dark Vibranty"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/txt_light_muted"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Light Muted"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/txt_muted"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Muted"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/txt_dark_muted"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Dark Muted"
            android:textColor="@color/white" />

    </LinearLayout>

</LinearLayout>
```

## Criar paleta de cores

Para extrair as cores vamos criar uma função que recebe um ImageView ou um Bitmap se você possuir uma imagem que vem de uma API.

```
 fun createPalette(image: ImageView) {
        // Este linha é para converter o drawable do imageView 
        // para bitmap
        val bitmap = image.drawable.toBitmap()

        val palette = Palette.from(bitmap).generate()

        view.showColors(palette)
    }
```

## Extrair cores da paleta

Para Extrair as cores criadas podemos criar uma função:

```
fun showColors(response: Palette) {
        txtLightVibranty.setBackgroundColor(response.lightVibrantSwatch?.rgb ?: R.color.white)
        txtVibranty.setBackgroundColor(response.vibrantSwatch?.rgb ?: R.color.white)
        txtDarkVibranty.setBackgroundColor(response.darkVibrantSwatch?.rgb ?: R.color.white)
        txtLightMuted.setBackgroundColor(response.lightMutedSwatch?.rgb ?: R.color.white)
        txtMuted.setBackgroundColor(response.mutedSwatch?.rgb ?: R.color.white)
        txtDarkMuted.setBackgroundColor(response.darkMutedSwatch?.rgb ?: R.color.white)
    }
```

Utilizamos o `response.{nome da cor}?.rgb` e definimos uma cor padrão caso seja nulo utilizando o operador elvis: `?: R.color.{cor padrão}`.

## Finalização

Resultado final:
![Resultado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr27x3vaswdddahtgvuz.png)

Este é o método mais simples e direto de se extrair cores de uma foto, espero que eu tenha lhe ajudado. Até a próxima!