How to set the custom size of the stars in RatingBar

Question

I have already added a style

<style name="myRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:minHeight">32dp</item>
    <item name="android:maxHeight">32dp</item>
</style>

However instead of scaled stars I'm receiving cropped stars:

enter image description here

Is there a way to change the size of the stars?

You can simply add `android:minHeight="32dp"` to `` tag. – CoolMind Nov 29 '18 at 16:25 — CoolMind, Nov 29 '18 at 16:25

score 35 · Answer 1 · answered Nov 09 '15 at 02:38

35

Another approach would be scaling the widget:

android:scaleX="0.5"
android:scaleY="0.5"

answered Nov 09 '15 at 02:38

xleon

6,201
3
36
52

2

(Caution) This solution looks good but there is a cons. It doesn't change the actual touch area, so might not be natural while users are rating. – Doongsil Jan 03 '19 at 08:45

score 22 · Accepted Answer · edited Sep 12 '16 at 04:11

22

Android won't scale a rating bar icons. When you decrease the minHeight and maxHeight android will always crop the icons as shown on the picture. The workaround for it and seems to be the only one solution is to provide your own icons for stars with the desired dimensions and set the minHeight and maxHeight to the size of the icons.

edited Sep 12 '16 at 04:11

sfmirtalebi

370
7
16

answered Sep 14 '12 at 03:59

Marcin S.

11,161
6
50
63

2

And if you need different star sizes in different parts of your app? You need new assets for that? What about also supporting different sizes for tablets? Now I have 8 sets of stars to support? The images should scale to the view, like ImageView does, not the other way around. – Greg Ennis Apr 19 '14 at 03:51
Well I know it's long time since the question was asked, but I have a bit relevant matter, to be precise what is the size of standard star icons _@android:style/Widget.RatingBar"_ and small stars style _"?android:attr/ratingBarStyleSmall"_. Do you know where these icons are held? – Tafari Aug 12 '14 at 21:35
1

I created a method where you can set your own images for RatingBar and set a custom color overlay for the star icons. With a bit of modification you can set your custom size and height without any anomalies on the actual layout size, the paddings for each star rating can also be modified. http://stackoverflow.com/a/37460679/1299158 – box May 26 '16 at 12:58

score 8 · Answer 3 · answered Sep 12 '12 at 09:20

//you can also try

<style name="myRatingBar" parent="@android:style/Widget.RatingBar.Indicator">

<style name="myRatingBar" parent="@android:style/Widget.RatingBar.Small">

Ref: /android-sdk/platforms/android-10/data/res/values/styles.xml

<style name="Widget.RatingBar">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/ratingbar_full</item>
        <item name="android:indeterminateDrawable">@android:drawable/ratingbar_full</item>
        <item name="android:minHeight">57dip</item>
        <item name="android:maxHeight">57dip</item>
        <item name="android:thumb">@null</item>
    </style>

    <style name="Widget.RatingBar.Indicator">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/ratingbar</item>
        <item name="android:indeterminateDrawable">@android:drawable/ratingbar</item>
        <item name="android:minHeight">38dip</item>
        <item name="android:maxHeight">38dip</item>
        <item name="android:thumb">@null</item>
        <item name="android:isIndicator">true</item>
    </style>

    <style name="Widget.RatingBar.Small">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/ratingbar_small</item>
        <item name="android:indeterminateDrawable">@android:drawable/ratingbar_small</item>
        <item name="android:minHeight">14dip</item>
        <item name="android:maxHeight">14dip</item>
        <item name="android:thumb">@null</item>
        <item name="android:isIndicator">true</item>
    </style>

Ok. Whenever I change minHeight and maxHeight to the lesser value I receive the stars as in attached pic. It seems that pictures are not scaled and I have to customize rating bar by providing my own icons with the desired size. — Marcin S., Sep 12 '12 at 18:00

score 5 · Answer 4 · edited May 06 '15 at 13:12

5

You solved your problem. But this may help others.

I have same issue.All solutions I got does not work for multiple screen sizes. After spending hours I ended with following solution.

Just get drawable height which you want to use at runtime and set it to RatingBar. Here is sample code.

Drawable starDrawable = getResources().getDrawable(R.drawable.YOUR_IMAGE);
int height = starDrawable.getMinimumHeight();
LayoutParams params = (LayoutParams) ratingBar.getLayoutParams();
params.height = height;
ratingBar.setLayoutParams(params);

edited May 06 '15 at 13:12

Swayam

16,294
14
64
102

answered Oct 18 '14 at 17:48

Ketan Ahir

6,678
1
23
45

