colorpicker-compose - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #typescript #machine-learning #linux #docker #nodejs #awesome #cli #pytorch #security #mcp

colorpicker-compose

(★ 757)

🎨 Kotlin Multiplatform color picker library for getting colors from any images by tapping on the desired color.

파일 탐색기

최종 버전 다운로드 (.zip)

- - Bug_report.md
  - Feature_request.md
- - android.yml
  - baseline-profile.yml
  - docs.yml
  - publish.yml
- CODEOWNERS
- dependabot.yml
- FUNDING.yml
- pull_request_template.md
- .gitignore
- build.gradle.kts
- build.gradle.kts
- - colorpicker-compose.api
- .gitignore
- build.gradle.kts
- - .gitignore
  - build.gradle.kts
- - build.gradle.kts
- build.gradle.kts
- - gradle-wrapper.jar
  - gradle-wrapper.properties
- libs.versions.toml
- - Config.xcconfig
- - ContentView.swift
  - Info.plist
  - iOSApp.swift
- - project.pbxproj
- - yarn.lock
- yarn.lock
- preview0.gif
- preview1.gif
- preview2.gif
- preview3.gif
- preview4.gif
- publish-module.gradle.kts
- copyright.kt
- copyright.kts
- copyright.xml
- build.gradle.kts
.editorconfig
.gitignore
build.gradle.kts
CODE_OF_CONDUCT.md
CONTRIBUTING.md
gradle.properties
gradlew
gradlew.bat
LICENSE
README.md
settings.gradle.kts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/skydoves/colorpicker-compose

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd colorpicker-compose

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Gradle (Java/Kotlin)

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
JDK (Java) Java/Kotlin 프로젝트를 빌드/실행하려면 필요합니다.
Gradle 레포에 포함된 gradlew(Gradle Wrapper)를 쓰면 Gradle을 따로 설치할 필요가 없습니다.

cd benchmark

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

./gradlew build

Gradle로 빌드를 진행합니다.

