Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/godaddy/compose-color-picker
Jetpack Compose Android Color Picker 🎨
https://github.com/godaddy/compose-color-picker
android color-picker compose hacktoberfest jetpack-compose
Last synced: 19 days ago
JSON representation
Jetpack Compose Android Color Picker 🎨
- Host: GitHub
- URL: https://github.com/godaddy/compose-color-picker
- Owner: godaddy
- License: mit
- Created: 2021-10-26T14:25:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-04T21:48:43.000Z (5 months ago)
- Last Synced: 2024-05-01T14:03:57.290Z (2 months ago)
- Topics: android, color-picker, compose, hacktoberfest, jetpack-compose
- Language: Kotlin
- Homepage:
- Size: 50.3 MB
- Stars: 352
- Watchers: 11
- Forks: 22
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Lists
- awesome-compose-for-desktop - compose-color-picker - Classic color picker and different harmony mode pickers (UI experimentation)
README
# Android Jetpack Compose Color Picker 🎨
A component that provides two different HSV color pickers, written in Jetpack Compose.
1. ClassicColorPicker - Square picker with alpha channel
2. HarmonyColorPicker - Circular wheel with harmony modes (ie complementary, triadic, analogous, shades, monochromatic, tetradic)
https://user-images.githubusercontent.com/9973046/154516879-495a6816-9595-49b9-beaf-dafc2e1110ec.mp4
https://user-images.githubusercontent.com/9973046/154515203-f0818a14-3bb0-4e5a-91fc-f3cac2e2e770.mp4
## How to get started
Add the dependency to your `build.gradle` file:
```
implementation 'com.godaddy.android.colorpicker:compose-color-picker:'
// with Android ColorInt extensions
implementation 'com.godaddy.android.colorpicker:compose-color-picker-android:'
// desktop jvm version
implementation 'com.godaddy.android.colorpicker:compose-color-picker-jvm:'
```
Add `ClassicColorPicker` to your Compose hierarchy:
```kotlin
import com.godaddy.android.colorpicker.HsvColor
Column {
ClassicColorPicker(
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)
}
```
Or add the `HarmonyColorPicker` to your Compose hierarchy for an HSV color wheel implementation:
```kotlin
HarmonyColorPicker(
harmonyMode = harmonyMode.value,
modifier = Modifier.size(400.dp),
onColorChanged = { color ->
currentColor.value = color
extraColors.value = color.getColors(colorHarmonyMode = harmonyMode.value)
})
```
The `HarmonyColorPicker` allows for you to set a certain `ColorHarmonyMode` on the wheel.
This will then display multiple magnifiers on top of the wheel for the different harmony modes: ie complementary, triadic, analogous, shades, monochromatic, tetradic.
If you wish to not display other magnifiers - set `ColorHarmonyMode.NONE` as your `harmonyMode` on the wheel.
# ClassicColorPicker:
## Customizing the control
### Size
To change the size of the control, pass in the `Modifier` option:
```kotlin
import com.godaddy.android.colorpicker.HsvColor
ClassicColorPicker(
modifier = Modifier.height(200.dp),
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)
```
### Alpha
To hide the alpha bar, change the `showAlphaBar` parameter:
```kotlin
import com.godaddy.android.colorpicker.HsvColor
ClassicColorPicker(
showAlphaBar = false,
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)
```
## HarmonyColorPicker
## Customizing the control
### Harmony Mode
To change the harmony mode of the picker, pass in a different mode into the function:
```kotlin
HarmonyColorPicker(
harmonyMode = ColorHarmonyMode.SHADES,
modifier = Modifier.size(400.dp),
onColorChanged = { color ->
// do stuff with new color
})
```
### Size
To change the size of the control, pass in the `Modifier` option:
```kotlin
import com.godaddy.android.colorpicker.HsvColor
HarmonyColorPicker(
modifier = Modifier.height(200.dp),
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)
```
# Library Contribution Information
## Code Formatting
This project uses spotless to enforce code formatting. Run `./gradlew spotlessApply` to run formatting before committing.
### Releases
1. Update the version number in color-picker/build.gradle.kts
2. Make a PR into main and get that merged
3. Run "Deploy to Sonatype" GitHub Action.
4. Login to Sonatype and "Close" release. After a few minutes, click "Release".
5. Release should then be available for download on maven (might take like 30 min to propagate).