How can I set the color of android rating bar's stroke? (Not the color of the stars but the BORDER)

Question

I am an android beginner and I want to make my custom ratingBar.

Disclaimer: it's not a duplicate. because all the posts I have read asks about how to change colors of the star and how to remove the stroke. That is NOT what I want. I want to have the stroke and to be able to change the color of the border.

With a transparent and yellow stroke while empty, and yellow background and stroke for half and filled.

I do NOT want to use pngs. I have my own already but they are too small. I just dont want to ask the designer to make new ones if I can make the stars using only XML attributes and drawables.

<RatingBar
          android:id="@+id/thread_rating"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:isIndicator="true"
          android:numStars="5"
          android:progressBackgroundTint="@color/gray"
          android:progressTint="@color/gold"
          android:rating="2.5"
          android:secondaryProgressTint="@color/gray"
          android:stepSize="0.5"
          style="?android:attr/ratingBarStyleSmall"
          />

I work on this with another engineer. He also wrote code in a java file

private void setRatingBarStart(RatingBar rating_bar) {
LayerDrawable stars = (LayerDrawable) rating_bar.getProgressDrawable();
stars.getDrawable(2)
    .setColorFilter(getResources().getColor(R.color.gold),
        PorterDuff.Mode.SRC_ATOP); // for filled stars
stars.getDrawable(1)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for half filled stars
stars.getDrawable(0)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for empty stars

[So now it has a grey background, yellow for filled, and NO stroke now.

And I want it to have transparent background, yellow stroke and yellow for filled. Looks like this

I already know how to set the background transparent and to make it yellow. I just dont know how to set the stroke color. Thanks a lot!!!!

Possible duplicate of [Android RatingBar change star colors](http://stackoverflow.com/questions/2446270/android-ratingbar-change-star-colors) — sathish kumar, Feb 13 '16 at 09:16
Look at this thread.. http://stackoverflow.com/questions/5800657/how-to-create-custom-ratings-bar-in-android Just set three different png for stras(empty, filled and half filled) with stroke and inner colour and the job is done — Alessio Trecani, Feb 13 '16 at 10:05
@AlessioTrecani Hi Thanks for your comment. I do NOT want pngs. I have them already but they are too small. I try not to ask the designer to make new ones if I can set the stars up with the XML attributes — husky love, Feb 13 '16 at 17:47
I don't understand the problem with the PNGs, you can set the size you want, and I think that's the only solution if you want a custom rating bar. — Yoann Hercouet, May 11 '16 at 08:06

KDeogharkar · Answer 1 · 2016-05-13T05:13:48.757

18

Put all drawable color to Yellow(in your case getResources().getColor(R.color.gold) for all) for set strokes and background. (for background,secondary progress and progress)

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

remove progressBackgroundTint,progressTint,secondaryProgressTint attributes from RatingBar no need of it.

<RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="2.5"/>

and result is ::

Hope this will help (pink color is just background color)

after set drawable 1 and 0 to red:

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

edited May 13 '16 at 05:13

answered May 10 '16 at 10:20

KDeogharkar

10,939
7
51
95

1

The question is: how do I change the stroke color only? For example, take the stars in your example and add a red border to them. – vitorsdcs May 10 '16 at 14:24
KDeogharkar, your answer is simple, clear and correctly addresses the issue. I will probably award you the bounty. However that'd be really great if you could help me with my previous question -- because that's the goal I'm trying to achieve and the reason why I've started this bounty. – vitorsdcs May 12 '16 at 00:45
means you want to change colors of border for example yellow strokes to red? is this what you want? @vitorsdcs – KDeogharkar May 12 '16 at 05:04
if I understand your question well you can change `drawable(0)` and `drawable(1)`color to red like `stars.getDrawable(0).setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP); stars.getDrawable(1).setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);` it will change your border and partially fill border. 3rd layerdrawable will be yellow only for fill part – KDeogharkar May 12 '16 at 06:07
No, I wanted it to look kind of like the first star in this image: http://i.imgur.com/dhGaCdX.png (yellow fill, dark-blue stroke). If I change drawable(0) and drawable(1) the way you said, it actually looks like this: http://i.imgur.com/hQH3vCO.png – vitorsdcs May 12 '16 at 15:43
I dont get it . @vitorsdcs why your result and mine is different? please see my updated answer . I have also set 0 and 1 drawable to red . – KDeogharkar May 13 '16 at 05:08
16

Am I the only one who receives colour fill instead of the stroke? – Leo DroidCoder Sep 29 '16 at 09:02
@LeoDroidcoder No i also got the color fills instead of stroke, might be it varies on different OS. I am testing on LG nexus 5 (OS:6.0.1, API:23), Please update about your recent experience. – Farhan Jan 30 '17 at 20:57
This does not give stroked, though that may be dependent on default star of OS. See Yoann Hercouet's answer below, with link to where we can download proper stroked star – arberg Jun 12 '20 at 13:30

score 9 · Answer 2 · answered Mar 28 '18 at 12:30

Don't use any library or style for that. Use bellow step you get the result.

create a file in drawable folder as custom_ratingbar.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" />
 <item android:id="@android:id/secondaryProgress"
android:drawable="@drawable/star_empty" />
 <item android:id="@android:id/progress"
android:drawable="@drawable/star_full" />
</layer-list>

then use following in your RatingBar :

  <RatingBar
    android:id="@+id/ratingBarChef"
    style="?android:attr/ratingBarStyleSmall"
    android:numStars="5"
    android:stepSize="0.2"
    android:rating="3.0"
    android:progressDrawable="@drawable/custom_ratingbar"
    android:isIndicator="false"
    />

i got whats my problem - i use Vector , i should replace it with an PNG star — ehsan wwe, May 22 '18 at 14:39

score 5 · Answer 3 · edited May 23 '17 at 10:29

I think I actually found what you need. You will have to create a custom RatingBaras explained in this answer BUT you will have to use vector drawables and not standard ones.

You can download the 3 drawables (full, half and empty) on this website:

https://materialdesignicons.com/

Or by doing a right click on your res folder: --> New --> Vector asset on Android Studio.

Here are the 3 drawables XML in case you don't find them:

Full star:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />

Half star:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" />

Empty star:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />

To change their size, just update the attributes height and width.

To change their color, just update the attribute fillColor and set your yellow color.

Yeah, Vector XML does not work for ratingBar for some reason, it only shows one star stretched. If https://github.com/trello/victor is used to convert SVG's to PNG's on build-time, its possible to use SVG's. — arberg, Jun 12 '20 at 13:32

score 4 · Answer 4 · answered May 23 '18 at 05:13

One Another way is create custom rating bar if you don't have any images follow below steps. This all file create in drawable folder.

emptystar.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#F1C332" android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
</vector>

full_star.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#F1C332" android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>

half_star.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" >
</path>
</vector>

food_ratingbar_full_empty.xml

<?xml version="1.0" encoding="utf-8"?>

<item android:state_pressed="true"
    android:state_window_focused="true"
    android:drawable="@drawable/empty_star" />

<item android:state_focused="true"
    android:state_window_focused="true"
    android:drawable="@drawable/empty_star" />

<item android:state_selected="true"
    android:state_window_focused="true"
    android:drawable="@drawable/empty_star" />

<item android:drawable="@drawable/empty_star" />

food_ratingbar_full_filled.xml

<?xml version="1.0" encoding="utf-8"?>

<item android:state_pressed="true"
    android:state_window_focused="true"
    android:drawable="@drawable/full_star" />

<item android:state_focused="true"
    android:state_window_focused="true"
    android:drawable="@drawable/full_star" />

<item android:state_selected="true"
    android:state_window_focused="true"
    android:drawable="@drawable/full_star" />

<item android:drawable="@drawable/full_star" />

food_rating_bar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
    android:drawable="@drawable/food_ratingbar_full_empty" />

<item android:id="@android:id/secondaryProgress"
    android:drawable="@drawable/food_ratingbar_full_empty" />
<item android:id="@android:id/progress"
    android:drawable="@drawable/food_ratingbar_full_filled" />

style.xml

   <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/food_rating_bar_full</item>
    <item name="android:minHeight">23dip</item>
    <item name="android:maxHeight">25dip</item>
   </style>

In your layout

<RatingBar
android:id="@+id/ratingBarDish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp10"
android:layout_marginStart="@dimen/dp10"
style="@style/foodRatingBar"
android:isIndicator="true" />

score 0 · Answer 5 · answered May 14 '19 at 10:57

hi try to use this and use border image as a star https://github.com/ome450901/SimpleRatingBar as icon_starempty and icon_starfilled are your respective images

<com.willy.ratingbar.ScaleRatingBar xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/deals_ratingbar"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="@dimen/_10dp"
                    android:layout_toRightOf="@+id/txt_newprice"
                    android:layout_weight=".4"
                    android:gravity="center|right"
                    android:outlineProvider="none"
                    app:srb_drawableEmpty="@drawable/icon_starempty"
                    app:srb_drawableFilled="@drawable/icon_starfilled"
                    app:srb_isIndicator="true"
                    app:srb_numStars="5"
                    app:srb_starHeight="@dimen/_10dp"
                    app:srb_starPadding="@dimen/_3dp"
                    app:srb_starWidth="@dimen/_10dp" />

How can I set the color of android rating bar's stroke? (Not the color of the stars but the BORDER)

5 Answers5

Linked