color-picker-dialog

1.0.0indexed

Customizable color picker dialog returning hex color strings for easy persistence, offering initial-color control, adjustable dialog properties, and a compact composable UI for seamless color selection.

AndroidJVMNative·isaacjadrey/color-picker-dialog

Stars

—

Used by

dependents

—

Health

/ 100

Color Picker Dialog

A Kotlin Multiplatform library providing a customizable color picker dialog for Compose. Supports Android, iOS, and JVM.

Why this library?

Handling androidx.compose.ui.graphics.Color in data classes can be tricky when you need to persist them (e.g., in SQL databases). This library was born from the need for a simple way to pick colors and handle them as Hex strings, making it easy to save and restore colors across different platforms without platform-specific dependencies.

Features

Multiplatform: Works on Android, iOS, and Desktop (JVM).
Compose-First: Built entirely with Jetpack Compose / Compose Multiplatform.
Hex-Based: Returns colors as Hex strings for easy persistence.
Customizable: Control the initial color and dialog properties.

Installation

Add the dependency to your libs.versions.toml file:

[versions]
color-picker-dialog = "1.0.0"

[libraries]
color-picker-dialog = { module = "io.github.isaacjadrey:color-picker-dialog", version.ref = "color-picker-dialog" }

Then, add it to your commonMain source set in your build.gradle.kts:

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation(libs.color.picker.dialog)
        }
    }
}

Usage

Color Picker Demo

Simply call the ColorPickerDialog in your Composable. The dialog returns a HEX string which is perfect for saving in your database.


var showDialog by remember { mutableStateOf(false) }
var selectedColor by remember { mutableStateOf(Color.Red) }

if (showDialog) {
    ColorPickerDialog(
        initialColor = selectedColor,
        onDismiss = { showDialog = false },
        onConfirm = { hex ->
            // Use the provided utility to convert hex string back to Compose Color
            selectedColor = parseColor(hex) 
            showDialog = false
        },
        dialogProperties = DialogProperties(
            usePlatformDefaultWidth = false // Highly recommended for better width fitting
        )
    )
}

[!TIP] Setting usePlatformDefaultWidth = false in DialogProperties is highly recommended. It allows the dialog to better utilize the available screen width, ensuring the color picker components are displayed at their optimal size across different devices.