Skip to content

Commit 8243fbd

Browse files
SmartToolFactorySmartToolFactory
committed
add ColorfulIconSlider and demo
1 parent c9f8bc8 commit 8243fbd

File tree

25 files changed

+648
-219
lines changed

25 files changed

+648
-219
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ Colorful sliders that can have Solid or Gradient colors for thumb or track which
33
thumb and track with varying sizes, borders with solid or gradient colors.
44
And Sliders with emojis, or custom Composables like **Icon**.
55

6-
| Dimensions | Properties | SliderLabel | Gradient1 |
6+
| Dimensions | Properties | Icon | SliderLabel | Gradient1 |
77
| ----------|-----------| -----------| -----------|
8-
| <img src="./screenshots/slider1.png"/> | <img src="./screenshots/slider2.png"/> | <img src="./screenshots/slider3.png"/> | <img src="./screenshots/slider4.png"/> |
8+
| <img src="./screenshots/slider_dimensions.png"/> | <img src="./screenshots/slider_properties.png"/> | <img src="./screenshots/slider_icons.png"/> | <img src="./screenshots/slider_labels.png"/> | <img src="./screenshots/slider_gradient.png"/> |
99

1010

1111
### ColorfulSlider

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@ import android.os.Bundle
44
import androidx.activity.ComponentActivity
55
import androidx.activity.compose.setContent
66
import androidx.compose.animation.ExperimentalAnimationApi
7-
import androidx.compose.foundation.layout.Column
8-
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.foundation.background
8+
import androidx.compose.foundation.layout.*
99
import androidx.compose.material.*
1010
import androidx.compose.runtime.Composable
1111
import androidx.compose.runtime.rememberCoroutineScope
1212
import androidx.compose.ui.Modifier
1313
import androidx.compose.ui.graphics.Color
1414
import androidx.compose.ui.unit.dp
15+
import androidx.compose.ui.unit.sp
1516
import com.google.accompanist.pager.*
1617
import com.smarttoolfactory.composematerialslider.demo.*
18+
import com.smarttoolfactory.composematerialslider.ui.theme.BlueSmart
19+
import com.smarttoolfactory.composematerialslider.ui.theme.BlueSmartDark
1720
import com.smarttoolfactory.composematerialslider.ui.theme.ComposeMaterialSliderTheme
1821
import kotlinx.coroutines.launch
1922

