ColorPickerView

If you provide both an initial color and a preference name, the setInitialColor() value is only applied during the very first launch. On subsequent launches, the value stored in the preferences will take precedence.

colorPickerView.setPreferenceName("MyColorPicker")
colorPickerView.setInitialColor(Color.BLUE)

To ensure the dialog remembers the user's last selected color across sessions, call setPreferenceName(String) with a unique identifier. This enables automatic state persistence.

ColorPickerDialog.Builder(this)
    .setTitle("ColorPicker Dialog")
    .setPreferenceName("MyColorPickerDialog") // Enables state persistence
    .setPositiveButton("OK", ColorEnvelopeListener { envelope, _ ->
        // The selected color will be remembered
    })
    .setNegativeButton("Cancel") { dialog, _ -> dialog.dismiss() }
    .show()

When using multiple ColorPickerView instances in the same app, assign each a unique preference name to prevent data collisions.

// First color picker
colorPickerView1.setPreferenceName("BackgroundColorPicker")
colorPickerView1.setLifecycleOwner(this)

// Second color picker
colorPickerView2.setPreferenceName("TextColorPicker")
colorPickerView2.setLifecycleOwner(this)

The ActionMode setting determines when the ColorListener is triggered during user interaction.

• ActionMode.ALWAYS: The listener is invoked on every touch event (down, move, up). This is the default behavior.
• ActionMode.LAST: The listener is invoked only when the user releases their finger.

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

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

The ColorEnvelope class is a wrapper that provides multiple ways to access the selected color's data:

• color: returns an integer color.
• hexCode: returns a hex code string (e.g., "FF5722").
• argb: returns an ARGB integer array [alpha, red, green, blue].

The BrightnessSlideBar manipulates the Value component of the HSV (Hue, Saturation, Value) color model:

• Hue: The color itself (0-360 degrees).
• Saturation: The intensity of the color (0-100%).
• Value/Brightness: The lightness of the color (0-100%).

Behavior:

• Moving the slider to 0.0 makes the color darker (towards black).
• Moving the slider to 1.0 keeps the color at full brightness.

Tip: To select white colors, move the selector to the center of the HSV palette (low saturation area) and set the brightness slider to maximum (1.0).

You can automatically save and restore the selected color, selector position, and slider positions by configuring a preference name and a lifecycle owner.

1. Set a Preference Name: This identifies the data in SharedPreferences. You can do this via code or XML.
2. Set a Lifecycle Owner: By passing an Activity or Fragment as the lifecycle owner, the ColorPickerView will automatically save its state when the component is destroyed.

Note: States are automatically restored when you call setPreferenceName(). Ensure this is called before the view is laid out to ensure correct selector positioning.

// Via Kotlin
colorPickerView.setPreferenceName("MyColorPicker")
colorPickerView.setLifecycleOwner(this)

<!-- Via XML -->
app:preferenceName="MyColorPicker"

To implement a basic color picker, add the ColorPickerView to your XML layout and set a ColorEnvelopeListener in your Activity or Fragment to handle color changes.

The listener provides a ColorEnvelope which contains the selected color as an integer, a hex code, or an ARGB array.

<com.skydoves.colorpickerview.ColorPickerView
    android:id="@+id/colorPickerView"
    android:layout_width="300dp"
    android:layout_height="300dp" />

val colorPickerView = findViewById<ColorPickerView>(R.id.colorPickerView)
colorPickerView.setColorListener(ColorEnvelopeListener {
    envelope, fromUser ->
    // Get color values
    val color = envelope.color
    val hexCode = envelope.hexCode
    val argb = envelope.argb
})

To perform advanced customization (like setting an initial color, custom flags, or a custom palette), access the ColorPickerView instance directly from the builder before calling .show().

val builder = ColorPickerDialog.Builder(this)
    .setTitle("ColorPicker Dialog")
    .setPositiveButton("Confirm", ColorEnvelopeListener { envelope, _ ->
        // Handle color selection
    })
    .setNegativeButton("Cancel") { dialog, _ ->
        dialog.dismiss()
    }

// Access the ColorPickerView to apply custom settings
val colorPickerView = builder.colorPickerView
colorPickerView.setFlagView(CustomFlag(this, R.layout.layout_flag))
colorPickerView.setInitialColor(Color.RED)

builder.show()

The palette is the visual area where users select colors. You can use the default HSV palette, a custom image drawable, or a palette extracted from a gallery image.

Default HSV Palette

By default, ColorPickerView uses ColorHsvPalette. You can programmatically move the selector to a specific color using:

• selectByHsvColor(color: Int)
• selectByHsvColorRes(colorRes: Int)

Custom Palette

To use a custom image as the palette, use setPaletteDrawable(drawable). To revert to the default HSV palette, use setHsvPaletteDrawable().

Palette from Gallery

You can allow users to pick colors from their own images. This requires READ_EXTERNAL_STORAGE permission in your AndroidManifest.xml.

The ColorPickerDialog class provides a pre-built dialog for color selection. You can instantiate it using ColorPickerDialog.Builder(context) and configure its behavior, buttons, and sliders before calling .show().

ColorPickerDialog.Builder(this)
    .setTitle("ColorPicker Dialog")
    .setPreferenceName("MyColorPickerDialog")
    .setPositiveButton("Confirm", ColorEnvelopeListener { envelope, fromUser ->
        setLayoutColor(envelope)
    })
    .setNegativeButton("Cancel") { dialogInterface, _ ->
        dialogInterface.dismiss()
    }
    .attachAlphaSlideBar(true)
    .attachBrightnessSlideBar(true)
    .setBottomSpace(12)
    .show()