Custom Rating Bar in Android

Hello World, Today we are going to see how to customize rating bar in android for example:

how to make small rating bar or how to change the color of rating bar or how to completely change rating bar appearance and set rating change listener etc.

How to change rating bar size or make rating bar small

Making a small rating bar is simple but before making a small rating bar, let’s look at how the default rating bar looks if we add it in our layout?

The default rating bar is big and looks ugly, to make it look small and make stars color golden or yellow we use below code:

<RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="3"
        style="?android:attr/ratingBarStyleIndicator"
        android:progressTint="#FFCC01"
        android:id="@+id/smallRating"
        />

Now, this looks perfect, right? But wait what if I tell you that you can use any image instead of stars in the rating bar? excited! Stay with this article and you will catch it later.

Now let’s see how we can add a listener to the rating bar do that whenever a user give rating we can at accordingly.

Set Listener for Rating bar

To add a rating change listener we need to add the below code in our activity java file.

....

  RatingBar ratingBar = findViewById(R.id.normalRating);

        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                Toast.makeText(MainActivity.this, String.valueOf(rating), Toast.LENGTH_SHORT).show();
            }
        });
  
....

in the first line, we are getting our rating bar widget by using the findViewById method then we are setting the setOnRatingBarChangeListener and passing interface in the parameter and implement onRatingChanged method and in the parameters, we are getting our rating in float value as the second parameter.

After getting the rating value by the user we are displaying it in the toast. Of course, you can use this rating according to your need.

See also: CardView in Android

Custom Rating Bar in Android

By default rating bar shows stars as a rating but there are some cases we need to add our own graphics. Let’s say you want a rating bar instead of stars we need hearts. something like below:

To make a custom rating bar like above. We need to perform certain steps as follows:

Step 1. Copy your images in the drawable folder and remember image size should be according to the size you want.

Step 2. Make XML for the rating bar selector in the drawable folder like below.

We made two files, one for the fill or highlighted part and one for the empty or un-highlighted part.

See the below files and their respective code.

rating_fill.xml for fill part

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
        android:state_window_focused="true"
        android:drawable="@drawable/ic_heart_fill"/>

    <item android:state_focused="true"
        android:state_window_focused="true"
        android:drawable="@drawable/ic_heart_fill"/>

    <item android:state_selected="true"
        android:state_window_focused="true"
        android:drawable="@drawable/ic_heart_fill"/>

    <item
        android:drawable="@drawable/ic_heart_fill"/>
</selector>

rating_empty.xml for the empty part.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
        android:state_window_focused="true"
        android:drawable="@drawable/ic_heart_empty"/>

    <item android:state_focused="true"
        android:state_window_focused="true"
        android:drawable="@drawable/ic_heart_empty"/>

    <item android:state_selected="true"
        android:state_window_focused="true"
        android:drawable="@drawable/ic_heart_empty"/>

    <item
        android:drawable="@drawable/ic_heart_empty"/>
</selector>

Step 3. Now, we have created our selector files, now we need to integrate them together.

To do that we need to make a new xml file in drawable and write the below code.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background"
        android:drawable="@drawable/rating_empty"/>

    <item android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/rating_empty"
        />
    <item android:id="@android:id/progress"
        android:drawable="@drawable/rating_fill"
        />

</layer-list>

In the above code, we are making a layer list and giving the reference all the above filling and empty selectors.

Congrats we have completed 90% of work,

You can read full article here: Custom Rating Bar in Android

Thanks for reading this article have a good day.

Previously published at https://www.akshayrana.in/2020/06/how-to-customize-rating-bar-in-android.html