Compose RatingBar Repository

This repository contains a custom RatingBar component built for Jetpack Compose, a modern UI toolkit for Android app development. The RatingBar component provides a user-friendly way to rate items or content by allowing users to select a specific number of stars. It offers customization options such as star color, size, and maximum rating value.


Customizable Images: With this rating bar, you have the freedom to customize the rating icons using various image sources such as shapes, image vectors, drawables, and even async images loaded from a URL.

Shape Customization: You can use different shapes to represent the rating icons, allowing you to create unique and visually appealing rating bars.

Image Vector Support: The rating bar supports image vectors, which are scalable and resolution-independent. This enables you to use vector-based icons as rating symbols for a crisp and sharp visual presentation.

Drawable Integration: You can utilize drawables as rating icons, offering a wide range of possibilities for icon designs and styles. Drawables can be easily customized and applied to the rating bar.

AsyncImage (URL) Compatibility: The rating bar also supports loading rating icons asynchronously from a URL using the AsyncImage component. This allows you to dynamically fetch and display rating icons from remote sources.

Getting Started

To get started with the Compose Shapes Repository, simply clone the repository and import the desired shape utilities or custom shapes into your Compose project. You can then use these shapes in your Compose UI code by applying them to the appropriate components using the provided extensions.

allprojects {
	repositories {
		maven { url '' }

Step 2. Add the dependency:

dependencies {
	implementation "com.github.xavijimenezmulet:ratingbar-jetpackcompose:$latest_version"

Simple usage:

@Preview(name = "WithLine")
fun DrawableRatingBarSample() {
    val data: List<Data> = listOf(
        DrawableData(R.drawable.ic_cat_terrible, "Terrible"),
        DrawableData(R.drawable.ic_cat_bad, "Bad"),
        DrawableData(R.drawable.ic_cat_okay, "Okay"),
        DrawableData(R.drawable.ic_cat_good, "Good"),
        DrawableData(R.drawable.ic_cat_awesome, "Awesome"),

    val (rating, setRating) = remember {
        mutableStateOf(data.size / 2)
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Drawable RatingBar")
            data = data,
            rating = rating,
            setRating = setRating,

Any help and improve the code will be welcome.


View Github