Android - Custom rating bar looks like its bleeding

Question

So I have created a rating bar with new icons, however, when I implement it, the stars look like they are bleeding, see attached:

Here are the style, rating xml, and how they are implemented in the layout:

style:

<style name="GoldRatingBar" parent="@android:style/Widget.RatingBar">     <item name="android:indeterminateOnly">false</item>     <item name="android:progressDrawable">@drawable/gold_ratingbar</item>     <item name="android:indeterminateDrawable">@drawable/gold_ratingbar</item>     <item name="android:thumb">@null</item>     <item name="android:isIndicator">true</item> </style> 

rating 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/rating_star_icon_off" />     <item android:id="@+android:id/secondaryProgress" android:drawable="@drawable/rating_star_icon_half" />     <item android:id="@+android:id/progress" android:drawable="@drawable/rating_star_icon" /> </layer-list> 

Layout:

<TextView      android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:gravity="center_vertical"     android:text="Overall rating"     android:textSize="16sp"     android:textStyle="bold" />  <RatingBar     android:id="@+id/review_overall_rating"     style="@style/GoldRatingBar"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_marginRight="6dp"     android:layout_marginLeft="6dp"     android:rating="3" />  <TextView     android:id="@+id/review_rating_text"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:gravity="center_vertical"     android:text=""     android:textStyle="bold" /> 

Can anyone see where I have gone wrong?

Answer 1

i had a similar case and the accepted answer will not resolve it on all screen sizes in fact the solution is very simple, you just need to add padding to the .png image that you are using "2 transparent pixels on each side "

the bleeding ocures because android is repeating the last row of your star image so just make this row transparent