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"/> |
. . .
Leave a Comment
4 comments
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?