Pick Color from Image on Touch | Android Studio | Kotlin

How to pick a color from the image on touch using Android Studio and Kotlin?

Learn how to create a Color Picker Tool in Android Studio that allows users to pick a color from any image by simply touching it. This tutorial covers step-by-step implementation with Kotlin code, XML layout, and live preview of RGB and HEX values of the selected color. Perfect for design, drawing, or editing apps!

>> Check for Java

>> Check for Kotlin

>> Check for Jetpack Compose

Code

Here is the full code to retrieve the color from the image when any part of it is touched.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- ImageView to display the color wheel or image -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:src="@drawable/color" />

    <!-- View to display the selected color -->
    <View
        android:id="@+id/colorView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginVertical="8dp"
        android:background="#959595" />

    <!-- TextView to display the HEX and RGB values of the selected color -->
    <TextView
        android:id="@+id/resultTv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HEX:\nRGB:"
        android:textAlignment="center"
        android:textColor="#000"
        android:textSize="18sp" />

</LinearLayout>

MainActivity.kt

package com.technifysoft.myapplication

import android.annotation.SuppressLint
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
import androidx.core.graphics.get
import androidx.core.view.drawToBitmap

class MainActivityy : AppCompatActivity() {

    @SuppressLint("ClickableViewAccessibility")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //initialize UI views
        val mImageView = findViewById<ImageView>(R.id.imageView)
        val mColorView = findViewById<View>(R.id.colorView)
        val mResultView = findViewById<TextView>(R.id.resultTv)

        //ImageView on touch listener
        mImageView.setOnTouchListener { v, event ->
            if (event.action == MotionEvent.ACTION_DOWN || event.action == MotionEvent.ACTION_MOVE) {
                //get bitmap from imageview
                val bitmap = mImageView.drawToBitmap()
                //get pixel color from touch coordinates
                val pixel = bitmap[event.x.toInt(), event.y.toInt()]

                //splitting color into 3 components from pixel
                val r = Color.red(pixel)
                val g = Color.green(pixel)
                val b = Color.blue(pixel)

                //get hex code from pixel
                val hex = "#" + Integer.toHexString(pixel)

                //set background color of view from r, g, b
                mColorView.setBackgroundColor(Color.rgb(r, g, b))
                //set text of textview from r, g, b & hex code
                mResultView.text = "RGB: $r, $g, $b\nHEX: $hex"
            }

            true
        }

    }

}

Screenshot