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

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!!!!

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);

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

Yoann Hercouet

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.

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

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

来源：https://stackoverflow.com/questions/35378098/how-can-i-set-the-color-of-android-rating-bars-stroke-not-the-color-of-the-st

标签

java

android

xml

drawable

ratingbar