Android changing the stars of rating bar with images you like

In this Blog, we will learn on how to change the rating bar content with your own custom images, (images can be any thing like a star with your own colour and background of your choice, or anything that you want to represent the rating with).

Please note that here we will try to change the icon of star with our own, that is one image of ours will represent a unit of rating.

Implementing this is very easy, let’s have a look on how to do it :

Create a new drawable file with layer list as parent tag. (say,my_rating_display)
Add three items in it with ids “@android:id/background” , “@android:id/secondaryProgress”, “@android:id/progress” respectively.
Create a drawable or image that you want to set as background(when rating will be zero). and add it to the item with id background.
Create a drawable or image that you want to set as filled star(when rating will be one). and add it to the item with id progress.
Create a drawable or image that you want to set as half star(when rating will be one). and add it to the item with id progress.
Now set the attribute “progressDrawable” to my_rating_display.

And it is done.

CODE :

my_rating_display.xml

<?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/background" />
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/full_rating" />
    <item android:id="@android:id/progress" android:drawable="@drawable/half_rating" />
</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

</layer-list>

And the code of Rating bar :

<RatingBar
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:progressDrawable="@drawable/my_rating_display"
  android:gravity="center"/>

<RatingBar

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:progressDrawable="@drawable/my_rating_display"

android:gravity="center"/>

anchit 25 July 2018

. . .

Discuss on Helpdesk

4 comments

Howard Jul 25, 2018 at 8:00 pm

I hope that this is a work in progress as it doesn’t seem to be complete. For instance: what is @drawable/my_rating_display”, where has it come from?

anchit (Moderator) Jul 25, 2018 at 10:25 pm
Hi,
Thanks for pointing this issue. The blog itself is complete. It was just that i missed the label of the file.
If you would have read the contents of the article, then you would have easily understood what that file is and where it came from. If still have any doubts, please feel free to revert and i will reply ASAP.

Reply

hila Aug 26, 2018 at 1:50 pm

hey, great job!
but I have a few problems with your example, I followed the steps and only 2 stars are appearing (i used android:numStars=”5″ at ratingBar) on default size (even though i tried changing the size with width and height on item attributes at my_rating_display.xml). what do you suggest to do?

anchit (Moderator) Aug 29, 2018 at 2:50 pm
What is the resolution of your each drawable that you are using?
Can you share your code so that i can have abetter insight and try to fix that ?

Reply

Android changing the stars of rating bar with images you like

Leave a Comment Cancel Reply

4 comments

Message Sent!