Pick Color from Image on Touch | Android Studio | Java

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

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 Java 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.java

package com.technifysoft.myapplication;

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;

public class MainActivity extends AppCompatActivity {

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        //To enable drawing cache, draw the view to a bitmap.
        //Drawing cache enabled means the view is drawn to a bitmap.
        mImageView.setDrawingCacheEnabled(true);
        mImageView.buildDrawingCache(true);

        //ImageView on touch listener
        mImageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //When user touch on image
                if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE) {
                    //get bitmap from imageview
                    Bitmap bitmap = mImageView.getDrawingCache();
                    //get pixel color from touch coordinates
                    int pixel = bitmap.getPixel((int) event.getX(), (int) event.getY());

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

                    //get hex code from pixel
                    String 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.setText("RGB: " + r + ", " + g + ", " + b + "\nHEX: " + hex);
                }

                return true;
            }
        });
    }
}

Screenshot