{"id":19521804,"url":"https://github.com/smarttoolfactory/compose-ratingbar","last_synced_at":"2025-04-26T09:31:59.126Z","repository":{"id":109486869,"uuid":"547882754","full_name":"SmartToolFactory/Compose-RatingBar","owner":"SmartToolFactory","description":"🚀⭐️👍 Rating bar to set fixed value or change rating using gestures with png or vector drawables and shimmer effect option","archived":false,"fork":false,"pushed_at":"2023-08-15T14:54:34.000Z","size":611,"stargazers_count":54,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T10:27:17.856Z","etag":null,"topics":["android","compose-rating-bar","jetpack-compose","jetpack-compose-ratingbar","rating-bar","rating-bar-compose","rating-stars"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmartToolFactory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-08T13:39:47.000Z","updated_at":"2025-02-26T20:16:20.000Z","dependencies_parsed_at":"2024-11-11T00:45:27.118Z","dependency_job_id":null,"html_url":"https://github.com/SmartToolFactory/Compose-RatingBar","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-RatingBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-RatingBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-RatingBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-RatingBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmartToolFactory","download_url":"https://codeload.github.com/SmartToolFactory/Compose-RatingBar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967127,"owners_count":21515541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose-rating-bar","jetpack-compose","jetpack-compose-ratingbar","rating-bar","rating-bar-compose","rating-stars"],"created_at":"2024-11-11T00:35:00.534Z","updated_at":"2025-04-26T09:31:59.116Z","avatar_url":"https://github.com/SmartToolFactory.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Compose-RatingBar\n\n[![](https://jitpack.io/v/SmartToolFactory/Compose-RatingBar.svg)](https://jitpack.io/#SmartToolFactory/Compose-RatingBar)\n\n\nRating bar to set fixed value or change rating by gestures with custom png files, ImageVectors with\ncustomization and shimmer effects.\n\n\n\nhttps://github.com/SmartToolFactory/Compose-RatingBar/assets/35650605/0612b122-07b7-401d-9598-0492c33c7b29\n\n\n\n## Gradle Setup\n\nTo get a Git project into your build:\n\n* Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end\n  of repositories:\n\n```\nallprojects {\n  repositories {\n      ...\n      maven { url 'https://jitpack.io' }\n  }\n}\n```\n\n* Step 2. Add the dependency\n\n```\ndependencies {\n    implementation 'com.github.SmartToolFactory:Compose-RatingBar:Tag'\n}\n```\n\n## Declrations\n\n```kotlin\n@Composable\nfun RatingBar(\n  modifier: Modifier = Modifier,\n  rating: Float,\n  imageEmpty: ImageBitmap,\n  imageFilled: ImageBitmap,\n  tintEmpty: Color? = null,\n  tintFilled: Color? = null,\n  itemSize: Dp = Dp.Unspecified,\n  rateChangeStrategy: RateChangeStrategy = RateChangeStrategy.AnimatedChange(),\n  gestureStrategy: GestureStrategy = GestureStrategy.DragAndPress,\n  shimmerEffect: ShimmerEffect? = null,\n  itemCount: Int = 5,\n  space: Dp = 0.dp,\n  ratingInterval: RatingInterval = RatingInterval.Unconstrained,\n  allowZeroRating: Boolean = true,\n  onRatingChangeFinished: ((Float) -\u003e Unit)? = null,\n  onRatingChange: (Float) -\u003e Unit\n)\n```\n\n```kotlin\n@Composable\nfun RatingBar(\n  modifier: Modifier = Modifier,\n  rating: Float,\n  painterEmpty: Painter,\n  painterFilled: Painter,\n  tintEmpty: Color? = null,\n  tintFilled: Color? = null,\n  itemSize: Dp = Dp.Unspecified,\n  rateChangeStrategy: RateChangeStrategy = RateChangeStrategy.AnimatedChange(),\n  gestureStrategy: GestureStrategy = GestureStrategy.DragAndPress,\n  shimmerEffect: ShimmerEffect? = null,\n  itemCount: Int = 5,\n  space: Dp = 0.dp,\n  ratingInterval: RatingInterval = RatingInterval.Unconstrained,\n  allowZeroRating: Boolean = true,\n  onRatingChangeFinished: ((Float) -\u003e Unit)? = null,\n  onRatingChange: (Float) -\u003e Unit\n)\n```\n\n```kotlin\n@Composable\nfun RatingBar(\n  modifier: Modifier = Modifier,\n  rating: Float,\n  imageVectorEmpty: ImageVector,\n  imageVectorFilled: ImageVector,\n  tintEmpty: Color? = null,\n  tintFilled: Color? = null,\n  itemSize: Dp = Dp.Unspecified,\n  rateChangeStrategy: RateChangeStrategy = RateChangeStrategy.AnimatedChange(),\n  gestureStrategy: GestureStrategy = GestureStrategy.DragAndPress,\n  shimmerEffect: ShimmerEffect? = null,\n  itemCount: Int = 5,\n  space: Dp = 0.dp,\n  ratingInterval: RatingInterval = RatingInterval.Unconstrained,\n  allowZeroRating: Boolean = true,\n  onRatingChangeFinished: ((Float) -\u003e Unit)? = null,\n  onRatingChange: (Float) -\u003e Unit\n)\n```\n\n## Shimmer Effect\nThere are two types of shimmer effect\n\n### FillShimmer\n```kotlin\n@Immutable\ndata class FillShimmer(\n    val colors: List\u003cColor\u003e = DefaultFillGradientColors,\n    val animationSpec: InfiniteRepeatableSpec\u003cFloat\u003e = infiniteRepeatable(\n        tween(\n            durationMillis = 3000,\n            easing = FastOutSlowInEasing\n        ),\n        RepeatMode.Reverse\n    ),\n    val solidBorder: Boolean = false\n)\n```\n\nis for solid foreground effect. `solidBorder` draws empty image over shimmer with\n`tintEmpty`.\n\nSecond shimmer type is for drawing gradient border with\n\n```kotlin\n@Immutable\ndata class BorderShimmer(\n    val colors: List\u003cColor\u003e,\n    val animationSpec: InfiniteRepeatableSpec\u003cFloat\u003e = infiniteRepeatable(\n        tween(\n            durationMillis = 3000,\n            easing = FastOutSlowInEasing\n        ),\n        RepeatMode.Restart\n    )\n)\n```\n\n## Usage\n\n```kotlin\n@Composable\nprivate fun RatingbarDemo() {\n  Column(modifier = Modifier.fillMaxSize()) {\n    var rating by remember { mutableStateOf(3.7f) }\n    var rating2 by remember { mutableStateOf(3.7f) }\n    var rating3 by remember { mutableStateOf(2.3f) }\n    var rating4 by remember { mutableStateOf(4.5f) }\n    var rating5 by remember { mutableStateOf(1.7f) }\n    var rating6 by remember { mutableStateOf(5f) }\n\n    val imageBackground = ImageBitmap.imageResource(id = R.drawable.star_background)\n    val imageForeground = ImageBitmap.imageResource(id = R.drawable.star_foreground)\n\n    Column(modifier = Modifier.fillMaxSize()) {\n      RatingBar(\n        rating = rating,\n        space = 2.dp,\n        imageEmpty = imageBackground,\n        imageFilled = imageForeground,\n        animationEnabled = false,\n        gestureEnabled = true,\n        itemSize = 60.dp\n      ) {\n        rating = it\n      }\n\n      Text(\n        \"Rating: $rating\",\n        fontSize = 16.sp,\n        color = MaterialTheme.colorScheme.primary\n      )\n\n      val purple500 = Color(0xff9C27B0)\n\n      RatingBar(\n        rating = rating2,\n        painterEmpty = painterResource(id = R.drawable.star_background),\n        painterFilled = painterResource(id = R.drawable.star_foreground),\n        animationEnabled = false,\n        gestureEnabled = false,\n        tintEmpty = purple500,\n        shimmer = Shimmer(\n          colors = listOf(\n            purple500.copy(.9f),\n            purple500.copy(.3f),\n            purple500.copy(.9f)\n          )\n        ),\n        itemSize = 60.dp\n      ) {\n        rating2 = it\n      }\n\n      Slider(\n        value = rating2,\n        onValueChange = { rating2 = it },\n        valueRange = 0f..5f\n      )\n\n      Text(\n        \"Rating: $rating2\",\n        fontSize = 16.sp,\n        color = MaterialTheme.colorScheme.primary\n      )\n\n      RatingBar(\n        rating = rating3,\n        painterEmpty = painterResource(id = R.drawable.star_background),\n        painterFilled = painterResource(id = R.drawable.star_foreground),\n        tintEmpty = Color(0xff795548),\n        tintFilled = Color(0xff795548),\n        animationEnabled = true,\n        itemSize = 60.dp\n      ) {\n        rating3 = it\n      }\n\n      val pink500 = Color(0xffE91E63)\n      RatingBar(\n        rating = rating4,\n        space = 2.dp,\n        imageVectorEmpty = Icons.Default.FavoriteBorder,\n        imageVectorFFilled = Icons.Default.Favorite,\n        shimmer = Shimmer(\n          color = pink500,\n          animationSpec = infiniteRepeatable(\n            animation = tween(durationMillis = 1000, easing = LinearEasing),\n            repeatMode = RepeatMode.Reverse\n          )\n        ),\n        tintEmpty = pink500,\n        itemSize = 40.dp\n      ) {\n        rating4 = it\n      }\n\n      RatingBar(\n        rating = rating5,\n        space = 2.dp,\n        imageVectorEmpty = ImageVector.vectorResource(id = R.drawable.outline_wb_cloudy_24),\n        imageVectorFFilled = ImageVector.vectorResource(id = R.drawable.baseline_wb_cloudy_24),\n        tintEmpty = Color(0xff2196F3),\n        tintFilled = Color(0xff4FC3F7),\n        itemSize = 60.dp\n      ) {\n        rating5 = it\n      }\n\n      RatingBar(\n        rating = rating6,\n        imageVectorEmpty = ImageVector.vectorResource(id = R.drawable.twotone_person_24),\n        imageVectorFFilled = ImageVector.vectorResource(id = R.drawable.baseline_person_24),\n        tintEmpty = Color(0xff795548),\n        tintFilled = Color(0xffA1887F),\n        itemSize = 40.dp\n      ) {\n        rating6 = it\n      }\n\n      RatingBar(\n        rating = 3.2f,\n        itemCount = 5,\n        imageEmpty = imageBackground,\n        imageFilled = imageForeground,\n        tintFilled = DefaultColor\n      )\n      Spacer(modifier = Modifier.height(10.dp))\n\n      RatingBar(\n        rating = 4.5f,\n        space = 2.dp,\n        itemCount = 10,\n        imageEmpty = imageBackground,\n        imageFilled = imageForeground,\n        shimmer = Shimmer()\n      )\n\n      Spacer(modifier = Modifier.height(10.dp))\n\n      RatingBar(\n        rating = 8.3f,\n        space = 4.dp,\n        itemCount = 10,\n        imageEmpty = imageBackground,\n        imageFilled = imageForeground,\n        shimmer = Shimmer(\n          animationSpec = infiniteRepeatable(\n            animation = tween(durationMillis = 3000, easing = LinearEasing),\n            repeatMode = RepeatMode.Restart\n          ),\n          drawBorder = true\n        )\n      )\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-ratingbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmarttoolfactory%2Fcompose-ratingbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-ratingbar/lists"}