Skip to content

Commit ab46f42

Browse files
SmartToolFactorySmartToolFactory
committed
add gradient color pickers
1 parent 110dc91 commit ab46f42

19 files changed

+794
-84
lines changed

‎README.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@
33
Bundle of Stylish customizable Color pickers, selectors, colorful sliders written with Jetpack
44
Compose enables users to choose from HSL, HSV or RGB color models to pick Solid colors or gradients.
55

6-
Inspired by [mchome's flutter_colorpicker for Flutter](https://github.com/mchome/flutter_colorpicker)
6+
Inspired
7+
by [mchome's flutter_colorpicker for Flutter](https://github.com/mchome/flutter_colorpicker)
78

89
### Color Pickers
910

1011
There are various selection of default color pickers and with selectors sliders, and hex displays
1112
it's possible to create new ones either.
1213

13-
| Hue Ring-Diamond HSL1 | Hue- Ring-Diamond HSL2 | Hue Ring-Rect HSV| Hue-Circle HSV|
14+
| Hue Ring-Diamond HSL | Hue- Ring-Rect HSL | Hue Ring-Rect HSV| Hue-Circle HSV|
1415
| ----------|-----------| -----------| -----------|
15-
| <img src="./screenshots/colorpicker/cp_ring_diamond_hsl_1.png"/> | <img src="./screenshots/colorpicker/cp_ring_diamond_hsl2.png"/> | <img src="./screenshots/colorpicker/cp_ring_rect_hsv.png"/> | <img src="./screenshots/colorpicker/cp_circle_hue_saturation_hsv.png"/> |
16+
| <img src="./screenshots/colorpicker/cp_ring_diamond_hsl.png"/> | <img src="./screenshots/colorpicker/cp_ring_rect_hsl.png"/> | <img src="./screenshots/colorpicker/cp_ring_rect_hsv.png"/> | <img src="./screenshots/colorpicker/cp_circle_hue_saturation_hsv.png"/> |
1617

1718
| Saturation-Value HSV | Saturation-Lightness HSL | Hue-Saturation HSV | Hue-Value HSV |
1819
| ----------|-----------| -----------| -----------|
@@ -22,12 +23,17 @@ it's possible to create new ones either.
2223
| ----------|-----------|
2324
| <img src="./screenshots/colorpicker/cp_rect_hue_saturation_hsl.png"/> | <img src="./screenshots/colorpicker/cp_rect_hue_lightness_hsl.png"/> |
2425

25-
<img src="/./screenshots/intro.gif" align="center" width="50%"/>
26+
### Gradient Color Pickers
27+
28+
| Hue Ring-Diamond HSL | Hue Ring-Diamond HSL2 | Hue- Ring-Rect HSL | Hue Ring-Rect HSV|
29+
| ----------|-----------| -----------| -----------|
30+
| <img src="./screenshots/colorpicker/cp_gradient_diamond_hsl.png"/> | <img src="./screenshots/colorpicker/cp_gradient_diamond_hsl2.png"/> | <img src="./screenshots/colorpicker/cp_gradient_rect_hsl.png"/> | <img src="./screenshots/colorpicker/cp_gradient_rect_hsv.png"/> |
2631

2732
### Demos
2833

2934
* `SaturationSelectorDemo` different type of Hue/Saturation/Value/Lightness Selectors
30-
* `GradientSelection` select gradient with varying properties such as tile mode, angle, size, or type, colors and color stops
35+
* `GradientSelection` select gradient with varying properties such as tile mode, angle, size, or
36+
type, colors and color stops
3137
* `GradientAngleDeme` gradient rotation with `GradientOffset` objects.
3238
* `HSVHSLGradientDemo` various types of gradients for creating pickers
3339
* `ColorfulSliderDemo` Sliders that can be used with different type of options with different

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/ColorAndGradientPickerDemo.kt‎

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import androidx.compose.ui.graphics.Color
1515
import androidx.compose.ui.unit.DpSize
1616
import androidx.compose.ui.unit.dp
1717
import com.smarttoolfactory.colorpicker.dialog.ColorPickerRingDiamondGradientHSLDialog
18+
import com.smarttoolfactory.colorpicker.dialog.ColorPickerRingRectGradientHSLDialog
19+
import com.smarttoolfactory.colorpicker.dialog.ColorPickerRingRectGradientHSVDialog
1820
import com.smarttoolfactory.colorpicker.model.BrushColor
1921
import com.smarttoolfactory.colorpicker.model.GradientColorState
2022
import com.smarttoolfactory.colorpicker.model.rememberGradientColorState
@@ -79,7 +81,31 @@ fun ColorAndGradientPickerDemo() {
7981
size = size
8082
)
8183

82-
DialogRingGradientHSL(
84+
DialogRingDiamondGradientHSL(
85+
modifier = buttonModifier,
86+
initialBrushColor = currentBrushColor,
87+
gradientColorState = gradientColorState,
88+
onPreviousColorChange = {
89+
previousBrushColor = it.copy()
90+
},
91+
onCurrentColorChange = {
92+
currentBrushColor = it
93+
}
94+
)
95+
96+
DialogRingRectGradientHSL(
97+
modifier = buttonModifier,
98+
initialBrushColor = currentBrushColor,
99+
gradientColorState = gradientColorState,
100+
onPreviousColorChange = {
101+
previousBrushColor = it.copy()
102+
},
103+
onCurrentColorChange = {
104+
currentBrushColor = it
105+
}
106+
)
107+
108+
DialogRingRectGradientHSV(
83109
modifier = buttonModifier,
84110
initialBrushColor = currentBrushColor,
85111
gradientColorState = gradientColorState,
@@ -95,7 +121,7 @@ fun ColorAndGradientPickerDemo() {
95121

96122

97123
@Composable
98-
private fun DialogRingGradientHSL(
124+
private fun DialogRingDiamondGradientHSL(
99125
modifier: Modifier,
100126
initialBrushColor: BrushColor,
101127
gradientColorState: GradientColorState,
@@ -112,7 +138,7 @@ private fun DialogRingGradientHSL(
112138
)
113139

114140
) {
115-
Text(text = "Ring Gradient HSL Dialog")
141+
Text(text = "Ring-Diamond Gradient HSL Dialog")
116142
}
117143

118144
if (showDialog) {
@@ -127,3 +153,72 @@ private fun DialogRingGradientHSL(
127153
}
128154
}
129155
}
156+
157+
@Composable
158+
private fun DialogRingRectGradientHSL(
159+
modifier: Modifier,
160+
initialBrushColor: BrushColor,
161+
gradientColorState: GradientColorState,
162+
onPreviousColorChange: (BrushColor) -> Unit,
163+
onCurrentColorChange: (BrushColor) -> Unit,
164+
) {
165+
var showDialog by remember { mutableStateOf(false) }
166+
167+
OutlinedButton(
168+
modifier = modifier,
169+
onClick = { showDialog = !showDialog },
170+
colors = ButtonDefaults.outlinedButtonColors(
171+
backgroundColor = Color.Transparent
172+
)
173+
174+
) {
175+
Text(text = "Ring-Rect Gradient HSL Dialog")
176+
}
177+
178+
if (showDialog) {
179+
onPreviousColorChange(initialBrushColor.copy())
180+
181+
ColorPickerRingRectGradientHSLDialog(
182+
initialBrushColor = initialBrushColor,
183+
gradientColorState = gradientColorState
184+
) {
185+
showDialog = !showDialog
186+
onCurrentColorChange(it)
187+
}
188+
}
189+
}
190+
191+
@Composable
192+
private fun DialogRingRectGradientHSV(
193+
modifier: Modifier,
194+
initialBrushColor: BrushColor,
195+
gradientColorState: GradientColorState,
196+
onPreviousColorChange: (BrushColor) -> Unit,
197+
onCurrentColorChange: (BrushColor) -> Unit,
198+
) {
199+
var showDialog by remember { mutableStateOf(false) }
200+
201+
OutlinedButton(
202+
modifier = modifier,
203+
onClick = { showDialog = !showDialog },
204+
colors = ButtonDefaults.outlinedButtonColors(
205+
backgroundColor = Color.Transparent
206+
)
207+
208+
) {
209+
Text(text = "Ring-Rect Gradient HSV Dialog")
210+
}
211+
212+
if (showDialog) {
213+
onPreviousColorChange(initialBrushColor.copy())
214+
215+
ColorPickerRingRectGradientHSVDialog(
216+
initialBrushColor = initialBrushColor,
217+
gradientColorState = gradientColorState
218+
) {
219+
showDialog = !showDialog
220+
onCurrentColorChange(it)
221+
}
222+
}
223+
}
224+

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/dialog/GradientColorPickerDialog.kt‎

Lines changed: 114 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ import androidx.compose.ui.window.Dialog
1919
import com.smarttoolfactory.colorpicker.model.BrushColor
2020
import com.smarttoolfactory.colorpicker.model.GradientColorState
2121
import com.smarttoolfactory.colorpicker.model.rememberGradientColorState
22-
import com.smarttoolfactory.colorpicker.picker.gradient.ColorPickerRingDiamondGradientHSL
22+
import com.smarttoolfactory.colorpicker.picker.gradient.ColorPickerGradientRingDiamondHSL
23+
import com.smarttoolfactory.colorpicker.picker.gradient.ColorPickerGradientRingRectHSL
24+
import com.smarttoolfactory.colorpicker.picker.gradient.ColorPickerGradientRingRectHSV
2325
import com.smarttoolfactory.colorpicker.ui.Blue400
2426

2527
@Composable
@@ -43,25 +45,22 @@ fun ColorPickerRingDiamondGradientHSLDialog(
4345
}
4446
) {
4547
Column(horizontalAlignment = Alignment.CenterHorizontally) {
46-
ColorPickerRingDiamondGradientHSL(
48+
ColorPickerGradientRingDiamondHSL(
4749
modifier = Modifier
4850
.fillMaxWidth()
4951
.weight(1f)
5052
.background(Color(0xcc212121), shape = RoundedCornerShape(5.dp))
5153
.padding(horizontal = 10.dp, vertical = 2.dp),
52-
initialColor = initialBrushColor.color,
54+
initialBrushColor = initialBrushColor,
5355
gradientColorState = gradientColorState,
5456
ringOuterRadiusFraction = ringOuterRadiusFraction,
5557
ringInnerRadiusFraction = ringInnerRadiusFraction,
5658
ringBackgroundColor = ringBackgroundColor,
5759
ringBorderStrokeColor = ringBorderStrokeColor,
5860
ringBorderStrokeWidth = ringBorderStrokeWidth,
5961
selectionRadius = selectionRadius,
60-
onColorChange = {
61-
brushColor = BrushColor(color = it)
62-
},
6362
onBrushColorChange = {
64-
brushColor = BrushColor(brush = it)
63+
brushColor = it
6564
}
6665
)
6766

@@ -78,3 +77,111 @@ fun ColorPickerRingDiamondGradientHSLDialog(
7877
}
7978
}
8079
}
80+
81+
@Composable
82+
fun ColorPickerRingRectGradientHSLDialog(
83+
initialBrushColor: BrushColor,
84+
gradientColorState: GradientColorState = rememberGradientColorState(),
85+
ringOuterRadiusFraction: Float = .9f,
86+
ringInnerRadiusFraction: Float = .6f,
87+
ringBackgroundColor: Color = Color.Transparent,
88+
ringBorderStrokeColor: Color = Color.Black,
89+
ringBorderStrokeWidth: Dp = 4.dp,
90+
selectionRadius: Dp = 8.dp,
91+
onDismiss: (BrushColor) -> Unit
92+
) {
93+
94+
var brushColor: BrushColor by remember { mutableStateOf(initialBrushColor.copy()) }
95+
96+
Dialog(
97+
onDismissRequest = {
98+
onDismiss(brushColor)
99+
}
100+
) {
101+
Column(horizontalAlignment = Alignment.CenterHorizontally) {
102+
ColorPickerGradientRingRectHSL(
103+
modifier = Modifier
104+
.fillMaxWidth()
105+
.weight(1f)
106+
.background(Color(0xcc212121), shape = RoundedCornerShape(5.dp))
107+
.padding(horizontal = 10.dp, vertical = 2.dp),
108+
initialBrushColor = initialBrushColor,
109+
gradientColorState = gradientColorState,
110+
ringOuterRadiusFraction = ringOuterRadiusFraction,
111+
ringInnerRadiusFraction = ringInnerRadiusFraction,
112+
ringBackgroundColor = ringBackgroundColor,
113+
ringBorderStrokeColor = ringBorderStrokeColor,
114+
ringBorderStrokeWidth = ringBorderStrokeWidth,
115+
selectionRadius = selectionRadius,
116+
onBrushColorChange = {
117+
brushColor = it
118+
}
119+
)
120+
121+
FloatingActionButton(
122+
onClick = { onDismiss(brushColor) },
123+
backgroundColor = Color.Black
124+
) {
125+
Icon(
126+
imageVector = Icons.Filled.Close,
127+
contentDescription = null,
128+
tint = Blue400
129+
)
130+
}
131+
}
132+
}
133+
}
134+
135+
@Composable
136+
fun ColorPickerRingRectGradientHSVDialog(
137+
initialBrushColor: BrushColor,
138+
gradientColorState: GradientColorState = rememberGradientColorState(),
139+
ringOuterRadiusFraction: Float = .9f,
140+
ringInnerRadiusFraction: Float = .6f,
141+
ringBackgroundColor: Color = Color.Transparent,
142+
ringBorderStrokeColor: Color = Color.Black,
143+
ringBorderStrokeWidth: Dp = 4.dp,
144+
selectionRadius: Dp = 8.dp,
145+
onDismiss: (BrushColor) -> Unit
146+
) {
147+
148+
var brushColor: BrushColor by remember { mutableStateOf(initialBrushColor.copy()) }
149+
150+
Dialog(
151+
onDismissRequest = {
152+
onDismiss(brushColor)
153+
}
154+
) {
155+
Column(horizontalAlignment = Alignment.CenterHorizontally) {
156+
ColorPickerGradientRingRectHSV(
157+
modifier = Modifier
158+
.fillMaxWidth()
159+
.weight(1f)
160+
.background(Color(0xcc212121), shape = RoundedCornerShape(5.dp))
161+
.padding(horizontal = 10.dp, vertical = 2.dp),
162+
initialBrushColor = initialBrushColor,
163+
gradientColorState = gradientColorState,
164+
ringOuterRadiusFraction = ringOuterRadiusFraction,
165+
ringInnerRadiusFraction = ringInnerRadiusFraction,
166+
ringBackgroundColor = ringBackgroundColor,
167+
ringBorderStrokeColor = ringBorderStrokeColor,
168+
ringBorderStrokeWidth = ringBorderStrokeWidth,
169+
selectionRadius = selectionRadius,
170+
onBrushColorChange = {
171+
brushColor = it
172+
}
173+
)
174+
175+
FloatingActionButton(
176+
onClick = { onDismiss(brushColor) },
177+
backgroundColor = Color.Black
178+
) {
179+
Icon(
180+
imageVector = Icons.Filled.Close,
181+
contentDescription = null,
182+
tint = Blue400
183+
)
184+
}
185+
}
186+
}
187+
}

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/model/BrushColor.kt‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
package com.smarttoolfactory.colorpicker.model
2+
3+
import androidx.compose.ui.graphics.Brush
4+
import androidx.compose.ui.graphics.Color
5+
import androidx.compose.ui.graphics.SolidColor
6+
7+
8+
/**
9+
* Data class that contains [Brush] and [Color] and can return either based on user selection.
10+
*/
11+
data class BrushColor(
12+
var color: Color = Color.Unspecified,
13+
var brush: Brush? = null
14+
) {
15+
/**
16+
* [Brush] that is not **null** [brush] property or [SolidColor] that is not nullable and
17+
* contains [color] property as [SolidColor.value]
18+
*/
19+
val activeBrush: Brush
20+
get() = brush ?: solidColor
21+
22+
/**
23+
* [SolidColor] is a [Brush] that
24+
* wraps [color] property that is used for [activeBrush] if [brush] property is **null**
25+
*/
26+
val solidColor = SolidColor(color)
27+
}

0 commit comments

Comments
 (0)