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 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:
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!