Android Rating bar progress color

Today we will teach you, how to customize Rating bar in android, like change the color of progress of rating bar or change an image for something other than the default stars.

First, change progress color of rating bar. Its done by two ways, either by applying theme on RatingBar or by manually using LayerDrawable.

By applying theme:

In activity_main.xml:

<RatingBar
android:id="@+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/RatingBar"
android:numStars="5"
android:layout_margin="16dp"
android:rating="0"
android:stepSize="0.5" />

styles.xml

<style name="RatingBar" parent="Theme.AppCompat">
<item name="colorControlNormal">@color/colorAccent</item>
<item name="colorControlActivated">@color/colorPrimary</item>
</style>

That’s it.

By manually, using LayerDrawable:

<RatingBar
android:id="@+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:layout_margin="16dp"
android:rating="0"
android:stepSize="0.5" />
LayerDrawable stars = (LayerDrawable) rating.getProgressDrawable();
stars.getDrawable(2).setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_ATOP);

That’s it.

Now let’s change image of star to another image.
First you have to put 2 images, empty and full.

glass_empty.png
glass_full.png

rating_bar_progress.xml

In activity_main.xml:

<RatingBar
style="@style/GlassRating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:numStars="5"
android:rating="0"
android:stepSize="1" />

styles.xml

<style name="GlassRating" parent="@android:style/Widget.RatingBar">
<item name="android:minHeight">32dip</item>
<item name="android:minWidth">36dip</item>
<item name="android:progressDrawable">@drawable/rating_bar_bg</item>
</style>

rating_bar_bg.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/glass_empty" />
<item
android:id="@android:id/secondaryProgress"
android:drawable="@drawable/glass_full" />
<item
android:id="@android:id/progress"
android:drawable="@drawable/glass_full" />
</layer-list>

If you want to that half filled glass as half star, add an image as glass_half.png , android:stepSize=“0.5” and change rating_bar_bg.xml as below:

<?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/glass_empty" />
<item
android:id="@android:id/secondaryProgress"
android:drawable="@drawable/glass_half" />
<item
android:id="@android:id/progress"
android:drawable="@drawable/glass_full" />
</layer-list>

That’s it. Enjoy coding :)