Elija el color de la imagen con TouchEvents en Android

En este artículo, vamos a aprender cómo tocar el color de los píxeles en una imagen. A continuación se muestra una captura de pantalla para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin . 

Implementación paso a paso

Paso 1:  para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación. 

Paso 2:  Establecer cualquier imagen en el diseño

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <!--Image form which we will pick color-->
    <ImageView
        android:id="@+id/pickColorImage"
        android:layout_width="match_parent"
        android:layout_height="255dp"
        android:layout_marginTop="10dp"
        android:contentDescription="Image to pick color"
        android:scaleType="fitStart"
        android:src="@drawable/gfg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/pickColorImage">
  
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Picked Color: "
            android:textColor="@color/black"
            android:textSize="20sp" />
  
        <!-- color name in Hexadecimal -->
        <TextView
            android:id="@+id/colorInHex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="#fffffff"
            android:textSize="20sp" />
  
        <!-- show the picked color -->
        <View
            android:id="@+id/fillColor"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_marginStart="8dp"
            app:layout_constraintTop_toBottomOf="@id/pickColorImage" />
    </LinearLayout>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: 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.

import android.annotation.SuppressLint
import android.graphics.Bitmap
import android.graphics.Color
import android.os.Bundle
import android.view.MotionEvent
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
  
    lateinit var image: ImageView
    lateinit var bitmap: Bitmap
    lateinit var colorView: View
    lateinit var colorString: TextView
  
    @SuppressLint("ClickableViewAccessibility")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        image = findViewById(R.id.pickColorImage)
        colorView = findViewById(R.id.fillColor)
        colorString = findViewById(R.id.colorInHex)
  
        image.isDrawingCacheEnabled = true
        image.buildDrawingCache(true)
  
        // on touch listener on image view
        image.setOnTouchListener { _, event ->
            if (event.action == MotionEvent.ACTION_DOWN || event.action == MotionEvent.ACTION_MOVE) {
                bitmap = image.drawingCache
  
                // get touched pixel
                val pixel = bitmap.getPixel(event.x.toInt(), event.y.toInt())
  
                // get RGB values from the touched pixel
                val r = Color.red(pixel)
                val g = Color.green(pixel)
                val b = Color.blue(pixel)
  
                // color name in Hexadecimal(#RRGGBB)
                colorString.text = "#${Integer.toHexString(pixel)}"
  
                // fill the color in the view
                colorView.setBackgroundColor(Color.rgb(r, g, b))
            }
            true
        }
    }
}

Ahora, ejecuta la aplicación

Producción:

Código fuente: Haga clic aquí