androidandroid-layoutratingbar

Android - Custom rating bar looks like its bleeding


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

Rating bar

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?


Solution

  • 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"/>