Skip to content

Commit 1a82bc4

Browse files
kavi707kavi707
committed
Start to create UI for blend color picker.
1 parent def8ec0 commit 1a82bc4

6 files changed

Lines changed: 235 additions & 2 deletions

File tree

‎kv-color-picker/gradle.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
kvColorPaletteGroupId=com.github.KvColorPalette
22
kvColorPickerArtifactId=KvColorPicker-Android
3-
kvColorPickerVersion=2.2.0
3+
kvColorPickerVersion=2.3.0

‎kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/KvColorPickerBottomSheet.kt‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import androidx.compose.ui.unit.sp
3636
import com.kavi.droid.color.palette.util.ColorUtil
3737
import com.kavi.droid.color.picker.R
3838
import com.kavi.droid.color.picker.ui.common.SelectedColorDetail
39+
import com.kavi.droid.color.picker.ui.pickers.BlendColorPicker
3940
import com.kavi.droid.color.picker.ui.pickers.GridColorPicker
4041
import com.kavi.droid.color.picker.ui.pickers.HSLAColorPicker
4142
import com.kavi.droid.color.picker.ui.pickers.RGBAColorPicker
@@ -76,7 +77,8 @@ fun KvColorPickerBottomSheet(
7677
val tabs = listOf(
7778
stringResource(R.string.label_rgba),
7879
stringResource(R.string.label_grid),
79-
stringResource(R.string.label_hsla)
80+
stringResource(R.string.label_hsla),
81+
stringResource(R.string.label_blend)
8082
)
8183

8284
Text(
@@ -142,6 +144,14 @@ fun KvColorPickerBottomSheet(
142144
colorHex.value = TextFieldValue(ColorUtil.getHex(it))
143145
}
144146
)
147+
3 -> BlendColorPicker(
148+
modifier = Modifier.padding(16.dp),
149+
lastSelectedColor = selectedColor,
150+
onColorSelected = {
151+
selectedColor = it
152+
colorHex.value = TextFieldValue(ColorUtil.getHex(it))
153+
}
154+
)
145155
}
146156

