Android RatingBar below Lollipop renders incorrectly

Question

I'm using my custom rating bar. The top image with 5 stars is on Lollipop where my ratingbar works fine. However, below Lollipop (Kitat, JellyBean, ICS) versions the rating bar is goofed up (check second image with a single star) What can be the problem? I tried all possible methods, changing theme, managing height width...nothing seems to work :(

This is the style

<style name="customRatingBar" parent="@android:style/Widget.RatingBar">

    <item name="android:progressDrawable">@drawable/rating_custom_bar</item>

</style>

This is the rating bar 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/star_blank"/>
    <item
        android:id="@+android:id/secondaryProgress"
        android:drawable="@drawable/star_blank"/>
    <item
        android:id="@+android:id/progress"
        android:drawable="@drawable/star_filled"/>
</layer-list>

This is star blank

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

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

</selector>

This is star filled

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/rating_full" android:state_pressed="true" android:state_window_focused="true"/>

    <item android:drawable="@drawable/rating_full" android:state_focused="true" android:state_window_focused="true"/>

    <item android:drawable="@drawable/rating_full" android:state_selected="true" android:state_window_focused="true"/>

    <item android:drawable="@drawable/rating_full"/>

</selector>

Answer 1

I have the same problem and spend a lot of time in it, tried setting all parameters at the ratingBar but none work, but there was something weird. I was working with a friend in a project and he compiles the exact same code as I and doesn't have this issue, so I change the IDE to his and all starts working.

I was using "Android Developer Tools", the eclipse you used to download at https://developer.android.com/training/index.html which is an eclipse with the ADT already embedded. I change to Java EE and download ADT following this instructions http://developer.android.com/sdk/installing/installing-adt.html

I hope this helps you with your problem.

Answer 2

Has been a while but never hurts to answer. Here is my 3 step solution regardless of SDK version.

1- Add this as your RatingBar in your xml layout:

<RatingBar
android:id="@+id/new_ratingbar"
android:progressDrawable="@drawable/custom_drawable" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="0.5"/>

If needed, you can give the RatingBar minHeight and maxHeight or add other attributes as required.

2- Here is the drawable you would refer the above progressDrawable to:

custom_drawable.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_bar_empty" /> <!--this is your .png file-->
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/rating_bar_fill" /> <!--this is your .png file-->
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/rating_bar_fill" /> <!--this is your .png file-->
</layer-list>

3- The last thing is to provide the .png files in your various drawable folders.