Android: Ratingbar not visible, becomes visible only on touching

Question

In my Android app, ratingbars are not visible. It only becomes visible only on touching it and disappears as soon as I take my fingers off.

My code:

<RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/myratingStars"
            android:layout_gravity="center_horizontal|center_vertical|center"
            android:numStars="5"/>

It does not render in Lollipop emulator/real phone/Android Studio design window(in API 23 mode) but gets rendered in KitKat emulator and Android design window(in API 15 mode).

Complete layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="24dp"
        android:orientation="vertical">
        <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/myratingStars"
            android:layout_gravity="center_horizontal|center_vertical|center"
            android:numStars="5"/>
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.AppCompatEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:maxLines="10"
                android:id="@+id/myratingTxt"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="2dp"
                android:hint="@string/write_review"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.v7.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/submitReview"
            android:text="@string/review_submit"
          android:layout_gravity="center_horizontal|center|center_vertical"
            android:textColor="@color/white"
            android:onClick="submitReview"
            android:layout_marginTop="8dp"
            tools:visibility="visible"/>
    </LinearLayout>

</LinearLayout>

Answer 1

After a bit of research tried my luck and it worked!!! Finally found a solution!

Adding these attributes to saved my life!!!

android:progressBackgroundTint="@color/colorAccent"
android:progressTint="@color/colorAccent"
android:secondaryProgressTint="@color/colorAccent"

Example:

<android.support.v7.widget.AppCompatRatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:progressBackgroundTint="@color/colorAccent"
        android:progressTint="@color/colorAccent"
        android:secondaryProgressTint="@color/colorAccent"
        android:rating="4" />

You can change these colors according to your needs!!

Extra info:

android:progressTint used for actual progress color

android:secondaryProgressTint used for secondary progress that is when a partial rating selected say half the other half colored using this attribute.

android:progressBackgroundTint used for rest of the rating say 3 out of 5 so last 2 colored this one!

Happy coding!! Eat drink Android! ;)