✅ BUILD SUCCESSFUL 메시지가 뜨면 성공입니다. build/ 폴더에 결과물이 생성됩니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![colorpicker-compose](https://user-images.githubusercontent.com/24237865/157398567-9210c48d-9e9f-4ae4-aa82-b4a4a2740433.jpg)<br><br>

<p align="center">
  <a href="https://devlibrary.withgoogle.com/products/android/repos/skydoves-colorpicker-compose"><img alt="Google" src="https://skydoves.github.io/badges/google-devlib.svg"/></a><br>
  <a href="https://opensource.org/licenses/Apache-2.0"><img alt="License" src="https://img.shields.io/badge/License-Apache%202.0-blue.svg"/></a>
  <a href="https://android-arsenal.com/api?level=21"><img alt="API" src="https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat"/></a>
  <a href="https://github.com/skydoves/colorpicker-compose/actions/workflows/android.yml"><img alt="API" src="https://github.com/skydoves/colorpicker-compose/actions/workflows/android.yml/badge.svg"/></a>
    <a href="https://androidweekly.net/issues/issue-509"><img alt="Android Weekly" src="https://skydoves.github.io/badges/android-weekly.svg"/></a>  
  <a href="https://github.com/skydoves"><img alt="Profile" src="https://skydoves.github.io/badges/skydoves.svg"/></a>
</p><br>

<p align="center">
🎨 Kotlin Multiplatform color picker library that allows you to get colors from any images like gallery pictures by tapping on the desired color. 
Also, it ships with alpha, brightness, hue, and saturation sliders to adjust ARGB and HSV factors, plus gesture lifecycle callbacks for fine-grained interaction handling.
</p>

## Preview
<p align="center">
<img src="preview/preview0.gif" width="270"/>
<img src="preview/preview1.gif" width="270"/>
<img src="preview/preview2.gif" width="270"/>
</p>

![kmp](https://github.com/user-attachments/assets/f81c43df-7172-4f44-8e11-898445551806)

## Download
[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/colorpicker-compose.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22colorpicker-compose%22)

### Version Catalog

If you're using Version Catalog, you can configure the dependency by adding it to your `libs.versions.toml` file as follows:

```toml
[versions]
#...
colorpicker = "1.2.0"

[libraries]
#...
compose-colorpicker = { module = "com.github.skydoves:colorpicker-compose", version.ref = "colorpicker" }
```

### Gradle
Add the dependency below to your **module**'s `build.gradle.kts` file:

```gradle
dependencies {
    implementation("com.github.skydoves:colorpicker-compose:1.2.0")
    
    // if you're using Version Catalog
    implementation(libs.compose.colorpicker)
}
```

For Kotlin Multiplatform, add the dependency below to your **module**'s `build.gradle.kts` file:

```gradle
sourceSets {
    commonMain.dependencies {
        implementation("com.github.skydoves:colorpicker-compose:$version")
    }
}
```

### Kotlin Multiplatform Support Maps

|          Platform          | Support |
|:--------------------------:|:-------:|
|          Android           |    ✅    |
|          Desktop           |    ✅    |
| iOSArm64/iosSimulatorArm64 |    ✅    |
|         macosArm64         |    ✅    |
|         js/WasmJs          |    ✅    |

## Usage

First, you should initialize `ColorPickerController`, which allows you to control color pickers and all subcomponents.

```kotlin
val controller = rememberColorPickerController()
```

Next, you can implement a color picker with the `ImageColorPicker` composable function.

```kotlin
ImageColorPicker(
    modifier = Modifier.fillMaxSize(),
    paletteImageBitmap = ImageBitmap.imageResource(R.drawable.palettebar),
    controller = controller
)
```

<img src="preview/preview0.gif" width="270" align="right">

### ImageColorPicker

**ImageColorPicker** allows you to get colors from any images such as gallery pictures or drawable resources by tapping on the desired color. 
It interacts with the `ColorPickerController` to control the color picker and other components. You can use the `ImageColorPicker` as the following example:

```kotlin
ImageColorPicker(
    modifier = Modifier
        .fillMaxWidth()
        .height(450.dp)
        .padding(10.dp),
    controller = controller,
    paletteImageBitmap = ImageBitmap.imageResource(R.drawable.palettebar),
    paletteContentScale = PaletteContentScale.FIT,
    onColorChanged = { colorEnvelope: ColorEnvelope ->
        // do something
    }
)
```

With the [modernstorage](https://github.com/google/modernstorage)'s [Photo Picker](https://google.github.io/modernstorage/photopicker/), you can set a desired image as the palette like the below:

```kotlin
val context = LocalContext.current
val photoPicker =
    rememberLauncherForActivityResult(PhotoPicker()) { uris ->
        val uri = uris.firstOrNull() ?: return@rememberLauncherForActivityResult

val bitmap = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            ImageDecoder.decodeBitmap(ImageDecoder.createSource(context.contentResolver, uri))
        } else {
            MediaStore.Images.Media.getBitmap(context.contentResolver, uri)
        }

controller.setPaletteImageBitmap(bitmap.asImageBitmap())
    }
```

As you can see the above, you can set the palette with the `setPaletteImageBitmap` function of the controller.

#### PaletteContentScale

You can adjust your palette's image scale with the `setPaletteContentScale` function of the controller as the below:

```kotlin
controller.setPaletteContentScale(PaletteContentScale.FIT) // scale the image to fit width and height.
controller.setPaletteContentScale(PaletteContentScale.CROP) // center crop the image.
```

<img src="preview/preview2.gif" width="270" align="right">

### HsvColorPicker

HsvColorPicker allows you to get colors from HSV color palette by tapping on the desired color.
It interacts with the `ColorPickerController` to control the color picker and other components. You can use the `HsvColorPicker` as the following example:

```kotlin
HsvColorPicker(
    modifier = Modifier
        .fillMaxWidth()
        .height(450.dp)
        .padding(10.dp),
    controller = controller,
    onColorChanged = { colorEnvelope: ColorEnvelope ->
        // do something
    },
    onStart = { /* user touched the picker */ },
    onFinish = { /* user lifted finger */ },
)
```

To initialize the color picker with a specific color, pass the color to the `initialColor` argument. Initial color is white by default.

> **Note**: If you use `HsvColorPicker`, you can not set the palette and content scale with the `setPaletteImageBitmap` and `setPaletteContentScale` functions.

The `onStart` / `onFinish` callbacks are also available on `ImageColorPicker`, `AlphaSlider`, `BrightnessSlider`, `HueSlider`, and `SaturationSlider`. Use them to bracket gesture-driven work — for example to show a press indicator, snapshot state when the gesture begins, or commit/throttle work when it ends.

### ColorEnvelope

**ColorEnvelope** is a data transfer object that includes updated color factors. If you pass the **onColorChanged** lambda function to the `ImageColorPicker` or `HsvColorPicker`, the lambda receives **ColorEnvelope**.
**ColorEnvelope** includes the following properties:

```kotlin
onColorChanged = { colorEnvelope: ColorEnvelope ->
    val color: Color = colorEnvelope.color // ARGB color value.
    val hexCode: String = colorEnvelope.hexCode // Color hex code, which represents color value.
    val fromUser: Boolean = colorEnvelope.fromUser // Represents this event is triggered by user or not.
    val source: ColorChangeSource = colorEnvelope.source // What kind of interaction produced this update.
}
```

#### ColorChangeSource

`ColorChangeSource` describes how the color update was produced, so consumers can react differently to discrete taps, continuous drags, and programmatic updates:

```kotlin
onColorChanged = { envelope ->
    when (envelope.source) {
        ColorChangeSource.Tap -> commitColor(envelope.color)          // final selection
        ColorChangeSource.Drag -> previewColor(envelope.color)        // continuous live preview
        ColorChangeSource.Programmatic -> Unit                        // initial setup or controller calls
    }
}
```

### ColorPickerController

**ColorPickerController** interacts with color pickers and it allows you to control the all subcomponents.

#### Custom Wheel

You can customize the wheel with the following functions:

```kotlin
.setWheelRadius(40.dp) // set the radius size of the wheel.
.setWheelColor(Color.Blue) // set the color of the wheel.
.setWheelAlpha(0.5f) // set the transparency of the wheel.
.setWheelImageBitmap(imageBitmap) // set the wheel image with your custom ImageBitmap.
```

#### Select Points

You can select specific points with the functions below:

```kotlin
.selectByCoordinate(x = 100f, y = 100f, fromUser = false) // select x = 100, y = 100.
.selectCenter(fromUser = false) // select center of the palette.
```

#### Debounce

You can set the debounce duration, which decides to invoke the color listener from the last tapping. Debounce can be useful to reduce overhead. For example, communicating with IoT devices or relevant works that require heavy operations.

```kotlin
controller.debounceDuration = 200L
```

#### Enable and Disable

You can enable or disable your color picker with the below function:

```kotlin
controller.enabled = false
```

<img src="preview/preview3.gif" width="270" align="right">

### AlphaSlider

**AlphaSlider** allows you to adjust the alpha value of the selected color from color pickers. 
**AlphaSlider** needs to be tied to the `ColorPickerController`, and the value changes will be assembled with the selected color factors.
You can implement **AlphaSlider** as the following example:

```kotlin
AlphaSlider(
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp)
        .height(35.dp),
    controller = controller,
)
```

You can customize the border of the slider with the following parameters:

```kotlin
AlphaSlider(
    borderRadius = 6.dp,
    borderSize = 5.dp,
    borderColor = Color.LightGray,
    ..
)
```

You can customize the wheel of the slider with the following parameters:

```kotlin
AlphaSlider(
    wheelRadius = 30.dp,
    wheelColor = Color.White,
    wheelPaint = Paint().apply { color = wheelColor },
    wheelImageBitmap = ImageBitmap.imageResource(R.drawable.wheel),
    ..
)
```

Also, you can customize tiles of the background with the following parameters:

```kotlin
AlphaSlider(
    tileOddColor = Color.White,
    tileEvenColor = Color.LightGray,
    tileSize = 30.dp,
    ..
)
```

<img src="preview/preview4.gif" width="270" align="right">

### BrightnessSlider

**BrightnessSlider** allows you to adjust the brightness value of the selected color from color pickers. 
**BrightnessSlider** needs to be tied to the `ColorPickerController`, and the value changes will be assembled with the selected color factors.
You can implement **BrightnessSlider** as the following example:

```kotlin
BrightnessSlider(
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp)
        .height(35.dp),
    controller = controller,
)
```

You can customize the wheel of the slider with the following parameters:

```kotlin
BrightnessSlider(
    wheelRadius = 30.dp,
    wheelColor = Color.White,
    wheelPaint = Paint().apply { color = wheelColor },
    wheelImageBitmap = ImageBitmap.imageResource(R.drawable.wheel),
    ..
)
```

### HueSlider

**HueSlider** allows you to adjust the hue component of the selected color along the full HSV color wheel.
Like the other sliders, **HueSlider** is tied to the `ColorPickerController`, and the value changes will be assembled with the selected color factors.
You can implement **HueSlider** as the following example:

```kotlin
HueSlider(
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp)
        .height(35.dp),
    controller = controller,
)
```

Optionally, observe hue changes directly. The callback delivers the originating [ColorChangeSource] together with the hue value in the `[0f..360f]` range:

```kotlin
HueSlider(
    controller = controller,
    onColorChanged = { source, hue ->
        // hue: 0f..360f
    },
    onStart = { /* user grabbed the slider */ },
    onFinish = { /* user released the slider */ },
)
```

### SaturationSlider

**SaturationSlider** allows you to adjust the saturation component of the selected color (from `0f` to `1f`).
Combine it with `HueSlider` and `BrightnessSlider` to drive the full HSV space without the radial picker.

```kotlin
SaturationSlider(
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp)
        .height(35.dp),
    controller = controller,
)
```

### AlphaTile

**AlphaTile** allows you to display ARGB colors including transparency with tiles.

```kotlin
AlphaTile(
    modifier = Modifier
        .size(80.dp)
        .clip(RoundedCornerShape(6.dp)),
    controller = controller
)
```

Also, you can customize tiles of the background with the following parameters:

```kotlin
AlphaTile(
    tileOddColor = Color.White,
    tileEvenColor = Color.LightGray,
    tileSize = 30.dp,
    ..
)
```

## Find this repository useful? :heart:
Support it by joining __[stargazers](https://github.com/skydoves/colorpicker-compose/stargazers)__ for this repository. :star: <br>
Also, __[follow me](https://github.com/skydoves)__ on GitHub for my next creations! 🤩

# License
```xml
Designed and developed by 2022 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```