Skip to main content

Customize rating bar in android

Custom Rating Bar in Android

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?

Default Rating Bar

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:

default rating bar and small rating bar

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.

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. 

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:

heart bar

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.

custom rating bar images

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

drawable folder

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

rating_empty.xml for the empty part.

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.

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,

Step 4. After creating all the files now, we need to define a new style in styles.xml under res ->values folder for our custom rating bar.

Open your styles.xml, and add below code inside the resources element.

Your styles.xml should look like this.

And this comes to the last and final step.

Step 5. Add your custom style to the rating bar. Now set style in rating bar and give reference to our custom rating bar style which we created above. See below for reference.

Now if you run your app, you will see your custom rating bar in action.

Okay here are some tips because you came this so far.

Tip 1. Always use image files that are png, don't use vector graphic else you will get only one icon.

Tip 2. Use image size 24px by 24px for better rating bar size.

Tip 3. If you want to disable rating from user input then you can disable it by using attribute android:isIndicator and set it to true.

That's all for today folks. Thank you for reading and if you learned something new then don't forget to share this article with your batch mates and friends. 

Share this Article 👇

Hey, if you are still here then don't forget to subscribe to our newsletter below if you haven't already.

Subscribe to our Newsletter

By subscribing to our newsletter you're agreeing with our T&C.

Popular Posts

Working with Bottom Navigation bar in Android [Full Guide]

Custom Switch in Android | | Android Tutorial