ColorPickerView¶

ColorPickerView is the core component that displays a color palette and allows users to select colors by tapping or dragging.

Palette¶

Default HSV Palette¶

If you do not set any custom palette, the default palette will be the ColorHsvPalette. You can manually select a specific point for the selector by specifying a color value:

colorPickerView.selectByHsvColor(color)
colorPickerView.selectByHsvColorRes(R.color.colorPrimary)

Custom Palette¶

You can change the palette to any desired image drawable:

colorPickerView.setPaletteDrawable(drawable)

To revert to the default HSV palette:

colorPickerView.setHsvPaletteDrawable()

Palette from Gallery¶

You can pick colors from gallery images by setting a bitmap drawable as the palette.

First, declare the permission in your AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Launch the gallery picker:

val photoPickerIntent = Intent(Intent.ACTION_PICK)
photoPickerIntent.type = "image/*"
startActivityForResult(photoPickerIntent, REQUEST_CODE_GALLERY)

In onActivityResult, set the selected image as the palette:

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (requestCode == REQUEST_CODE_GALLERY && resultCode == RESULT_OK) {
        try {
            val imageUri = data?.data
            val imageStream = contentResolver.openInputStream(imageUri!!)
            val selectedImage = BitmapFactory.decodeStream(imageStream)
            val drawable = BitmapDrawable(resources, selectedImage)
            colorPickerView.setPaletteDrawable(drawable)
        } catch (e: FileNotFoundException) {
            e.printStackTrace()
        }
    }
}

ActionMode¶

ActionMode controls when the ColorListener is invoked based on user actions.

// Invoke listener only when finger is released
colorPickerView.setActionMode(ActionMode.LAST)

// Invoke listener on every touch event (default)
colorPickerView.setActionMode(ActionMode.ALWAYS)

Mode	Description
`ALWAYS`	ColorListener is invoked on every touch event (down, move, up)
`LAST`	ColorListener is invoked only when the finger is released

Debounce¶

To limit how frequently the color listener is called, you can set a debounce duration:

XMLKotlin

app:debounceDuration="150"

colorPickerView.setDebounceDuration(150)

This is useful for performance optimization when updating UI based on color changes.

Selector¶

Custom Selector Drawable¶

You can customize the selector appearance:

colorPickerView.setSelectorDrawable(drawable)

Selector Position¶

Programmatically move the selector to a specific position:

colorPickerView.setSelectorPoint(x, y)

Or select the center of the palette:

colorPickerView.selectCenter()

Methods Reference¶

Method	Return	Description
`getColor()`	`Int`	Gets the last selected color
`getColorEnvelope()`	`ColorEnvelope`	Gets the ColorEnvelope of the last selected color
`setPaletteDrawable(Drawable)`	`void`	Changes the palette drawable
`setSelectorDrawable(Drawable)`	`void`	Changes the selector drawable
`setSelectorPoint(Int, Int)`	`void`	Selects a specific coordinate on the palette
`selectByHsvColor(Int)`	`void`	Moves selector to match a specific color
`selectByHsvColorRes(Int)`	`void`	Moves selector using a color resource
`setHsvPaletteDrawable()`	`void`	Resets to default HSV palette
`selectCenter()`	`void`	Selects the center of the palette
`setInitialColor(Int)`	`void`	Sets initial selector position by color
`setInitialColorRes(Int)`	`void`	Sets initial selector position by color resource
`setActionMode(ActionMode)`	`void`	Sets the listener trigger mode
`setFlagView(FlagView)`	`void`	Sets a FlagView on the ColorPickerView
`attachAlphaSlider(AlphaSlideBar)`	`void`	Links an AlphaSlideBar
`attachBrightnessSlider(BrightnessSlideBar)`	`void`	Links a BrightnessSlideBar
`setEnabled(Boolean)`	`void`	Enables or disables the color picker
`setDebounceDuration(Long)`	`void`	Sets the debounce duration in milliseconds

Lifecycle Management¶

To properly save and restore the color picker state, set a lifecycle owner:

colorPickerView.setLifecycleOwner(this)

This automatically saves the state when the activity or fragment is destroyed.

Important

Always set the lifecycle owner to prevent state loss and ensure proper cleanup.