title: RatingBar is getting semi-transparent
body: <p>I'm using <code>RecyclerView</code> with <code>RatingBar</code> in each row. Now, sometimes part of <code>RatingBar</code>s 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 <code>RatingBar</code> so it should have default appearance. </p>
  
  <p>This is how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/XABJf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XABJf.png" alt="enter image description here"></a></p>
  
  <p>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. </p>
  
  <p>I've also added </p>
  
  <pre><code>holder.rbRating.requestLayout();
  </code></pre>
  
  <p>in <code>onBindViewHolder()</code>. 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.</p>
  
  <p>Here's row layout:</p>
  
  <pre><code>&lt;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" &gt;
  
      &lt;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" /&gt;
  
      &lt;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" /&gt;
  
      &lt;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" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>I've also tried switching to <code>android.support.v7.widget.AppCompatRatingBar</code>, but it doesn't make any difference.</p>
  
  <p>EDIT:</p>
  
  <p>@Muhib Pirani solution seems to be working, but I have 2 small issues: </p>
  
  <p>1) on Nexus 6P the first layer of star is offsetted by few pixels (zoom in to see):</p>
  
  <p><a href="https://i.stack.imgur.com/uAQQn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uAQQn.png" alt="enter image description here"></a></p>
  
  <p>2) On Samsung Galaxy J3 (2016) it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/90AGW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/90AGW.png" alt="enter image description here"></a></p>
  
  <p>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.</p>