Como extrair cores de uma imagem no Android Studio

Published at

12/27/2023

Dependências

Para buscar as cores iremos utilizar a biblioteca Palette 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: