Pick Color from Image on Touch | Android Studio | Compose

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

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 Jetpack Compose code, 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.

MainActivity.kt

package com.technifysoft.myapplication

import android.graphics.BitmapFactory
import android.graphics.Color
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.core.graphics.get
import com.technifysoft.myapplication.ui.theme.MyApplicationTheme

class MainActivityCompose : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MainUI(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MainUI(modifier: Modifier = Modifier) {
    val context = LocalContext.current
    val bitmap = remember {
        BitmapFactory.decodeResource(context.resources, R.drawable.color)
    }

    var pickedColor by remember { mutableIntStateOf(Color.GRAY) }
    var rgbText by remember { mutableStateOf("RGB: \nHEX: ") }

    fun pickedColor(x: Int, y: Int) {
        if (x in 0 until bitmap.width && y in 0 until bitmap.height) {
            val pixel = bitmap[x, y]

            val r = Color.red(pixel)
            val g = Color.green(pixel)
            val b = Color.blue(pixel)
            val hex = String.format("#%06X", 0xFFFFFF and pixel)

            pickedColor = pixel
            rgbText = "RGB: $r, $g, $b\nHEX: $hex"
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Image with touch detection
        Image(
            bitmap = bitmap.asImageBitmap(),
            contentDescription = "Color Picker Image",
            modifier = Modifier
                .size(350.dp)
                .pointerInput(Unit) {
                    detectTapGestures { position ->
                        pickedColor(position.x.toInt(), position.y.toInt())
                    }
                }
                .pointerInput(Unit) {
                    detectDragGestures { change, _ ->
                        pickedColor(change.position.x.toInt(), change.position.y.toInt())
                    }
                }
        )

        // Color preview box
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(androidx.compose.ui.graphics.Color(pickedColor))
        )

        // Result text
        Text(
            text = rgbText,
            style = MaterialTheme.typography.bodyLarge,
            modifier = Modifier.padding(top = 12.dp)
        )
    }


}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        MainUI()
    }
}

Screenshot