147157
Column (

‎kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/pickers/BlendColorPicker.kt‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
package com.kavi.droid.color.picker.ui.pickers
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Box
7+
import androidx.compose.foundation.layout.Column
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.Spacer
10+
import androidx.compose.foundation.layout.fillMaxWidth
11+
import androidx.compose.foundation.layout.height
12+
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.foundation.layout.size
14+
import androidx.compose.foundation.layout.width
15+
import androidx.compose.foundation.shape.RoundedCornerShape
16+
import androidx.compose.material3.Icon
17+
import androidx.compose.material3.MaterialTheme
18+
import androidx.compose.material3.Slider
19+
import androidx.compose.material3.Text
20+
import androidx.compose.runtime.Composable
21+
import androidx.compose.runtime.collectAsState
22+
import androidx.compose.runtime.getValue
23+
import androidx.compose.runtime.mutableFloatStateOf
24+
import androidx.compose.runtime.mutableStateOf
25+
import androidx.compose.runtime.remember
26+
import androidx.compose.runtime.setValue
27+
import androidx.compose.ui.Alignment
28+
import androidx.compose.ui.Modifier
29+
import androidx.compose.ui.draw.shadow
30+
import androidx.compose.ui.graphics.Color
31+
import androidx.compose.ui.res.painterResource
32+
import androidx.compose.ui.res.stringResource
33+
import androidx.compose.ui.text.style.TextAlign
34+
import androidx.compose.ui.unit.dp
35+
import androidx.compose.ui.unit.sp
36+
import com.kavi.droid.color.palette.extension.hsl
37+
import com.kavi.droid.color.picker.R
38+
import com.kavi.droid.color.picker.ui.common.SliderHue
39+
40+
@Composable
41+
fun BlendColorPicker(
42+
modifier: Modifier = Modifier,
43+
lastSelectedColor: Color = Color.White,
44+
onColorSelected: (selectedColor: Color) -> Unit
45+
) {
46+
// State variables for HSL-A values
47+
val firstHue = remember { mutableFloatStateOf(lastSelectedColor.hsl.hue) }
48+
val secondHue = remember { mutableFloatStateOf(lastSelectedColor.hsl.hue) }
49+
50+
val firstBlendColor = remember { mutableStateOf(lastSelectedColor) }
51+
val secondBlendColor = remember { mutableStateOf(lastSelectedColor) }
52+
53+
var colorBias by remember { mutableFloatStateOf(.5f) }
54+
55+
Column (modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
56+
Column (
57+
modifier = Modifier
58+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
59+
.shadow(
60+
elevation = 10.dp,
61+
shape = RoundedCornerShape(8.dp)
62+
)
63+
.background(Color.White)
64+
.padding(start = 12.dp, end = 12.dp, top = 12.dp, bottom = 12.dp)
65+
) {
66+
67+
Text(
68+
text = stringResource(R.string.phrase_select_color_blend),
69+
textAlign = TextAlign.Start,
70+
modifier = Modifier
71+
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
72+
color = Color.Gray,
73+
style = MaterialTheme.typography.bodySmall,
74+
fontSize = 12.sp
75+
)
76+
77+
Row (
78+
modifier = Modifier.fillMaxWidth(),
79+
verticalAlignment = Alignment.CenterVertically,
80+
horizontalArrangement = Arrangement.Center
81+
) {
82+
Column(
83+
modifier = Modifier.weight(.5f),
84+
horizontalAlignment = Alignment.CenterHorizontally,
85+
verticalArrangement = Arrangement.Center
86+
) {
87+
SliderHue(Modifier.padding(top = 4.dp, bottom = 4.dp), onColorSelect = { selectedColor ->
88+
firstHue.floatValue = selectedColor.hsl.hue
89+
firstBlendColor.value = selectedColor
90+
})
91+
}
92+
93+
Spacer(modifier = Modifier.width(8.dp))
94+
95+
Column(
96+
modifier = Modifier.weight(.5f),
97+
horizontalAlignment = Alignment.CenterHorizontally,
98+
verticalArrangement = Arrangement.Center
99+
) {
100+
SliderHue(Modifier.padding(top = 4.dp, bottom = 4.dp), onColorSelect = { selectedColor ->
101+
secondHue.floatValue = selectedColor.hsl.hue
102+
secondBlendColor.value = selectedColor
103+
})
104+
}
105+
}
106+
107+
Row (
108+
modifier = Modifier
109+
.padding(top = 8.dp)
110+
.fillMaxWidth(),
111+
verticalAlignment = Alignment.CenterVertically,
112+
horizontalArrangement = Arrangement.Center
113+
) {
114+
Column(
115+
modifier = Modifier
116+
.weight(.2f),
117+
horizontalAlignment = Alignment.Start,
118+
verticalArrangement = Arrangement.Center
119+
) {
120+
Box(
121+
modifier = Modifier
122+
.padding(4.dp)
123+
.height(50.dp)
124+
.width(50.dp)
125+
.background(
126+
firstBlendColor.value,
127+
shape = MaterialTheme.shapes.large
128+
)
129+
.border(
130+
2.dp,
131+
MaterialTheme.colorScheme.primary,
132+
RoundedCornerShape(12.dp)
133+
)
134+
)
135+
}
136+
137+
Spacer(modifier = Modifier.width(4.dp))
138+
139+
Row (
140+
modifier = Modifier.weight(.7f),
141+
verticalAlignment = Alignment.CenterVertically
142+
) {
143+
Icon(
144+
painter = painterResource(R.drawable.icon_left_arrow),
145+
contentDescription = "Left arrow",
146+
Modifier
147+
.weight(.25f)
148+
.size(40.dp)
149+
)
150+
151+
Slider(
152+
modifier = Modifier
153+
.height(50.dp)
154+
.weight(.7f),
155+
value = colorBias,
156+
valueRange = 0f..1f,
157+
onValueChange = {
158+
colorBias = it
159+
},
160+
)
161+
Icon(
162+
painter = painterResource(R.drawable.icon_right_arrow),
163+
contentDescription = "Right arrow",
164+
Modifier
165+
.weight(.25f)
166+
.size(40.dp)
167+
)
168+
}
169+
170+
Spacer(modifier = Modifier.width(4.dp))
171+
172+
Column(
173+
modifier = Modifier
174+
.weight(.2f),
175+
horizontalAlignment = Alignment.End,
176+
verticalArrangement = Arrangement.Center
177+
) {
178+
Box(
179+
modifier = Modifier
180+
.padding(4.dp)
181+
.height(50.dp)
182+
.width(50.dp)
183+
.background(
184+
secondBlendColor.value,
185+
shape = MaterialTheme.shapes.large
186+
)
187+
.border(
188+
2.dp,
189+
MaterialTheme.colorScheme.primary,
190+
RoundedCornerShape(12.dp)
191+
)
192+
)
193+
}
194+
}
195+
}
196+
}
197+
}

‎kv-color-picker/src/main/res/drawable/icon_left_arrow.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="512dp"
3+
android:height="512dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24">
6+
<path
7+
android:fillColor="#FF000000"
8+
android:pathData="M10.48,19a1,1 0,0 1,-0.7 -0.29L5.19,14.12a3,3 0,0 1,0 -4.24L9.78,5.29a1,1 0,0 1,1.41 0,1 1,0 0,1 0,1.42L6.6,11.29a1,1 0,0 0,0 1.42l4.59,4.58a1,1 0,0 1,0 1.42A1,1 0,0 1,10.48 19Z"/>
9+
<path
10+
android:fillColor="#FF000000"
11+
android:pathData="M17.48,19a1,1 0,0 1,-0.7 -0.29l-6,-6a1,1 0,0 1,0 -1.42l6,-6a1,1 0,0 1,1.41 0,1 1,0 0,1 0,1.42L12.9,12l5.29,5.29a1,1 0,0 1,0 1.42A1,1 0,0 1,17.48 19Z"/>
12+
</vector>

‎kv-color-picker/src/main/res/drawable/icon_right_arrow.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="512dp"
3+
android:height="512dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24">
6+
<path
7+
android:fillColor="#FF000000"
8+
android:pathData="M13.1,19a1,1 0,0 1,-0.7 -1.71L17,12.71a1,1 0,0 0,0 -1.42L12.4,6.71a1,1 0,0 1,0 -1.42,1 1,0 0,1 1.41,0L18.4,9.88a3,3 0,0 1,0 4.24l-4.59,4.59A1,1 0,0 1,13.1 19Z"/>
9+
<path
10+
android:fillColor="#FF000000"
11+
android:pathData="M6.1,19a1,1 0,0 1,-0.7 -1.71L10.69,12 5.4,6.71a1,1 0,0 1,0 -1.42,1 1,0 0,1 1.41,0l6,6a1,1 0,0 1,0 1.42l-6,6A1,1 0,0 1,6.1 19Z"/>
12+
</vector>

‎kv-color-picker/src/main/res/values/strings.xml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
<string name="label.rgba">RGB-A</string>
66
<string name="label.grid">GRID</string>
77
<string name="label.hsla">HSL-A</string>
8+
<string name="label.blend">BLEND</string>
89
<string name="label.color.hex">Color Hex</string>
910
<string name="title.pick.color">Pick your Color</string>
1011
<string name="phrase.selected.color">This is the selected\/generated color.</string>
1112
<string name="phrase.select.color.grid">By selecting color from the grid below, you can pick your color.</string>
1213
<string name="phrase.select.color.rgba">By dragging \'RED\', \'GREEN\', and \'BLUE\' bars below, you can select or generate your color you want exactly.</string>
1314
<string name="phrase.select.color.hsla">By dragging the slider in color bar and select the base color. Change the saturation, lightness and alpha of the selected color after that to get the exact color you want.</string>
15+
<string name="phrase.select.color.blend">By dragging the slider in color bars, select first and second color to blend. Then select how blended color bias to first and second is</string>
1416
</resources>

0 commit comments

Comments
 (0)