Skip to content

Commit 9b1872f

Browse files
author
Rebecca Franks
authored
Merge pull request #14 from godaddy/feature/color-wheel-harmony
Added a Color Wheel for Harmony Color Modes
2 parents 7da1762 + b482aa2 commit 9b1872f

File tree

23 files changed

+931
-105
lines changed

23 files changed

+931
-105
lines changed

‎README.md

Lines changed: 66 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22

33
![Maven Central](https://img.shields.io/maven-central/v/com.godaddy.android.colorpicker/compose-color-picker?style=flat-square)
44

5-
A component that provides an HSV color picker, written in Jetpack compose.
5+
A component that provides two different HSV color pickers, written in Jetpack Compose.
6+
1. ClassicColorPicker - Square picker with alpha channel
7+
2. HarmonyColorPicker - Circular wheel with harmony modes (ie complementary, triadic, analogous, shades, monochromatic, tetradic)
68

79
<img src="screenshots/ColorPicker.gif" width="200" />
10+
<img src="screenshots/ColorPicker-Harmony.gif" width="200" />
811

912
## How to get started
1013

@@ -21,7 +24,7 @@ implementation 'com.godaddy.android.colorpicker:compose-color-picker-jvm:<latest
2124

2225
Add `ClassicColorPicker` to your Compose hierarchy:
2326

24-
```
27+
```kotlin
2528
import com.godaddy.android.colorpicker.HsvColor
2629

2730
Column {
@@ -33,13 +36,30 @@ Column {
3336
}
3437
```
3538

39+
Or add the `HarmonyColorPicker` to your Compose hierarchy for an HSV color wheel implementation:
40+
41+
```kotlin
42+
HarmonyColorPicker(
43+
harmonyMode = harmonyMode.value,
44+
modifier = Modifier.size(400.dp),
45+
onColorChanged = { hsvColor ->
46+
currentColor.value = hsvColor.toColor()
47+
extraColors.value = hsvColor.getColors(colorHarmonyMode = harmonyMode.value)
48+
})
49+
```
50+
51+
The `HarmonyColorPicker` allows for you to set a certain `ColorHarmonyMode` on the wheel.
52+
This will then display multiple magnifiers on top of the wheel for the different harmony modes: ie complementary, triadic, analogous, shades, monochromatic, tetradic.
53+
If you wish to not display other magnifiers - set `ColorHarmonyMode.NONE` as your `harmonyMode` on the wheel.
54+
55+
# ClassicColorPicker:
3656
## Customizing the control
3757

3858
### Size
3959

4060
To change the size of the control, pass in the `Modifier` option:
4161

42-
```
62+
```kotlin
4363
import com.godaddy.android.colorpicker.HsvColor
4464

4565
ClassicColorPicker(
@@ -54,7 +74,7 @@ ClassicColorPicker(
5474

5575
To hide the alpha bar, change the `showAlphaBar` parameter:
5676

57-
```
77+
```kotlin
5878
import com.godaddy.android.colorpicker.HsvColor
5979

6080
ClassicColorPicker(
@@ -65,3 +85,45 @@ ClassicColorPicker(
6585
)
6686
```
6787

88+
## HarmonyColorPicker
89+
90+
## Customizing the control
91+
92+
### Harmony Mode
93+
94+
To change the harmony mode of the picker, pass in a different mode into the function:
95+
96+
```kotlin
97+
HarmonyColorPicker(
98+
harmonyMode = ColorHarmonyMode.SHADES,
99+
modifier = Modifier.size(400.dp),
100+
onColorChanged = { hsvColor ->
101+
// do stuff with new color
102+
})
103+
```
104+
105+
### Size
106+
107+
To change the size of the control, pass in the `Modifier` option:
108+
109+
```kotlin
110+
import com.godaddy.android.colorpicker.HsvColor
111+
112+
HarmonyColorPicker(
113+
modifier = Modifier.height(200.dp),
114+
onColorChanged = { color: HsvColor ->
115+
// Do something with the color
116+
}
117+
)
118+
```
119+
120+
# Library Contribution Information
121+
122+
### To make a release
123+
124+
1. Update the version number in color-picker/build.gradle.kts
125+
2. Make a PR into main and get that merged
126+
3. Run "Deploy to Sonatype" GitHub Action.
127+
4. Login to Sonatype and "Close" release. After a few minutes, click "Release".
128+
5. Release should then be available for download on maven (might take like 30 min to propagate).
129+

‎app/build.gradle.kts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ version = "1.0"
1212
dependencies {
1313
implementation(project(":color-picker"))
1414
implementation ("androidx.activity:activity-compose:1.4.0")
15-
implementation("com.google.android.material:material:1.4.0")
15+
implementation("com.google.android.material:material:1.5.0")
16+
implementation("androidx.navigation:navigation-runtime-ktx:2.3.5")
17+
implementation("androidx.navigation:navigation-compose:2.4.0-rc01")
1618
}
1719

1820
android {

‎app/src/main/java/com/godaddy/android/colorpicker/ClassicColorPickerScreen.kt

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
package com.godaddy.android.colorpicker
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.foundation.layout.height
5+
import androidx.compose.foundation.layout.padding
6+
import androidx.compose.material.Text
7+
import androidx.compose.material.TopAppBar
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.runtime.mutableStateOf
10+
import androidx.compose.runtime.remember
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.graphics.Color
13+
import androidx.compose.ui.res.stringResource
14+
import androidx.compose.ui.unit.dp
15+
import androidx.navigation.NavController
16+
import com.godaddy.android.colorpicker.theme.BackButton
17+
import com.godaddy.android.colorpicker.theme.ComposeColorPickerTheme
18+
19+
@Composable
20+
fun ClassicColorPickerScreen(navController: NavController) {
21+
Column {
22+
TopAppBar(title = {
23+
Text(stringResource(R.string.classic_color_picker_sample))
24+
},
25+
navigationIcon = {
26+
BackButton { navController.navigateUp() }
27+
})
28+
val currentColor = remember {
29+
mutableStateOf(Color.Black)
30+
}
31+
ColorPreviewInfo(currentColor = currentColor.value)
32+
ClassicColorPicker(
33+
color = currentColor.value,
34+
modifier = Modifier
35+
.height(300.dp)
36+
.padding(16.dp),
37+
onColorChanged = { hsvColor: HsvColor ->
38+
// Triggered when the color changes, do something with the newly picked color here!
39+
currentColor.value = hsvColor.toColor()
40+
}
41+
)
42+
}
43+
44+
}
45+
46+
47+
@Composable
48+
fun ClassicColorPickerPreview() {
49+
ComposeColorPickerTheme {
50+
ClassicColorPicker(
51+
modifier = Modifier.height(300.dp),
52+
color = Color.Green,
53+
onColorChanged = {
54+
55+
})
56+
57+
}
58+
}
59+
60+
@Composable
61+
fun ClassicColorPickerNoAlphaPreview() {
62+
ComposeColorPickerTheme {
63+
ClassicColorPicker(
64+
modifier = Modifier.height(300.dp),
65+
color = Color.Magenta,
66+
showAlphaBar = false,
67+
onColorChanged = {
68+
69+
})
70+
}
71+
}

‎app/src/main/java/com/godaddy/android/colorpicker/ColorPreviewInfo.kt

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
package com.godaddy.android.colorpicker
2+
3+
import androidx.compose.foundation.Canvas
4+
import androidx.compose.foundation.ExperimentalFoundationApi
5+
import androidx.compose.foundation.background
6+
import androidx.compose.foundation.layout.*
7+
import androidx.compose.foundation.lazy.GridCells
8+
import androidx.compose.foundation.lazy.LazyVerticalGrid
9+
import androidx.compose.foundation.lazy.items
10+
import androidx.compose.foundation.shape.CircleShape
11+
import androidx.compose.material.Text
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.unit.dp
17+
18+
@Composable
19+
fun ColorPreviewInfo(currentColor: Color) {
20+
Column(modifier = Modifier.fillMaxWidth()) {
21+
Text(
22+
modifier = Modifier.padding(16.dp),
23+
text = "a: ${currentColor.alpha} \n" +
24+
"r: ${currentColor.red} \n" +
25+
"g: ${currentColor.green} \n" +
26+
"b: ${currentColor.blue}"
27+
)
28+
Spacer(
29+
modifier = Modifier
30+
.background(
31+
currentColor,
32+
shape = CircleShape
33+
)
34+
.size(48.dp)
35+
.align(Alignment.CenterHorizontally)
36+
)
37+
Spacer(Modifier.height(16.dp))
38+
}
39+
}
40+
41+
@OptIn(ExperimentalFoundationApi::class)
42+
@Composable
43+
fun ColorPaletteBar(
44+
modifier: Modifier = Modifier,
45+
colors: List<HsvColor>
46+
) {
47+
LazyVerticalGrid(
48+
horizontalArrangement = Arrangement.spacedBy(4.dp),
49+
verticalArrangement = Arrangement.spacedBy(4.dp),
50+
cells = GridCells.Adaptive(48.dp),
51+
modifier = modifier
52+
.fillMaxWidth(),
53+
contentPadding = PaddingValues(16.dp),
54+
content = {
55+
items(colors) { color ->
56+
Canvas(modifier = Modifier.size(48.dp)) {
57+
drawCircle(color.toColor())
58+
}
59+
}
60+
}
61+
)
62+
}

‎app/src/main/java/com/godaddy/android/colorpicker/HarmonyColorPickerScreen.kt

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
package com.godaddy.android.colorpicker
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.foundation.layout.fillMaxWidth
5+
import androidx.compose.foundation.layout.height
6+
import androidx.compose.foundation.layout.size
7+
import androidx.compose.material.*
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.runtime.mutableStateOf
10+
import androidx.compose.runtime.remember
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.graphics.Color
13+
import androidx.compose.ui.res.stringResource
14+
import androidx.compose.ui.unit.dp
15+
import androidx.navigation.NavController
16+
import com.godaddy.android.colorpicker.harmony.ColorHarmonyMode
17+
import com.godaddy.android.colorpicker.harmony.HarmonyColorPicker
18+
import com.godaddy.android.colorpicker.theme.BackButton
19+
20+
@Composable
21+
fun HarmonyColorPickerScreen(navController: NavController) {
22+
Column {
23+
TopAppBar(title = {
24+
Text(stringResource(R.string.harmony_color_picker_sample))
25+
},
26+
navigationIcon = {
27+
BackButton { navController.navigateUp() }
28+
})
29+
val currentColor = remember {
30+
mutableStateOf(Color.Black)
31+
}
32+
val extraColors = remember {
33+
mutableStateOf(emptyList<HsvColor>())
34+
}
35+
ColorPreviewInfo(currentColor = currentColor.value)
36+
val expanded = remember {
37+
mutableStateOf(false)
38+
}
39+
val harmonyMode = remember {
40+
mutableStateOf(ColorHarmonyMode.ANALOGOUS)
41+
}
42+
TextButton(onClick = {
43+
expanded.value = true
44+
}) {
45+
Text(harmonyMode.value.name)
46+
}
47+
DropdownMenu(expanded.value, onDismissRequest = {
48+
expanded.value = false
49+
}) {
50+
ColorHarmonyMode.values().forEach {
51+
DropdownMenuItem(onClick = {
52+
harmonyMode.value = it
53+
expanded.value = false
54+
}) {
55+
Text(it.name)
56+
}
57+
}
58+
}
59+
HarmonyColorPicker(
60+
harmonyMode = harmonyMode.value,
61+
modifier = Modifier.size(400.dp),
62+
onColorChanged = { hsvColor ->
63+
currentColor.value = hsvColor.toColor()
64+
extraColors.value = hsvColor.getColors(colorHarmonyMode = harmonyMode.value)
65+
})
66+
ColorPaletteBar(modifier = Modifier.fillMaxWidth().height(70.dp), colors = extraColors.value)
67+
}
68+
69+
}

‎app/src/main/java/com/godaddy/android/colorpicker/Routes.kt

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
package com.godaddy.android.colorpicker
2+
3+
sealed class Route(val link: String) {
4+
object Picker : Route("picker")
5+
object ClassicColorPicker : Route("classic")
6+
object HarmonyColorPicker : Route("harmony")
7+
}

0 commit comments

Comments
 (0)