SUBSCRIBE NOW![avatar]()
SUBSCRIBE NOW![avatar]()
SUBSCRIBE NOW![avatar]()
SUBSCRIBE NOW![avatar]()
SUBSCRIBE NOW![avatar]()
SUBSCRIBE NOW![avatar]()
SUBSCRIBE NOW![avatar]()
JetpackCompose.app's Newsletter![avatar]()
JetpackCompose.app's Newsletter![avatar]()
JetpackCompose.app's Newsletter![avatar]()
JetpackCompose.app's Newsletter![avatar]()
JetpackCompose.app's Newsletter![avatar]()
JetpackCompose.app's Newsletter![avatar]()
JetpackCompose.app's Newsletter![avatar]()
Rating Bar
Author: Angelo Rüggeber
A simple star rating bar component implemented using Compose. I made some modifications to suit my need before I tested it on my device.
| import androidx.compose.foundation.layout.Row | |
| import androidx.compose.material.Icon | |
| import androidx.compose.material.icons.Icons | |
| import androidx.compose.material.icons.outlined.Star | |
| import androidx.compose.material.icons.outlined.StarHalf | |
| import androidx.compose.material.icons.outlined.StarOutline | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.graphics.Color | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import kotlin.math.ceil | |
| import kotlin.math.floor | |
| @Composable | |
| fun RatingBar( | |
| modifier: Modifier = Modifier, | |
| rating: Double = 0.0, | |
| stars: Int = 5, | |
| starsColor: Color = Color.Yellow, | |
| ) { | |
| val filledStars = floor(rating).toInt() | |
| val unfilledStars = (stars - ceil(rating)).toInt() | |
| val halfStar = !(rating.rem(1).equals(0.0)) | |
| Row(modifier = modifier) { | |
| repeat(filledStars) { | |
| Icon(imageVector = Icons.Outlined.Star, contentDescription = null, tint = starsColor) | |
| } | |
| if (halfStar) { | |
| Icon( | |
| imageVector = Icons.Outlined.StarHalf, | |
| contentDescription = null, | |
| tint = starsColor | |
| ) | |
| } | |
| repeat(unfilledStars) { | |
| Icon( | |
| imageVector = Icons.Outlined.StarOutline, | |
| contentDescription = null, | |
| tint = starsColor | |
| ) | |
| } | |
| } | |
| } | |
| @Preview | |
| @Composable | |
| fun RatingPreview() { | |
| RatingBar(rating = 2.5) | |
| } | |
| @Preview | |
| @Composable | |
| fun TenStarsRatingPreview() { | |
| RatingBar(stars = 10, rating = 8.5) | |
| } | |
| @Preview | |
| @Composable | |
| fun RatingPreviewFull() { | |
| RatingBar(rating = 5.0) | |
| } | |
| @Preview | |
| @Composable | |
| fun RatingPreviewWorst() { | |
| RatingBar(rating = 1.0) | |
| } | |
| @Preview | |
| @Composable | |
| fun RatingPreviewDisabled() { | |
| RatingBar(rating = 0.0, starsColor = Color.Gray) | |
| } |
Have a project you'd like to submit? Fill this form, will ya!
If you like this snippet, you might also like:
Maker OS is an all-in-one productivity system for developers
I built Maker OS to track, manage & organize my life. Now you can do it too!
The #1 destination for all things Jetpack Compose 🤖📱