Android - Custom rating bar looks like its bleeding Android - Custom rating bar looks like its bleeding android android

Android - Custom rating bar looks like its bleeding


i had a similar case and the accepted answer will not resolve it on all screen sizesin 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


I had facing same problem.

In my case blank_star.png height is 17dp so i put android:layout_height="17dp" on RatingBar and my problem is resolve.Try below code:-

<RatingBar    android:id="@+id/rating"    style="@style/rating_bar"    android:layout_width="wrap_content"    android:layout_height="17dp"    android:layout_marginRight="5dp"    android:isIndicator="true"    android:numStars="5"    android:stepSize="1.0" />

style/rating_bar.xml

<style name="rating_bar" parent="@android:style/Widget.RatingBar">    <item name="android:progressDrawable">@drawable/rating_bar_full</item>    <item name="android:minHeight">18dip</item>    <item name="android:maxHeight">18dip</item></style>

drawable/rating_bar_full

<?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/ratingbar_full_empty"/>    <item        android:id="@+android:id/secondaryProgress"        android:drawable="@drawable/ratingbar_full_empty"/>    <item        android:id="@+android:id/progress"        android:drawable="@drawable/ratingbar_full_filled"/></layer-list>

drawable/ratingbar_full_empty

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/blank_star" android:state_pressed="true" android:state_window_focused="true"/>    <item android:drawable="@drawable/blank_star" android:state_focused="true" android:state_window_focused="true"/>    <item android:drawable="@drawable/blank_star" android:state_selected="true" android:state_window_focused="true"/>    <item android:drawable="@drawable/blank_star"/></selector>

drawable/ratingbar_full_filled.xml

<item android:drawable="@drawable/filled_star" android:state_pressed="true" android:state_window_focused="true"/><item android:drawable="@drawable/filled_star" android:state_focused="true" android:state_window_focused="true"/><item android:drawable="@drawable/filled_star" android:state_selected="true" android:state_window_focused="true"/><item android:drawable="@drawable/filled_star"/>


For all who are still looking for an answer and don't want to crop the image: android:minHeight="0dp" helped me

Update.Why is it working? Well, most of all view components have a default min size to follow accessibility/usability google guidelines. And as was mentioned, seems like RatingBar tries to fill the empty space (diff between your own resource and minHeight) by repeating the last 1-2 pixels (personally I don't understand the reason of such desicion). So by setting the android:minHeight="0dp", RatingBar will wrap content by the height of your resource.