Thx bro,the best solution ;) – Levon Petrosyan Dec 20 '17 at 06:05
@Ketan Ahir & Swayam what for width ? i got very small custom drawable and i want to fit to screen any one know the answer please let me know. – Sarthak Dhami May 22 '20 at 07:51
DO you know how i can programatically set the size of each star or a specific star, say the 3rd one from 5 stars? – Jono Jul 17 '20 at 13:42

score 5 · Answer 5 · answered May 16 '18 at 22:10

Maybe we can use the another alternative that android provides small size of rating stars. Adding style="@style/Widget.AppCompat.RatingBar.Small" to the RatingBar.

            <RatingBar
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/list_item_margin"
                android:layout_marginLeft="@dimen/list_item_margin"
                android:numStars="5"
                android:isIndicator="true"
                style="@style/Widget.AppCompat.RatingBar.Small"/>

Chirag · Answer 6 · 2012-09-12T07:28:10.830

2

Look at this Custom Rating Bar in Small Style .

I think you have to use the Custom Style for Rating Bar . Here is the Example.

edited Sep 12 '12 at 07:28

answered Sep 12 '12 at 06:57

Chirag

56,621
29
151
198

small style is just too small. How can I set the different size of the default stars? – Marcin S. Sep 12 '12 at 07:09
@MarcinS. I added another link – Chirag Sep 12 '12 at 07:28

score 2 · Answer 7 · answered May 31 '17 at 09:29

             <RatingBar
                android:id="@+id/AVL_rating"
                style="?android:attr/ratingBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ASD_cardlayout"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:layout_marginTop="@dimen/_10sdp"
                android:isIndicator="true"
                android:numStars="5"
                android:rating="5.0"
                android:secondaryProgressTint="@color/clr_red"
                android:stepSize="1.0" />

Gyan Swaroop Awasthi · Answer 8 · 2020-06-11T11:15:44.780

You can set it in the XML code for the RatingBar, use scaleX and scaleY to adjust accordingly. "1.0" would be the normal size, and anything in the ".0" will reduce it, also anything greater than "1.0" will increase it.

You can also refer the link for the using the lib. for the custom rating bar, Click this link and get custom ratingbar and Enjoy the Rating bar.

<RatingBar
  android:id="@+id/ratingBar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:scaleX="0.5"
  android:scaleY="0.5" />

score 0 · Answer 9 · answered Dec 15 '15 at 17:42

This is not exactly an answer but I would like to show an alternative. Using a library called Iconify that allow you to use scalable vector icons on android apps and with a simple method you can create awesome ratingbar with icons.

The method

public static String montarEstrellasValoracion(float valoration,int starSize) {
    String result="";
    float cont=1f;

    for(float i=1f;i<=valoration;i++){
        if(valoracion==0){
            break;
        }
        cont=i;
        if((cont+0.5f)>=(valoration) && valoracion!=5f){
            result+="{fa-star "+starSize+"dp} ";
            result+="{fa-star-half-o "+starSize+"dp} ";
            cont++;
            break;
        }else if((cont+0.5f)<(valoration) && (cont+1f)>(valoration) && valoration!=5f){
            result+="{fa-star "+starSize+"dp} ";
            result+="{fa-star "+starSize+"dp} ";
            cont++;
            break;
        }

        if(cont<=5){
            result+="{fa-star "+starSize+"dp} ";
        }

    }

    for(float j=cont;j<5f;j++){
        result+="{fa-star-o "+starSize+"dp} ";
    }

    if(valoration==0){
        result+="{fa-star-o "+starSize+"dp}";
    }

    return result;
}

And then on the onCreate method:

IconTextView valoracion = (IconTextView)item.findViewById(R.id.id_icon_textview);

valoracion.setText(montarEstrellasValoracion(valoration,15)); valoracion.setTextColor(Color.parseColor("#000");

The icons are from another awesome site called Font Awesome

Hope this help anybody!

score 0 · Answer 10 · answered Aug 16 '21 at 18:09

0

In addition to scaling shown by xleon, set transformPivotX="0dp" and then set a custom height.

android:scaleX="0.7"
android:scaleY="0.7"
android:transformPivotX="0dp"
android:height="40dp"

answered Aug 16 '21 at 18:09

Anil Myne

1

score -2 · Answer 11 · edited Sep 21 '18 at 11:51

-2

just add font-size ppt to in style : style='font-size: 1.7vw'

edited Sep 21 '18 at 11:51

Jouby

2,196
2
21
33

answered Sep 21 '18 at 09:38

Rohan

41
2

3

It's android, not css. – Mahdi Moqadasi Sep 26 '18 at 09:02

How to set the custom size of the stars in RatingBar

11 Answers11

Linked