I'm using RecyclerView with RatingBar in each row. Now, sometimes part of RatingBars are drawn incorrectly. After leaving a screen and going back it's all back to normal. I have no idea why this is happening, I even removed any styles from RatingBar so it should have default appearance. 
This is how it looks:

Tested on Nexus 6P (Android 7.1.1). Also tested on Samsung Galaxy J3 (2016) (Android 5.1.1) and there's no problem here.
I've also added
holder.rbRating.requestLayout();
in onBindViewHolder(). It reduces the problem a bit, but it's still present. When I scroll a "bad" row out of a screen when it's reused it looks fine.
Here's row layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingTop="@dimen/main_margin_top"
    android:paddingBottom="@dimen/main_margin_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <TextView
        android:id="@+id/tvRatingTitle"
        android:text="Czystość wody"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <RatingBar
        android:id="@+id/rbRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:isIndicator="true"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/tvRatingTitle"
        android:numStars="5"
        android:rating="2.5"
        android:stepSize="0.1" />
    <CheckBox
        android:id="@+id/chkMissing"
        android:text="Zaznacz jeśli nie ma"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/rbRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
I've also tried switching to android.support.v7.widget.AppCompatRatingBar, but it doesn't make any difference.
EDIT:
@Muhib Pirani solution seems to be working, but I have 2 small issues:
1) on Nexus 6P the first layer of star is offsetted by few pixels (zoom in to see):

2) On Samsung Galaxy J3 (2016) it looks like this:

I'm fine with borders, but I'd like them to be green (not gray, the background should be gray) in the empty stars as well.
I also faced the same problem. I had to programmatically set colors to RatingBar like this and it worked:
LayerDrawable layerDrawable = (LayerDrawable) ratingBar.getProgressDrawable();
layerDrawable.getDrawable(2).setColorFilter(ContextCompat.getColor(context, R.color.colorPrimaryDark), PorterDuff.Mode.SRC_ATOP);
layerDrawable.getDrawable(1).setColorFilter(ContextCompat.getColor(context, R.color.colorPrimaryDark), PorterDuff.Mode.SRC_ATOP);
layerDrawable.getDrawable(0).setColorFilter(ContextCompat.getColor(context, R.color.editTextBor), PorterDuff.Mode.SRC_ATOP);//when not selected color.
Keep layerDrawable.getDrawable(2) and layerDrawable.getDrawable(1) same color.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With