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
|
1 2 3 4 5 6 7 |
<?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> |
And the code of Rating bar :
|
1 2 3 4 5 6 |
<RatingBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:progressDrawable="@drawable/my_rating_display" android:gravity="center"/> |
. . .
4 comments
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.
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?
Can you share your code so that i can have abetter insight and try to fix that ?