Extracción de perfil de color de imágenes en Android

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:

  1. luz vibrante
  2. Vibrante
  3. oscuro vibrante
  4. Luz silenciada
  5. Apagado
  6. 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

  1. RGB : El color primario de la muestra.
  2. titleTextColor : el color que se utilizará para el texto del «título» que aparece sobre el color principal de la muestra.
  3. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *