Skip to content

Commit 8f6a00f

Browse files
kavi707kavi707
committed
Refine the UI in grid color picker
1 parent cbbe5c4 commit 8f6a00f

File tree

4 files changed

+191
-87
lines changed

4 files changed

+191
-87
lines changed

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

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
1010
import androidx.compose.material3.ModalBottomSheet
1111
import androidx.compose.material3.OutlinedButton
1212
import androidx.compose.material3.SheetState
13+
import androidx.compose.material3.Tab
14+
import androidx.compose.material3.TabRow
1315
import androidx.compose.material3.Text
1416
import androidx.compose.runtime.Composable
1517
import androidx.compose.runtime.MutableState
@@ -36,6 +38,8 @@ fun KvColorPickerBottomSheet(showSheet: MutableState<Boolean>, sheetState: Sheet
3638
) {
3739
Column {
3840
var selectedColor by remember { mutableStateOf(Color.Black) }
41+
var tabIndex by remember { mutableStateOf(0) }
42+
val tabs = listOf("RGB", "GRID")
3943

4044
Text(
4145
text ="Pick you color",
@@ -45,19 +49,32 @@ fun KvColorPickerBottomSheet(showSheet: MutableState<Boolean>, sheetState: Sheet
4549
fontSize = 32.sp
4650
)
4751

48-
/*RGBAColorPicker(
49-
modifier = Modifier.padding(16.dp),
50-
onColorSelected = {
51-
selectedColor = it
52-
}
53-
)*/
54-
55-
GridColorPicker(
56-
modifier = Modifier.padding(16.dp),
57-
onColorSelected = {
58-
selectedColor = it
52+
TabRow(
53+
modifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 8.dp),
54+
selectedTabIndex = tabIndex
55+
) {
56+
tabs.forEachIndexed { index, title ->
57+
Tab(
58+
text = { Text(title) },
59+
selected = tabIndex == index,
60+
onClick = { tabIndex = index }
61+
)
5962
}
60-
)
63+
}
64+
when(tabIndex) {
65+
0 -> RGBAColorPicker(
66+
modifier = Modifier.padding(16.dp),
67+
onColorSelected = {
68+
selectedColor = it
69+
}
70+
)
71+
1 -> GridColorPicker(
72+
modifier = Modifier.padding(16.dp),
73+
onColorSelected = {
74+
selectedColor = it
75+
}
76+
)
77+
}
6178

6279
Row (
6380
modifier = Modifier

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,8 +221,8 @@ fun ColorBox(givenColor: Color, selectedColor: Color?, onSelect: (color: Color)
221221

222222
Box(
223223
modifier = Modifier
224-
.width(22.dp)
225-
.height(22.dp)
224+
.width(24.dp)
225+
.height(24.dp)
226226
.background(givenColor, RectangleShape)
227227
.clickable {
228228
isSelected = true

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

Lines changed: 114 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import com.kavi.droid.color.picker.ui.common.SelectedColorDetail
3333
fun GridColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedColor: Color) -> Unit) {
3434

3535
var selectedColor by remember { mutableStateOf(Color.White) }
36-
val colorHex = remember { mutableStateOf(TextFieldValue("")) }
36+
val colorHex = remember { mutableStateOf(TextFieldValue("#ffffff")) }
3737

3838
val onSelectColor: (color: Color) -> Unit = {
3939
selectedColor = it
@@ -45,51 +45,124 @@ fun GridColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedCol
4545
onColorSelected.invoke(selectedColor)
4646
}
4747

48-
Column (
49-
modifier = modifier
50-
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
51-
.shadow(
52-
elevation = 10.dp,
53-
shape = RoundedCornerShape(8.dp)
54-
)
55-
.background(Color.White)
56-
.padding(12.dp)
57-
) {
58-
Text(
59-
text ="By selecting color from the grid below, you can pick your color.",
60-
textAlign = TextAlign.Start,
48+
Column (modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
49+
Column(
6150
modifier = Modifier
62-
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
63-
color = Color.Gray,
64-
style = MaterialTheme.typography.bodySmall,
65-
fontSize = 12.sp
66-
)
51+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
52+
.shadow(
53+
elevation = 10.dp,
54+
shape = RoundedCornerShape(8.dp)
55+
)
56+
.background(Color.White)
57+
.padding(start = 12.dp, end = 12.dp, top = 12.dp, bottom = 8.dp)
58+
) {
59+
Text(
60+
text = "By selecting color from the grid below, you can pick your color.",
61+
textAlign = TextAlign.Start,
62+
modifier = Modifier
63+
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
64+
color = Color.Gray,
65+
style = MaterialTheme.typography.bodySmall,
66+
fontSize = 12.sp
67+
)
6768

68-
Row(
69+
Row(
70+
modifier = Modifier
71+
.fillMaxWidth()
72+
.padding(top = 16.dp, start = 4.dp, end = 4.dp, bottom = 12.dp),
73+
verticalAlignment = Alignment.CenterVertically,
74+
horizontalArrangement = Arrangement.Center
75+
) {
76+
ColorColum(
77+
givenColor = MatPackage.MatRed,
78+
selectedColor = selectedColor,
79+
onSelect = onSelectColor
80+
)
81+
ColorColum(
82+
givenColor = MatPackage.MatRose,
83+
selectedColor = selectedColor,
84+
onSelect = onSelectColor
85+
)
86+
ColorColum(
87+
givenColor = MatPackage.MatLPurple,
88+
selectedColor = selectedColor,
89+
onSelect = onSelectColor
90+
)
91+
ColorColum(
92+
givenColor = MatPackage.MatDPurple,
93+
selectedColor = selectedColor,
94+
onSelect = onSelectColor
95+
)
96+
ColorColum(
97+
givenColor = MatPackage.MatDBlue,
98+
selectedColor = selectedColor,
99+
onSelect = onSelectColor
100+
)
101+
ColorColum(
102+
givenColor = MatPackage.MatLBlue,
103+
selectedColor = selectedColor,
104+
onSelect = onSelectColor
105+
)
106+
ColorColum(
107+
givenColor = MatPackage.MatLLBlue,
108+
selectedColor = selectedColor,
109+
onSelect = onSelectColor
110+
)
111+
ColorColum(
112+
givenColor = MatPackage.MatLCyan,
113+
selectedColor = selectedColor,
114+
onSelect = onSelectColor
115+
)
116+
ColorColum(
117+
givenColor = MatPackage.MatDCyan,
118+
selectedColor = selectedColor,
119+
onSelect = onSelectColor
120+
)
121+
ColorColum(
122+
givenColor = MatPackage.MatDGreen,
123+
selectedColor = selectedColor,
124+
onSelect = onSelectColor
125+
)
126+
ColorColum(
127+
givenColor = MatPackage.MatLGreen,
128+
selectedColor = selectedColor,
129+
onSelect = onSelectColor
130+
)
131+
ColorColum(
132+
givenColor = MatPackage.MatLLGreen,
133+
selectedColor = selectedColor,
134+
onSelect = onSelectColor
135+
)
136+
ColorColum(
137+
givenColor = MatPackage.MatYellow,
138+
selectedColor = selectedColor,
139+
onSelect = onSelectColor
140+
)
141+
ColorColum(
142+
givenColor = MatPackage.MatGold,
143+
selectedColor = selectedColor,
144+
onSelect = onSelectColor
145+
)
146+
ColorColum(
147+
givenColor = MatPackage.MatOrange,
148+
selectedColor = selectedColor,
149+
onSelect = onSelectColor
150+
)
151+
}
152+
}
153+
154+
Column(
69155
modifier = Modifier
70-
.fillMaxWidth()
71-
.padding(top = 16.dp, start = 12.dp, end = 12.dp, bottom = 12.dp),
72-
verticalAlignment = Alignment.CenterVertically,
73-
horizontalArrangement = Arrangement.Center
156+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
157+
.shadow(
158+
elevation = 10.dp,
159+
shape = RoundedCornerShape(8.dp)
160+
)
161+
.background(Color.White)
162+
.padding(start = 12.dp, end = 12.dp)
74163
) {
75-
ColorColum(givenColor = MatPackage.MatRed, selectedColor = selectedColor, onSelect = onSelectColor)
76-
ColorColum(givenColor = MatPackage.MatRose, selectedColor = selectedColor, onSelect = onSelectColor)
77-
ColorColum(givenColor = MatPackage.MatLPurple, selectedColor = selectedColor, onSelect = onSelectColor)
78-
ColorColum(givenColor = MatPackage.MatDPurple, selectedColor = selectedColor, onSelect = onSelectColor)
79-
ColorColum(givenColor = MatPackage.MatDBlue, selectedColor = selectedColor, onSelect = onSelectColor)
80-
ColorColum(givenColor = MatPackage.MatLBlue, selectedColor = selectedColor, onSelect = onSelectColor)
81-
ColorColum(givenColor = MatPackage.MatLLBlue, selectedColor = selectedColor, onSelect = onSelectColor)
82-
ColorColum(givenColor = MatPackage.MatLCyan, selectedColor = selectedColor, onSelect = onSelectColor)
83-
ColorColum(givenColor = MatPackage.MatDCyan, selectedColor = selectedColor, onSelect = onSelectColor)
84-
ColorColum(givenColor = MatPackage.MatDGreen, selectedColor = selectedColor, onSelect = onSelectColor)
85-
ColorColum(givenColor = MatPackage.MatLGreen, selectedColor = selectedColor, onSelect = onSelectColor)
86-
ColorColum(givenColor = MatPackage.MatLLGreen, selectedColor = selectedColor, onSelect = onSelectColor)
87-
ColorColum(givenColor = MatPackage.MatYellow, selectedColor = selectedColor, onSelect = onSelectColor)
88-
ColorColum(givenColor = MatPackage.MatGold, selectedColor = selectedColor, onSelect = onSelectColor)
89-
ColorColum(givenColor = MatPackage.MatOrange, selectedColor = selectedColor, onSelect = onSelectColor)
164+
SelectedColorDetail(color = selectedColor, colorHex = colorHex)
90165
}
91-
92-
SelectedColorDetail(color = selectedColor, colorHex = colorHex)
93166
}
94167

95168
}

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

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import androidx.compose.runtime.remember
2020
import androidx.compose.runtime.saveable.rememberSaveable
2121
import androidx.compose.ui.Modifier
2222
import androidx.compose.ui.draw.shadow
23+
import androidx.compose.ui.focus.focusModifier
2324
import androidx.compose.ui.graphics.Color
2425
import androidx.compose.ui.text.input.TextFieldValue
2526
import androidx.compose.ui.text.style.TextAlign
@@ -54,43 +55,56 @@ fun RGBAColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedCol
5455
onColorSelected.invoke(color)
5556
}
5657

57-
Column (
58-
modifier = modifier
59-
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
60-
.shadow(
61-
elevation = 10.dp,
62-
shape = RoundedCornerShape(8.dp)
63-
)
64-
.background(Color.White)
65-
.padding(12.dp)
66-
) {
67-
Text(
68-
text ="By dragging \'RED\', \'GREEN\', and \'BLUE\' bars below, you can select " +
69-
"or generate your color you want exactly.",
70-
textAlign = TextAlign.Start,
58+
Column (modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
59+
Column (
7160
modifier = Modifier
72-
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
73-
color = Color.Gray,
74-
style = MaterialTheme.typography.bodySmall,
75-
fontSize = 12.sp
76-
)
77-
78-
Row {
79-
// Sliders for adjusting RGB-A values
80-
Column(
61+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
62+
.shadow(
63+
elevation = 10.dp,
64+
shape = RoundedCornerShape(8.dp)
65+
)
66+
.background(Color.White)
67+
.padding(start = 12.dp, end = 12.dp, top = 12.dp, bottom = 12.dp)
68+
) {
69+
Text(
70+
text ="By dragging \'RED\', \'GREEN\', and \'BLUE\' bars below, you can select " +
71+
"or generate your color you want exactly.",
72+
textAlign = TextAlign.Start,
8173
modifier = Modifier
82-
.fillMaxWidth()
83-
.padding(12.dp),
84-
verticalArrangement = Arrangement.spacedBy(5.dp)
85-
) {
86-
ColorSlider("RED", red, Color.Red)
87-
ColorSlider("GREEN", green, Color.Green)
88-
ColorSlider("BLUE", blue, Color.Blue)
89-
AlphaSlider(alpha, color)
74+
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
75+
color = Color.Gray,
76+
style = MaterialTheme.typography.bodySmall,
77+
fontSize = 12.sp
78+
)
79+
80+
Row {
81+
// Sliders for adjusting RGB-A values
82+
Column(
83+
modifier = Modifier
84+
.fillMaxWidth()
85+
.padding(12.dp),
86+
verticalArrangement = Arrangement.spacedBy(5.dp)
87+
) {
88+
ColorSlider("RED", red, Color.Red)
89+
ColorSlider("GREEN", green, Color.Green)
90+
ColorSlider("BLUE", blue, Color.Blue)
91+
AlphaSlider(alpha, color)
92+
}
9093
}
9194
}
9295

93-
SelectedColorDetail(color = color, colorHex = colorHex)
96+
Column (
97+
modifier = Modifier
98+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
99+
.shadow(
100+
elevation = 10.dp,
101+
shape = RoundedCornerShape(8.dp)
102+
)
103+
.background(Color.White)
104+
.padding(start = 12.dp, end = 12.dp)
105+
) {
106+
SelectedColorDetail(color = color, colorHex = colorHex)
107+
}
94108
}
95109
}
96110

0 commit comments

Comments
 (0)