Skip to content

Commit 5ec7e78

Browse files
SmartToolFactorySmartToolFactory
committed
Add gradient selection demo
1 parent 6f6ace3 commit 5ec7e78

File tree

11 files changed

+297
-205
lines changed

11 files changed

+297
-205
lines changed

‎README.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
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)[https://github.com/mchome/flutter_colorpicker] for Flutter
6+
Inspired by mchome's (flutter_colorpicker)[https://github.com/mchome/flutter_colorpicker] for
7+
Flutter
78

89
### Color Pickers
10+
911
There are various selection of default color pickers and with selectors sliders, and hex displays
1012
it's possible to create new ones either.
1113

@@ -23,18 +25,18 @@ it's possible to create new ones either.
2325

2426
<img src="/./screenshots/intro.gif" align="center" width="50%"/>
2527

26-
2728
### Demos
2829

2930
* `SaturationSelectorDemo` different type of Hue/Saturation/Value/Lightness Selectors
31+
* `GradientSelection` select gradient with varying properties such as tile mode, angle, size, or type, colors and color stops
3032
* `GradientAngleDeme` gradient rotation with `GradientOffset` objects.
3133
* `HSVHSLGradientDemo` various types of gradients for creating pickers
3234
* `ColorfulSliderDemo` Sliders that can be used with different type of options with different
3335
Selectors and Pickers
3436

35-
| Selectors | Gradient Angle | HSV/HSL Gradients| Colorful Sliders |
36-
| ----------|-----------| -----------| -----------|
37-
| <img src="./screenshots/saturation.gif"/> | <img src="./screenshots/gradient_angle.gif"/> | <img src="./screenshots/hsv_hsl_gradient.gif"/> | <img src="./screenshots/colorful_sliders.gif"/> |
37+
| Selectors | Gradient Selection |Gradient Angle | HSV/HSL Gradients| Colorful Sliders |
38+
| ----------|-----------|-----------| -----------| -----------|
39+
| <img src="./screenshots/saturation.gif"/> | <img src="./screenshots/gradient_selection.gif"/> | <img src="./screenshots/gradient_angle.gif"/> | <img src="./screenshots/hsv_hsl_gradient.gif"/> | <img src="./screenshots/colorful_sliders.gif"/> |
3840

3941
### Completed:
4042

@@ -53,11 +55,12 @@ it's possible to create new ones either.
5355
- [x] Add Circle Hue Saturation Selector
5456
- [x] Add Composable to display colors in HEX and change color using TextField
5557
- [x] Add option to display colors in a dialog
58+
- [x] Add gradient color selection with percentage stops, linear, radial and sweep options
59+
- [x] Add gradient selection demo
5660

5761
### TODOs:
5862

5963
- [ ] Add and display colors selected previously
60-
- [ ] Add gradient color selection with percentage stops, linear, radial and sweep options
6164
- [ ] Add option to select colors from Image
6265
- [ ] Add option to select colors from Screen
6366
- [ ] Add option to select colors from Camera

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/MainActivity.kt‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,10 @@ private fun HomeContent() {
8080
when (page) {
8181
0 -> ColorPickerDemo()
8282
1 -> SaturationSelectorDemo()
83-
2 -> GradientAngleDemo()
84-
3 -> HSVHSLGradientDemo()
85-
4 -> ColorfulSliderDemo()
83+
2 -> GradientSelectionDemo()
84+
3 -> GradientAngleDemo()
85+
4 -> HSVHSLGradientDemo()
86+
5 -> ColorfulSliderDemo()
8687
else -> ColorModeConversionDemo()
8788
}
8889
}
@@ -92,6 +93,7 @@ internal val tabList =
9293
listOf(
9394
"Color Picker",
9495
"Saturation Selector",
96+
"Gradient Selection",
9597
"Gradient Angle",
9698
"HSV&HSL Gradients",
9799
"Colorful Sliders",

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
package com.smarttoolfactory.composecolorpicker.demo
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.foundation.rememberScrollState
6+
import androidx.compose.foundation.shape.RoundedCornerShape
7+
import androidx.compose.foundation.verticalScroll
8+
import androidx.compose.material.Text
9+
import androidx.compose.runtime.*
10+
import androidx.compose.ui.Alignment
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.graphics.Color
13+
import androidx.compose.ui.text.font.FontWeight
14+
import androidx.compose.ui.unit.DpSize
15+
import androidx.compose.ui.unit.dp
16+
import androidx.compose.ui.unit.sp
17+
import com.smarttoolfactory.colorpicker.model.rememberGradientColor
18+
import com.smarttoolfactory.colorpicker.selector.SelectorDiamondSaturationLightnessHSL
19+
import com.smarttoolfactory.colorpicker.selector.gradient.BrushDisplay
20+
import com.smarttoolfactory.colorpicker.selector.gradient.GradientSelector
21+
import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayHueHSL
22+
import com.smarttoolfactory.colorpicker.ui.Blue400
23+
import com.smarttoolfactory.colorpicker.widget.drawChecker
24+
25+
26+
/**
27+
* Demo for creating selecting gradient
28+
*/
29+
@Composable
30+
fun GradientSelectionDemo() {
31+
Column(
32+
modifier = Modifier.fillMaxSize(),
33+
horizontalAlignment = Alignment.CenterHorizontally
34+
) {
35+
36+
var hue by remember { mutableStateOf(0f) }
37+
var saturation by remember { mutableStateOf(.5f) }
38+
var lightness by remember { mutableStateOf(.5f) }
39+
var alpha by remember { mutableStateOf(1f) }
40+
41+
val currentColor = Color.hsl(hue, saturation, lightness, alpha)
42+
43+
SelectorDiamondSaturationLightnessHSL(
44+
modifier = Modifier.size(150.dp),
45+
hue = hue,
46+
saturation = saturation,
47+
lightness = lightness,
48+
selectionRadius = 8.dp
49+
) { s, l ->
50+
saturation = s
51+
lightness = l
52+
}
53+
54+
SliderCircleColorDisplayHueHSL(
55+
modifier = Modifier.padding(8.dp),
56+
hue = hue,
57+
saturation = saturation,
58+
lightness = lightness,
59+
alpha = alpha,
60+
onHueChange = {
61+
hue = it
62+
},
63+
onAlphaChange = {
64+
alpha = it
65+
}
66+
)
67+
68+
Text(
69+
text = "GRADIENT SELECTION",
70+
modifier = Modifier.padding(5.dp),
71+
color = Blue400,
72+
fontSize = 16.sp,
73+
fontWeight = FontWeight.Bold
74+
)
75+
76+
Column(
77+
modifier = Modifier
78+
.fillMaxSize()
79+
.verticalScroll(rememberScrollState()),
80+
horizontalAlignment = Alignment.CenterHorizontally
81+
) {
82+
val size = DpSize(150.dp, 100.dp)
83+
val gradientColor = rememberGradientColor(size)
84+
85+
// Box(
86+
// modifier = Modifier
87+
// .size(size)
88+
// .drawChecker(RoundedCornerShape(20))
89+
// .background(gradientColor.brushColor.activeBrush),
90+
// )
91+
BrushDisplay(gradientColor = gradientColor)
92+
GradientSelector(currentColor, gradientColor)
93+
}
94+
}
95+
}

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

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,36 @@ import androidx.compose.ui.graphics.Brush
77
import androidx.compose.ui.graphics.Color
88
import androidx.compose.ui.graphics.SolidColor
99
import androidx.compose.ui.graphics.TileMode
10+
import androidx.compose.ui.platform.LocalDensity
11+
import androidx.compose.ui.unit.DpSize
1012
import com.smarttoolfactory.colorpicker.selector.gradient.GradientType
1113
import com.smarttoolfactory.colorpicker.ui.GradientAngle
1214
import com.smarttoolfactory.colorpicker.ui.GradientOffset
1315

1416
@Composable
15-
fun rememberGradientColor(): GradientColor {
17+
fun rememberGradientColor(dpSize: DpSize = DpSize.Zero): GradientColor {
18+
19+
val density = LocalDensity.current
20+
1621
return remember {
17-
GradientColor()
22+
23+
val size = if (dpSize == DpSize.Zero) {
24+
Size.Zero
25+
} else {
26+
with(density) {
27+
Size(
28+
dpSize.width.toPx(),
29+
dpSize.height.toPx()
30+
)
31+
}
32+
}
33+
GradientColor(size)
1834
}
1935
}
2036

21-
class GradientColor {
37+
class GradientColor(size: Size) {
2238

23-
var size by mutableStateOf(Size.Zero)
39+
var size by mutableStateOf(size)
2440
val brushColor: BrushColor
2541
get() {
2642
val colorStops = colorStops.toTypedArray()
@@ -37,14 +53,16 @@ class GradientColor {
3753
x = size.width * centerFriction.x,
3854
y = size.height * centerFriction.y
3955
),
40-
radius = (size.width.coerceAtLeast(size.height)) / 2 * radiusFriction
56+
radius = ((size.width.coerceAtLeast(size.height)) / 2 * radiusFriction)
57+
.coerceAtLeast(0.01f),
58+
tileMode = tileMode
4159
)
4260
GradientType.Sweep -> Brush.sweepGradient(
4361
colorStops = colorStops,
4462
center = Offset(
4563
x = size.width * centerFriction.x,
4664
y = size.height * centerFriction.y
47-
)
65+
),
4866
)
4967
}
5068
return BrushColor(brush = brush)

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/selector/gradient/ExapandableColumn.kt‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,18 @@ import androidx.compose.ui.unit.sp
1818

1919
@Composable
2020
internal fun ExpandableColumn(
21+
modifier: Modifier = Modifier,
22+
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
2123
title: String,
2224
color: Color,
25+
initialExpandState:Boolean = true,
2326
content: @Composable () -> Unit
2427
) {
25-
var expanded by remember { mutableStateOf(true) }
26-
Column(modifier = Modifier.fillMaxWidth()) {
28+
var expanded by remember { mutableStateOf(initialExpandState) }
29+
Column(
30+
modifier = modifier.fillMaxWidth(),
31+
horizontalAlignment = horizontalAlignment
32+
) {
2733

2834
Row(
2935
modifier = Modifier

0 commit comments

Comments
 (0)