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:

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

Wilscam

You can simply add android:minHeight="32dp" to <RatingBar> tag. – Word

Answer 1

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.

Wilscam

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

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? – Harlamert

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. https://mcmap.net/q/454200/-shapedrawable-as-progressdrawable-for-ratingbar-in-android – Leon

Answer 2

Another approach would be scaling the widget:

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

Satirical

(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. – Vitrine

Answer 3

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

Philosophize

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

Answer 4

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

Witha

Thx bro,the best solution ;) – Hawking

@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. – Broida

DO you know how i can programatically set the size of each star or a specific star, say the 3rd one from 5 stars? – Marutani

Answer 5

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

Spender

Answer 6

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.

Gabon

small style is just too small. How can I set the different size of the default stars? – Wilscam

@MarcinS. I added another link – Gabon

Answer 7

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

Tinfoil

Answer 8

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

Chinaware

Answer 9

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!

Uranium

Answer 10

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"

Thrippence

Answer 11

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

Disgraceful

It's android, not css. – Confluence