Custom RatingBar styles only show one dot, other weird behavior

Issue

I have the following code set up to create a custom RatingBar style on Android:

In res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:minHeight">@dimen/rating_bar_height</item>
        <item name="android:maxHeight">@dimen/rating_bar_height</item>
        <item name="android:progressDrawable">@drawable/circle_ratingbar_full</item>
    </style>
</resources>

In res/drawable/circle_ratingbar_full.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/circle_ratingbar_full_empty" />
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/circle_ratingbar_full_empty" />
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/circle_ratingbar_full_filled" />
</layer-list>

In res/drawable/circle_ratingbar_full_empty.xml:

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

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

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

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

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

</selector>

In res/drawable/circle_ratingbar_full_filled.xml:

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

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

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

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

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

</selector>

Furthermore, I have two images, res/drawable/button_enabled.png and res/drawable/button_disabled.png that I want to use to replace the stars on the RatingBar.

Android Studio seems to not have a problem with the individual drawables. However, when I use this style in a RatingBar in an xml layout, the RatingBar, which in its default style works without any problems, has a few problems:

1. Instead of a variable number of rating drawables, I see only one, regardless of the number of stars set.
2. If I don't set the minHeight and maxHeight in the style, the RatingBar will stretch to a larger height, but still only the one custom star (circle).
3. If put inside of a ListView item view, the item view itself is no longer clickable (item view is clickable with the default styles).

Is there something I'm missing in this setup? I resorted to copying the drawables straight from the default RatingBar styles in the SDK and swapping for my values (which results in the code above), and it still doesn't work.

Snippet of usage in layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/accessory_view">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/rating_min_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Min Value"
            android:paddingLeft="5dp"/>

        <TextView
            android:id="@+id/rating_max_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Max Value"
            android:paddingLeft="5dp"/>
    </LinearLayout>

    <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/rating"
        style="@style/MyRatingBar"
        android:stepSize="1.0"/>

</LinearLayout>

UPDATE

After further testing, I have found that clicking on any given part of the single dot that I see will actually change the rating to a value matching where I clicked it. So it seems the RatingBar is acting like a ProgressBar with a 0.5 step. So instead of using the drawable once for each star it should have, it seems to be using the drawable once as the background of the whole RatingBar area.

Does anyone know how to make it so that I can simply replace the star drawables and retain all the other RatingBar behavior?

Solution

I opened your test project and did some trial-and-error debugging. My conclusion is that you cannot use XML shape drawables as progressDrawables in a RatingBar. The Android platform RatingBar drawables are all .png files, which is a pretty good indicator that XML drawable are probably not supported. I tried using bitmap drawables in your test project and they worked fine.

You only solution seems to be to use bitmap drawables, unless you can figure out your own implementation of a RatingBar.

Answered By - JstnPwll