Los perfiles de color se pueden extraer de las imágenes en Android utilizando la API de paleta de AndroidX; normalmente, los perfiles de color se usarían para generar widgets coordinados por colores basados en una imagen. Una tarjeta, por ejemplo, puede incluir una imagen y un texto de título que están coloreados de acuerdo con los perfiles de color de la imagen. Paleta API le permite obtener los siguientes perfiles de color:
- luz vibrante
- Vibrante
- oscuro vibrante
- Luz silenciada
- Apagado
- oscuro silenciado
Entendiendo el Núcleo
Cada perfil de color incluye una muestra con tres colores principales:
código para entender el código en más
- RGB : El color primario de la muestra.
- titleTextColor : el color que se utilizará para el texto del «título» que aparece sobre el color principal de la muestra.
- bodyTextColor : el color que se utilizará para el texto del «cuerpo» que aparece sobre el color principal de la muestra.
Implementación paso a paso
La aplicación se compone de un solo botón y una imagen. Cuando presiona el botón, la imagen cambia a una diferente. Encuentre los seis títulos de imágenes diferentes a continuación. Los colores de fondo y de texto de estos mosaicos cambiarán a medida que cambie la imagen, tal como los recupera la Paleta API de la imagen.
Paso #1: Agrega las dependencias
dependencies {
// AndroidX Pallete
implementation 'androidx.palette:palette-ktx:1.0.0'
// Picasso
implementation 'com.squareup.picasso:picasso:2.7'
}
Paso #2: Agregue el permiso de Internet para que nuestra aplicación pueda usar Internet
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.geeksforgeeks.android.androidx.palette">
<uses-permission android:name="android.permission.INTERNET" />
...<!--The rest of the manifest goes here-->
</manifest>
Paso #3: Diseñar el diseño
aplicación > res > diseño > actividad_principal.xml actividad_principal.xml
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".GeeksActivity"> <Button android:id="@+id/changeImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Change Image" /> <ImageView android:id="@+id/image_source" android:layout_width="match_parent" android:layout_height="200dp" android:contentDescription="Palette Demand Image" android:scaleType="centerCrop" tools:src="@tools:sample/backgrounds/avatars" /> <androidx.appcompat.widget.LinearLayoutCompat android:id="@+id/layout_light_vibrant" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="15dp"> <TextView android:id="@+id/text_light_vibrant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Light Vibrant" /> </androidx.appcompat.widget.LinearLayoutCompat> <androidx.appcompat.widget.LinearLayoutCompat android:id="@+id/layout_vibrant" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="15dp"> <TextView android:id="@+id/ gfg _vibrant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Vibrant" /> </androidx.appcompat.widget.LinearLayoutCompat> <androidx.appcompat.widget.LinearLayoutCompat android:id="@+id/layout_gfg_vibrant" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="15dp"> <TextView android:id="@+id/text_ gfg _vibrant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Dark Vibrant" /> </androidx.appcompat.widget.LinearLayoutCompat> <androidx.appcompat.widget.LinearLayoutCompat android:id="@+id/layout_light_gfg " android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="15dp"> <TextView android:id="@+id/text_ gfg _muted" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Light Muted" /> </androidx.appcompat.widget.LinearLayoutCompat> <androidx.appcompat.widget.LinearLayoutCompat android:id="@+id/layout_gfg " android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="15dp"> <TextView android:id="@+id/text_muted" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Muted" /> </androidx.appcompat.widget.LinearLayoutCompat> <androidx.appcompat.widget.LinearLayoutCompat android:id="@+id/layout_dark_muted" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="15dp"> <TextView android:id="@+id/text_dark_muted" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Dark Muted" /> </androidx.appcompat.widget.LinearLayoutCompat> </androidx.appcompat.widget.LinearLayoutCompat>
Paso #4: Trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.graphics.Bitmap
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.LinearLayoutCompat
import androidx.core.content.ContextCompat
import androidx.palette.graphics.Palette
import com.squareup.picasso.Picasso
class MainActivity : AppCompatActivity() {
private lateinit var target: com.squareup.picasso.Target
private lateinit var layoutLightVibrant: LinearLayoutCompat
private lateinit var gfgVibrant: LinearLayoutCompat
private lateinit var darkGfG: LinearLayoutCompat
private lateinit var layoutLightMuted: LinearLayoutCompat
private lateinit var gfgMuted: LinearLayoutCompat
private lateinit var gfgMutedDark: LinearLayoutCompat
private lateinit var gfgLightVibrant: TextView
private lateinit var gfgText: TextView
private lateinit var gfgTextVib: TextView
private lateinit var gfgGfgTextMutedMore: TextView
private lateinit var gfgTextMutedMore: TextView
private lateinit var gfgTextMutedDark: TextView
private val imageUrls = listOf(
"http://placeimg.com/160/120/animals",
"http://placeimg.com/160/120/arch",
"http://placeimg.com/160/120/nature",
"http://placeimg.com/160/120/people",
"http://placeimg.com/160/120/tech",
"http://placeimg.com/160/120/grayscale",
"http://placeimg.com/160/120/sepia",
)
private var imageUrlIndex = 0
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setupLayout()
setupImage()
findViewById<Button>(R.id.button_change_image).setOnClickListener {
imageUrlIndex++
setupImage()
}
}
// Initializes all widgets in the layout
private fun setupLayout() {
layoutLightVibrant = findViewById(R.id.layout_light_vibrant)
gfgVibrant = findViewById(R.id.layout_vibrant)
darkGfG = findViewById(R.id.layout_dark_vibrant)
layoutLightMuted = findViewById(R.id.layout_light_muted)
gfgMuted = findViewById(R.id.layout_muted)
gfgMutedDark = findViewById(R.id.layout_dark_muted)
gfgLightVibrant = findViewById(R.id.text_light_vibrant)
gfgText = findViewById(R.id.text_vibrant)
gfgTextVib = findViewById(R.id.text_dark_vibrant)
gfgGfgTextMutedMore = findViewById(R.id.text_light_muted)
gfgTextMutedMore = findViewById(R.id.text_muted)
gfgTextMutedDark = findViewById(R.id.text_dark_muted)
}
// Fetch image from a URL, display them in
// an [ImageView], and extract its color profiles.
private fun setupImage() {
val url = imageUrls[imageUrlIndex % imageUrls.size]
target = object : com.squareup.picasso.Target {
override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
// Set image to ImageView
findViewById<ImageView>(R.id.image_source).setImageBitmap(bitmap)
// Extract color profiles
bitmap?.let {
val palette = Palette.from(it).generate()
// Light Vibrant
setupColorProfile(
palette.lightVibrantSwatch,
layoutLightVibrant,
gfgLightVibrant,
)
// Vibrant
setupColorProfile(
palette.vibrantSwatch,
gfgVibrant,
gfgText,
)
// Dark Vibrant
setupColorProfile(
palette.darkVibrantSwatch,
darkGfG,
gfgTextVib,
)
// Light Muted
setupColorProfile(
palette.lightMutedSwatch,
layoutLightMuted,
gfgGfgTextMutedMore,
)
// Muted
setupColorProfile(
palette.mutedSwatch,
gfgMuted,
gfgTextMutedMore,
)
// Dark Muted
setupColorProfile(
palette.darkMutedSwatch,
gfgMutedDark,
gfgTextMutedDark,
)
}
}
override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
findViewById<ImageView>(R.id.image_source).setImageResource(R.color.purple_200)
}
override fun onBitmapFailed(e: Exception?, errorDrawable: Drawable?) {
}
}
Picasso.get()
.load(url)
.into(target)
}
// Set colors of a color profile.
private fun setupColorProfile(
swatch: Palette.Swatch?,
layoutCompat: LinearLayoutCompat,
textView: TextView,
) {
layoutCompat.setBackgroundColor(swatch?.rgb ?: ContextCompat.getColor(this, R.color.white))
textView.setTextColor(swatch?.titleTextColor ?: ContextCompat.getColor(this, R.color.black))
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por icloudanshu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA