How can I set the star color of the ratingbar?

Question

How can I set the star color of the ratingbar? I want yellow stars.

Try this: [Android RatingBar change star colors](http://stackoverflow.com/a/2447209/2558882). — Vikram, Aug 02 '13 at 03:16
Find the easiest way if you are using AppCompat activity http://stackoverflow.com/questions/2446270/android-ratingbar-change-star-colors/36297738#36297738 — Vishal Kumar, Mar 30 '16 at 00:52

score 22 · Answer 1 · answered Dec 26 '15 at 13:16

22

The simpliest way:

android:progressTint="@color/color"

Smooth and shiny.

answered Dec 26 '15 at 13:16

MiguelCatalan

916
10
26

1

@suku yup, but the question didn't mention any restrictions regarding of minSDK. – MiguelCatalan Feb 05 '16 at 10:35

score 12 · Answer 2 · answered Sep 04 '15 at 01:32

12

This worked for me:

    Drawable drawable = ratingBar.getProgressDrawable();
    drawable.setColorFilter(Color.parseColor("#FFFDEC00"), PorterDuff.Mode.SRC_ATOP);

answered Sep 04 '15 at 01:32

Chad Bingham

32,650
19
86
115

i like this answer in this you wont need custom stars. I just need to change the color as the question not stars. The only drawback is a single color i guess one would need to modify the other drawables as well – Jayshil Dave Sep 23 '15 at 14:21

score 12 · Answer 3 · answered Feb 14 '16 at 00:03

12

I've found that just setting the progressTint is not a complete solution. It will change the color of the star but not on partial star fills if your stepSize is less than 1. In my experience you also need to set the secondaryProgressTint in order to stop the default star tint from rearing its ugly head. Here is my code:

android:progressTint="@color/accent"
android:secondaryProgressTint="@android:color/transparent"

Hope this helps someone in my situation.

answered Feb 14 '16 at 00:03

Franklin Kesler

198
2
5

1

You have to set `android:progressBackgroundTint` as well for the empty star. – chubao Jun 06 '16 at 02:55
3

Attributes `progressTint` and `secondaryProgressTint` are only used in API level 21 and higher. – ViliusK Jul 18 '16 at 08:00
@ViliusK what will be the best way to make this work for all api versions of android – Pallavi Sep 10 '16 at 07:54

score 6 · Answer 4 · answered Aug 02 '13 at 03:16

Have you tried an xml theme, such as

<?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/star_empty_show"/>

    <item
    android:id="@android:id/secondaryProgress"
    android:drawable="@drawable/star_empty_show"/>

    <item
    android:id="@android:id/progress"
    android:drawable="@drawable/star_filled_show"/>

</layer-list>

calling it in your xml as

<RatingBar
        android:id="@id/rate"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5.0dip"
        android:isIndicator="true"
        android:max="5"
        android:numStars="5"
        android:progressDrawable="@drawable/ratebar_theme"
        android:stepSize="0.1" />

and using your own drawables?

Hi kwishnu, I've tried this solution but when I try to set the rating to something like 1.1, 1.2, etc... it's display as 1.5. I have taken 3 star images, one empty, one half full and one full. I presume it's supposed to interpolate between them to get the fractional components, I'm just wondering has anyone else had the same issue or am I doing something noticeably wrong? — Graham Baitson, Jan 10 '14 at 11:10

score 4 · Answer 5 · edited Oct 31 '15 at 13:53

You do need 3 star images (star_filled_show.png, star_half_show.png and star_empty_show.png) and one xml, that's all.

Put these 3 images into res/drawable.

Put there the following ratingbarstars.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/star_empty_show"/>

<item
android:id="@android:id/secondaryProgress"
android:drawable="@drawable/star_half_show"/>

<item
android:id="@android:id/progress"
android:drawable="@drawable/star_filled_show"/>
</layer-list>

Tell your ratingbar definition to use this drawable

<RatingBar android:progressDrawable="@drawable/ratingbarstars.xml"/>

score 2 · Answer 6 · answered Aug 23 '17 at 13:02

The rating bar is used automatically at run time for change color on touch star.

First add style in app\src\main\res\values\styles.xml file:

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

Then your rating bar add theme like this:

<RatingBar
android:id="@+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1"
android:theme="@style/RatingBar"/>

score 1 · Answer 7 · answered May 14 '15 at 03:59

It's a little complicated at the mentioned blog, I've used a similar but simplier way. You do need 3 star images (red_star_full.png, red_star_half.png and red_star_empty.png) and one xml, that's all.

Put these 3 images at res/drawable.

Put there the following ratingbar_red.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/red_star_empty" />
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/red_star_half" />
    <item android:id="@android:id/progress" android:drawable="@drawable/red_star_full" />
</layer-list>

and, finally, tell your ratingbar definition to use this, i.e.

<RatingBar android:progressDrawable="@drawable/ratingbar_red"/>

That's it.

score 1 · Answer 8 · answered Sep 01 '15 at 05:03

1

try this one

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
stars.getDrawable(2).setColorFilter(Color.YELLOW,PorterDuff.Mode.SRC_ATOP);

answered Sep 01 '15 at 05:03

Anand Savjani

2,484
3
26
39

How about when the star is half-filled? I want the star to be half yellow and half grey - or something – iOSAndroidWindowsMobileAppsDev Oct 12 '16 at 10:31
I have no much idea about it but you can do it using gradient or porterduff mode for that – Anand Savjani Oct 12 '16 at 11:56

score 1 · Answer 9 · answered Jan 24 '17 at 11:51

When I did it, and I had to put the TintMode too.

<RatingBar
        android:progressTint="@color/colorAccent"
        android:progressTintMode="src_atop" ---- This is important!
        android:secondaryProgressTint="@color/colorPrimary"
        android:secondaryProgressTintMode="src_atop" ---- This is important!
        android:progressBackgroundTint="@color/black_alpha"/>

only for api version 21 and above

score 0 · Answer 10 · answered Dec 26 '16 at 06:05

<RatingBar
        android:id="@+id/rating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/RatingBar"/>

with theme in styles

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

How can I set the star color of the ratingbar?

10 Answers10

Linked