Skip to content

Commit 699b3eb

Browse files
SmartToolFactorySmartToolFactory
authored
Update README.md
Update docs and video
1 parent 4b50164 commit 699b3eb

File tree

1 file changed

+152
-127
lines changed

1 file changed

+152
-127
lines changed

‎README.md‎

Lines changed: 152 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
# Compose-RatingBar
2-
🚀⭐️📊 Rating bar to set fixed value or change rating by gestures with custom png files, ImageVectors
2+
Rating bar to set fixed value or change rating by gestures with custom png files, ImageVectors with
3+
customization and shimmer effects.
34

4-
5-
6-
7-
https://user-images.githubusercontent.com/35650605/194719853-f000097b-de82-4d0a-a552-86fc77b16420.mp4
5+
https://user-images.githubusercontent.com/35650605/194745347-e91d2427-5d51-414c-9604-d0bd9b39f5f0.mp4
86

97
## Declrations
108

@@ -13,12 +11,13 @@ https://user-images.githubusercontent.com/35650605/194719853-f000097b-de82-4d0a-
1311
fun RatingBar(
1412
modifier: Modifier = Modifier,
1513
rating: Float,
16-
imageVectorBackground: ImageVector,
17-
imageVectorForeground: ImageVector,
18-
tint: Color = Color.Red,
14+
imageBackground: ImageBitmap,
15+
imageForeground: ImageBitmap,
16+
tint: Color? = null,
1917
itemSize: Dp = Dp.Unspecified,
2018
animationEnabled: Boolean = true,
2119
gestureEnabled: Boolean = true,
20+
shimmer: Shimmer? = null,
2221
itemCount: Int = 5,
2322
space: Dp = 0.dp,
2423
onRatingChange: ((Float) -> Unit)? = null
@@ -36,6 +35,7 @@ fun RatingBar(
3635
itemSize: Dp = Dp.Unspecified,
3736
animationEnabled: Boolean = true,
3837
gestureEnabled: Boolean = true,
38+
shimmer: Shimmer? = null,
3939
itemCount: Int = 5,
4040
space: Dp = 0.dp,
4141
onRatingChange: ((Float) -> Unit)? = null
@@ -47,11 +47,13 @@ fun RatingBar(
4747
fun RatingBar(
4848
modifier: Modifier = Modifier,
4949
rating: Float,
50-
imageBackground: ImageBitmap,
51-
imageForeground: ImageBitmap,
50+
imageVectorBackground: ImageVector,
51+
imageVectorForeground: ImageVector,
52+
tint: Color = DefaultColor,
5253
itemSize: Dp = Dp.Unspecified,
5354
animationEnabled: Boolean = true,
5455
gestureEnabled: Boolean = true,
56+
shimmer: Shimmer? = null,
5557
itemCount: Int = 5,
5658
space: Dp = 0.dp,
5759
onRatingChange: ((Float) -> Unit)? = null
@@ -61,122 +63,145 @@ fun RatingBar(
6163
## Usage
6264

6365
```kotlin
64-
var rating by remember { mutableStateOf(3.7f) }
65-
var rating2 by remember { mutableStateOf(3.7f) }
66-
var rating3 by remember { mutableStateOf(2.3f) }
67-
var rating4 by remember { mutableStateOf(4.5f) }
68-
var rating5 by remember { mutableStateOf(1.7f) }
69-
var rating6 by remember { mutableStateOf(5f) }
70-
71-
val imageBackground = ImageBitmap.imageResource(id = R.drawable.star_background)
72-
val imageForeground = ImageBitmap.imageResource(id = R.drawable.star_foreground)
73-
74-
Column(modifier = Modifier.fillMaxSize()) {
75-
RatingBar(
76-
rating = rating,
77-
space = 2.dp,
78-
imageBackground = imageBackground,
79-
imageForeground = imageForeground,
80-
animationEnabled = false,
81-
gestureEnabled = true,
82-
itemSize = 60.dp
83-
) {
84-
rating = it
85-
}
86-
87-
Text(
88-
"Rating: $rating",
89-
fontSize = 16.sp,
90-
color = MaterialTheme.colorScheme.primary
91-
)
92-
93-
RatingBar(
94-
rating = rating2,
95-
painterBackground = painterResource(id = R.drawable.star_background),
96-
painterForeground = painterResource(id = R.drawable.star_foreground),
97-
tint = Color(0xff9C27B0),
98-
animationEnabled = false,
99-
gestureEnabled = false,
100-
itemSize = 60.dp
101-
) {
102-
rating2 = it
103-
}
104-
105-
Slider(
106-
value = rating2,
107-
onValueChange = { rating2 = it },
108-
valueRange = 0f..5f
109-
)
110-
111-
Text(
112-
"Rating: $rating2",
113-
fontSize = 16.sp,
114-
color = MaterialTheme.colorScheme.primary
115-
)
116-
117-
RatingBar(
118-
rating = rating3,
119-
painterBackground = painterResource(id = R.drawable.star_background),
120-
painterForeground = painterResource(id = R.drawable.star_foreground),
121-
tint = Color(0xff795548),
122-
animationEnabled = true,
123-
itemSize = 60.dp
124-
) {
125-
rating3 = it
126-
}
127-
128-
Text(
129-
"Rating: $rating",
130-
fontSize = 18.sp,
131-
color = MaterialTheme.colorScheme.primary
132-
)
133-
134-
RatingBar(
135-
rating = rating4,
136-
space = 2.dp,
137-
imageVectorBackground = Icons.Default.FavoriteBorder,
138-
imageVectorForeground = Icons.Default.Favorite,
139-
tint = Color(0xffE91E63),
140-
itemSize = 60.dp
141-
) {
142-
rating4 = it
143-
}
144-
145-
RatingBar(
146-
rating = rating5,
147-
space = 2.dp,
148-
imageVectorBackground = ImageVector.vectorResource(id = R.drawable.outline_wb_cloudy_24),
149-
imageVectorForeground = ImageVector.vectorResource(id = R.drawable.baseline_wb_cloudy_24),
150-
tint = Color(0xff2196F3),
151-
itemSize = 60.dp
152-
) {
153-
rating5 = it
154-
}
155-
156-
RatingBar(
157-
rating = rating6,
158-
imageVectorBackground = ImageVector.vectorResource(id = R.drawable.twotone_person_24),
159-
imageVectorForeground = ImageVector.vectorResource(id = R.drawable.baseline_person_24),
160-
tint = Color(0xff795548),
161-
itemSize = 40.dp
162-
) {
163-
rating6 = it
66+
@Composable
67+
private fun RatingbarDemo() {
68+
Column(modifier = Modifier.fillMaxSize()) {
69+
var rating by remember { mutableStateOf(3.7f) }
70+
var rating2 by remember { mutableStateOf(3.7f) }
71+
var rating3 by remember { mutableStateOf(2.3f) }
72+
var rating4 by remember { mutableStateOf(4.5f) }
73+
var rating5 by remember { mutableStateOf(1.7f) }
74+
var rating6 by remember { mutableStateOf(5f) }
75+
76+
val imageBackground = ImageBitmap.imageResource(id = R.drawable.star_background)
77+
val imageForeground = ImageBitmap.imageResource(id = R.drawable.star_foreground)
78+
79+
Column(modifier = Modifier.fillMaxSize()) {
80+
RatingBar(
81+
rating = rating,
82+
space = 2.dp,
83+
imageBackground = imageBackground,
84+
imageForeground = imageForeground,
85+
animationEnabled = false,
86+
gestureEnabled = true,
87+
itemSize = 60.dp
88+
) {
89+
rating = it
90+
}
91+
92+
Text(
93+
"Rating: $rating",
94+
fontSize = 16.sp,
95+
color = MaterialTheme.colorScheme.primary
96+
)
97+
98+
val purple500 = Color(0xff9C27B0)
99+
100+
RatingBar(
101+
rating = rating2,
102+
painterBackground = painterResource(id = R.drawable.star_background),
103+
painterForeground = painterResource(id = R.drawable.star_foreground),
104+
animationEnabled = false,
105+
gestureEnabled = false,
106+
tint = purple500,
107+
shimmer = Shimmer(
108+
colors = listOf(
109+
purple500.copy(.9f),
110+
purple500.copy(.3f),
111+
purple500.copy(.9f)
112+
)
113+
),
114+
itemSize = 60.dp
115+
) {
116+
rating2 = it
117+
}
118+
119+
Slider(
120+
value = rating2,
121+
onValueChange = { rating2 = it },
122+
valueRange = 0f..5f
123+
)
124+
125+
Text(
126+
"Rating: $rating2",
127+
fontSize = 16.sp,
128+
color = MaterialTheme.colorScheme.primary
129+
)
130+
131+
RatingBar(
132+
rating = rating3,
133+
painterBackground = painterResource(id = R.drawable.star_background),
134+
painterForeground = painterResource(id = R.drawable.star_foreground),
135+
tint = Color(0xff795548),
136+
animationEnabled = true,
137+
itemSize = 60.dp
138+
) {
139+
rating3 = it
140+
}
141+
142+
val pink500 = Color(0xffE91E63)
143+
RatingBar(
144+
rating = rating4,
145+
space = 2.dp,
146+
imageVectorBackground = Icons.Default.FavoriteBorder,
147+
imageVectorForeground = Icons.Default.Favorite,
148+
shimmer = Shimmer(
149+
color = pink500,
150+
animationSpec = infiniteRepeatable(
151+
animation = tween(durationMillis = 1000, easing = LinearEasing),
152+
repeatMode = RepeatMode.Reverse
153+
)
154+
),
155+
tint = pink500,
156+
itemSize = 40.dp
157+
) {
158+
rating4 = it
159+
}
160+
161+
RatingBar(
162+
rating = rating5,
163+
space = 2.dp,
164+
imageVectorBackground = ImageVector.vectorResource(id = R.drawable.outline_wb_cloudy_24),
165+
imageVectorForeground = ImageVector.vectorResource(id = R.drawable.baseline_wb_cloudy_24),
166+
tint = Color(0xff2196F3),
167+
itemSize = 60.dp
168+
) {
169+
rating5 = it
170+
}
171+
172+
RatingBar(
173+
rating = rating6,
174+
imageVectorBackground = ImageVector.vectorResource(id = R.drawable.twotone_person_24),
175+
imageVectorForeground = ImageVector.vectorResource(id = R.drawable.baseline_person_24),
176+
tint = Color(0xff795548),
177+
itemSize = 40.dp
178+
) {
179+
rating6 = it
180+
}
181+
182+
RatingBar(
183+
rating = 4.5f,
184+
space = 2.dp,
185+
itemCount = 10,
186+
imageBackground = imageBackground,
187+
imageForeground = imageForeground,
188+
shimmer = Shimmer()
189+
)
190+
Spacer(modifier = Modifier.height(10.dp))
191+
192+
RatingBar(
193+
rating = 8.3f,
194+
space = 4.dp,
195+
itemCount = 10,
196+
imageBackground = imageBackground,
197+
imageForeground = imageForeground,
198+
shimmer = Shimmer(
199+
animationSpec = infiniteRepeatable(
200+
animation = tween(durationMillis = 3000, easing = LinearEasing),
201+
repeatMode = RepeatMode.Restart
202+
)
203+
)
204+
)
205+
}
164206
}
165-
166-
RatingBar(
167-
rating = 4.5f,
168-
space = 2.dp,
169-
imageBackground = imageBackground,
170-
imageForeground = imageForeground
171-
)
172-
RatingBar(
173-
rating = 1.3f,
174-
space = 4.dp,
175-
imageBackground = imageBackground,
176-
imageForeground = imageForeground
177-
)
178-
}
179207
```
180-
181-
182-

0 commit comments

Comments
 (0)