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

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


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

image1

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

image2


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