@@ -45,7 +48,7 @@ private fun HomeContent() {
4548
val coroutineScope = rememberCoroutineScope()
4649

4750
ScrollableTabRow(
48-
backgroundColor = Color(0xff00897B),
51+
backgroundColor = BlueSmartDark,
4952
contentColor = Color.White,
5053
edgePadding = 8.dp,
5154
// Our selected tab is our current page
@@ -79,8 +82,9 @@ private fun HomeContent() {
7982
when (page) {
8083
0 -> ColorfulSliderDemo()
8184
1 -> SliderPropertiesDemo()
82-
2 -> SliderWithLabelDemo()
83-
3 -> SliderGradientDemo()
85+
2 -> ColorfulIconSliderDemo()
86+
3 -> SliderWithLabelDemo()
87+
4 -> SliderGradientDemo()
8488
else -> SliderGradientDemo2()
8589
}
8690
}
@@ -90,6 +94,7 @@ internal val tabList =
9094
listOf(
9195
"Slider Dimensions",
9296
"Slider Properties",
97+
"Slider with Icon",
9398
"Slider with Label",
9499
"Slider Gradients1",
95100
"Slider Gradients2",

‎app/src/main/java/com/smarttoolfactory/composematerialslider/demo/ColorfulIconSliderDemo.kt‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,203 @@
11
package com.smarttoolfactory.composematerialslider.demo
22

3+
import androidx.compose.foundation.*
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.foundation.shape.CircleShape
6+
import androidx.compose.foundation.shape.CutCornerShape
7+
import androidx.compose.foundation.shape.RoundedCornerShape
8+
import androidx.compose.material.Icon
9+
import androidx.compose.material.Text
10+
import androidx.compose.material.icons.Icons
11+
import androidx.compose.material.icons.filled.ThumbUp
12+
import androidx.compose.runtime.*
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.draw.shadow
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.res.painterResource
17+
import androidx.compose.ui.unit.dp
18+
import androidx.compose.ui.unit.sp
19+
import com.smarttoolfactory.composematerialslider.R
20+
import com.smarttoolfactory.composematerialslider.ui.theme.Blue400
21+
import com.smarttoolfactory.composematerialslider.ui.theme.Pink400
22+
import com.smarttoolfactory.composematerialslider.ui.theme.Purple400
23+
import com.smarttoolfactory.composematerialslider.ui.theme.Red400
24+
import com.smarttoolfactory.composematerialslider.ui.theme.brush.instaGradient
25+
import com.smarttoolfactory.composematerialslider.ui.theme.brush.sunriseGradient
26+
import com.smarttoolfactory.composematerialslider.ui.theme.brush.sunsetGradient
27+
import com.smarttoolfactory.slider.ColorfulIconSlider
28+
import com.smarttoolfactory.slider.MaterialSliderDefaults
29+
import com.smarttoolfactory.slider.SliderBrushColor
30+
31+
@Composable
32+
fun ColorfulIconSliderDemo() {
33+
34+
Column(
35+
modifier = Modifier
36+
.fillMaxSize()
37+
.verticalScroll(rememberScrollState())
38+
.padding(20.dp)
39+
) {
40+
var progress by remember { mutableStateOf(0f) }
41+
42+
TitleText("Text Thumb with Emoji")
43+
ColorfulIconSlider(
44+
value = progress,
45+
onValueChange = { value, offset ->
46+
progress = value
47+
},
48+
) {
49+
Text(text = "😃", fontSize = 20.sp, color = Color.Black)
50+
}
51+
52+
ColorfulIconSlider(
53+
value = progress,
54+
onValueChange = { value, offset ->
55+
progress = value
56+
},
57+
trackHeight = 12.dp,
58+
colors = MaterialSliderDefaults.materialColors(
59+
activeTrackColor = SliderBrushColor(color = Red400),
60+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
61+
),
62+
borderStroke = BorderStroke(1.dp, Red400)
63+
) {
64+
Text(text = "😍️", fontSize = 30.sp, color = Color.Black)
65+
}
66+
67+
ColorfulIconSlider(
68+
value = progress,
69+
onValueChange = { value, offset ->
70+
progress = value
71+
},
72+
trackHeight = 14.dp,
73+
colors = MaterialSliderDefaults.materialColors(
74+
activeTrackColor = SliderBrushColor(color = Blue400),
75+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
76+
),
77+
borderStroke = BorderStroke(1.dp, Blue400)
78+
) {
79+
Text(text = "👍", fontSize = 40.sp, color = Color.Black)
80+
}
81+
82+
83+
ColorfulIconSlider(
84+
value = progress,
85+
onValueChange = { value, offset ->
86+
progress = value
87+
},
88+
trackHeight = 14.dp
89+
) {
90+
Text(text = "😆", fontSize = 40.sp, color = Color.Black)
91+
}
92+
93+
ColorfulIconSlider(
94+
value = progress,
95+
onValueChange = { value, offset ->
96+
progress = value
97+
},
98+
trackHeight = 14.dp
99+
) {
100+
Text(text = "😂😂😂", fontSize = 30.sp, color = Color.Black)
101+
}
102+
103+
104+
TitleText("Box Thumb with Shape")
105+
ColorfulIconSlider(
106+
value = progress,
107+
onValueChange = { value, offset ->
108+
progress = value
109+
},
110+
trackHeight = 10.dp
111+
) {
112+
Box(
113+
modifier = Modifier
114+
.size(40.dp)
115+
.border(4.dp, Red400, CircleShape)
116+
)
117+
}
118+
119+
ColorfulIconSlider(
120+
value = progress,
121+
onValueChange = { value, offset ->
122+
progress = value
123+
},
124+
trackHeight = 10.dp,
125+
colors = MaterialSliderDefaults.materialColors()
126+
) {
127+
Box(
128+
modifier = Modifier
129+
.size(40.dp)
130+
.shadow(1.dp, RoundedCornerShape(10.dp))
131+
.background(Pink400, RoundedCornerShape(10.dp))
132+
)
133+
}
134+
135+
ColorfulIconSlider(
136+
value = progress,
137+
onValueChange = { value, offset ->
138+
progress = value
139+
},
140+
trackHeight = 10.dp,
141+
colors = MaterialSliderDefaults.materialColors(
142+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
143+
activeTrackColor = SliderBrushColor(
144+
brush = sunriseGradient(),
145+
)
146+
),
147+
borderStroke = BorderStroke(2.dp, sunriseGradient())
148+
) {
149+
Box(
150+
modifier = Modifier
151+
.size(40.dp)
152+
.shadow(2.dp, CutCornerShape(5.dp))
153+
.background(Purple400, CutCornerShape(5.dp))
154+
)
155+
}
156+
157+
TitleText("Icon Thumb")
158+
ColorfulIconSlider(
159+
value = progress,
160+
onValueChange = { value, offset ->
161+
progress = value
162+
},
163+
trackHeight = 10.dp,
164+
colors = MaterialSliderDefaults.materialColors(
165+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
166+
activeTrackColor = SliderBrushColor(
167+
brush = sunsetGradient(),
168+
)
169+
),
170+
borderStroke = BorderStroke(2.dp, sunsetGradient())
171+
) {
172+
Icon(
173+
imageVector = Icons.Filled.ThumbUp,
174+
contentDescription = null,
175+
modifier = Modifier.size(40.dp),
176+
tint = Red400
177+
)
178+
}
179+
180+
TitleText("Image Thumb")
181+
ColorfulIconSlider(
182+
value = progress,
183+
onValueChange = { value, offset ->
184+
progress = value
185+
},
186+
trackHeight = 10.dp,
187+
colors = MaterialSliderDefaults.materialColors(
188+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
189+
activeTrackColor = SliderBrushColor(
190+
brush = instaGradient(),
191+
)
192+
),
193+
borderStroke = BorderStroke(2.dp, instaGradient())
194+
) {
195+
Image(
196+
painter = painterResource(id = R.drawable.stf),
197+
contentDescription = null,
198+
modifier = Modifier.size(40.dp)
199+
)
200+
}
201+
}
202+
}
203+

‎app/src/main/java/com/smarttoolfactory/composematerialslider/demo/ColorfulSliderDemo.kt‎

Lines changed: 19 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
package com.smarttoolfactory.composematerialslider.demo
22

3-
import androidx.compose.foundation.BorderStroke
43
import androidx.compose.foundation.layout.Column
54
import androidx.compose.foundation.layout.fillMaxSize
65
import androidx.compose.foundation.layout.padding
@@ -9,14 +8,12 @@ import androidx.compose.foundation.verticalScroll
98
import androidx.compose.material.Text
109
import androidx.compose.runtime.*
1110
import androidx.compose.ui.Modifier
12-
import androidx.compose.ui.graphics.Color
1311
import androidx.compose.ui.text.font.FontWeight
1412
import androidx.compose.ui.unit.dp
1513
import androidx.compose.ui.unit.sp
16-
import com.smarttoolfactory.composematerialslider.ui.theme.*
14+
import com.smarttoolfactory.composematerialslider.ui.theme.Blue400
1715
import com.smarttoolfactory.slider.ColorfulSlider
1816
import com.smarttoolfactory.slider.MaterialSliderDefaults
19-
import com.smarttoolfactory.slider.SliderBrushColor
2017

2118
@Composable
2219
fun ColorfulSliderDemo() {
@@ -71,6 +68,16 @@ fun ColorfulSliderDemo() {
7168
colors = MaterialSliderDefaults.defaultColors()
7269
)
7370

71+
ColorfulSlider(
72+
value = progress1,
73+
thumbRadius = 8.dp,
74+
trackHeight = 30.dp,
75+
onValueChange = { value ->
76+
progress1 = value
77+
},
78+
colors = MaterialSliderDefaults.defaultColors()
79+
)
80+
7481
ColorfulSlider(
7582
value = progress1,
7683
onValueChange = { value ->
@@ -109,62 +116,15 @@ fun ColorfulSliderDemo() {
109116
colors = MaterialSliderDefaults.materialColors()
110117
)
111118

112-
113-
TitleText("Slider Colors")
114-
var progress3 by remember { mutableStateOf(0f) }
115-
116-
ColorfulSlider(
117-
value = progress3,
118-
onValueChange = { it ->
119-
progress3 = it
120-
},
121-
colors = MaterialSliderDefaults.materialColors(
122-
activeTrackColor = SliderBrushColor(color = Red400),
123-
thumbColor = SliderBrushColor(color = Red400),
124-
inactiveTrackColor = SliderBrushColor(color = Grey400)
125-
)
126-
)
127-
128119
ColorfulSlider(
129-
value = progress3,
130-
onValueChange = { it ->
131-
progress3 = it
132-
},
133-
colors = MaterialSliderDefaults.materialColors(
134-
activeTrackColor = SliderBrushColor(color = Red400),
135-
inactiveTrackColor = SliderBrushColor(color = Green400),
136-
thumbColor = SliderBrushColor(color = Orange400),
137-
)
138-
)
139-
140-
ColorfulSlider(
141-
enabled = false,
142-
value = progress3,
143-
onValueChange = { it ->
144-
progress3 = it
120+
value = progress1,
121+
thumbRadius = 8.dp,
122+
trackHeight = 30.dp,
123+
onValueChange = { value ->
124+
progress1 = value
145125
},
146-
147-
colors = MaterialSliderDefaults.materialColors(
148-
activeTrackColor = SliderBrushColor(color = Red400),
149-
thumbColor = SliderBrushColor(color = Red400),
150-
inactiveTrackColor = SliderBrushColor(color = Grey400)
151-
)
126+
colors = MaterialSliderDefaults.materialColors()
152127
)
153-
154-
155-
// ColorfulIconSlider(
156-
// modifier = Modifier.width(240.dp),
157-
// value = red,
158-
// onValueChange = { value, offset ->
159-
// red = value
160-
// },
161-
// trackHeight = 12.dp
162-
// ) {
163-
// Box(contentAlignment = Alignment.Center, modifier = Modifier.padding(2.dp)) {
164-
// Text(text = "😱", fontSize = 40.sp)
165-
// }
166-
// }
167-
168128
}
169129
}
170130

@@ -173,8 +133,8 @@ fun TitleText(text: String) {
173133
Text(
174134
text = text,
175135
color = Blue400,
176-
fontSize = 14.sp,
136+
fontSize = 16.sp,
177137
fontWeight = FontWeight.Bold,
178-
modifier = Modifier.padding(horizontal=4.dp, vertical = 8.dp)
138+
modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp)
179139
)
180140
}

0 commit comments

Comments
 (0)