How to make a smaller RatingBar?

Question

I've added a RatingBar in a layout:

<RatingBar 
    android:id="@+id/ratingbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="1.0"
    />  

But the default style for the rating bar is too large.
I've try to change it by adding the android style : style="?android:attr/ratingBarStyleSmall"

But the result is too small and it's impossible to set a rate with this property.

How could I do?

Solution 1

The default RatingBar widget is sorta' lame.

The source makes reference to style "?android:attr/ratingBarStyleIndicator" in addition to the "?android:attr/ratingBarStyleSmall" that you're already familiar with. ratingBarStyleIndicator is slightly smaller but it's still pretty ugly and the comments note that these styles "don't support interaction".

You're probably better-off rolling your own. There's a decent-looking guide at http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ showing how to do this. (I haven't done it myself yet, but will be attempting in a day or so.)

Good luck!

p.s. Sorry, was going to post a link to the source for you to poke around in but I'm a new user and can't post more than 1 URL. If you dig your way through the source tree, it's located at frameworks/base/core/java/android/widget/RatingBar.java

Solution 2

How to glue the code given here ...

Step-1. You need your own rating stars in res/drawable ...

Step-2 In res/drawable you need ratingstars.xml as follow ...

<?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" />
</layer-list>

Step-3 In res/values you need styles.xml as follow ...

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/ratingstars</item>
        <item name="android:minHeight">22dip</item>
        <item name="android:maxHeight">22dip</item>
    </style>
</resources>

Step-4 In your layout ...

<RatingBar 
      android:id="@+id/rtbProductRating"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:numStars="5"
      android:rating="3.5"
      android:isIndicator="false"
      style="@style/foodRatingBar"    
/>  

Solution 3

Just use:

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

Change the scale factor according to your need.

In order to scale without creating a padding on the left also add

android:transformPivotX="0dp"

Solution 4

There is no need to add a listener to the ?android:attr/ratingBarStyleSmall. Just add android:isIndicator=false and it will capture click events, e.g.

<RatingBar
  android:id="@+id/myRatingBar"
  style="?android:attr/ratingBarStyleSmall"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:numStars="5"
  android:isIndicator="false" />

Solution 5

the small one implement by the OS

<RatingBar
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    />

View more solutions

Comments

[StackOverflowed]

Shoudn't this: <item android:id="@+android:id/secondaryProgress" android:drawable="@drawable/star_empty" /> be "@drawable/star_half" /> or whatever you called it?

[Gökhan Barış Aker]

Although visually it is great. click events not working on this solution. do you have any fix for this?

[Boris Strandjev]

Thanks a bunch. However, just a small comment: you need no image of half star. It will be automatically generated based on the progress.

[Beer Me]

It works, and it's easy...but the ratingBarStyleSmall stars are really too small to be useful. I think I'll have to roll my own in order to get stars that are an intermediate size.

[Hubert]

just awesome! exactly what I needed. Implemented in 60 secs. Txs

[Vaibhav Jani]

@Vlad Read first line of answer I mentioned from where I get this.

[Ahmad Dwaik 'Warlock']

works perfectly :) but i got 2 issues.. numStars doesnt work anymore, and I cant get it a bit bigger even if I set max and min width

[Vaibhav Jani]

@Warlock numStars working perfectly for me. And AFAIK you will need bigger size of drawable (relative to size you as max/min height/width) to make it bigger.

[Ahmad Dwaik 'Warlock']

I've noticed the size of drawable it worked, and for numStars it works well in filling stars based on rating but it wont set number of visible stars like the standard rating bar so you'll need to set its size... but very well job you did thank you :) +1

[Andrew]

I am having a problem with this solution. In the styles.xml file, I have made the minHeight and maxHeight of the RatingBar be 24dip. Indeed, the View created on screen is 24 dips in height. However, the images used for the stars have not resized and are much bigger than 24. Meaning, half of the stars are "cut off" from view because the view only extends to 24 dips.

[Vaibhav Jani]

@Andrew AFAIK There is a limitation of platform that rating stars will not be scaled automatically, so the size of drawables for rating stars must be same with maxHeight and maxWidth.

[Tsung Wu]

It's much better to use ?android:attr/ratingBarStyleSmall and set global rating theme but not use the exactly theme name, thanks a lot;)

[Admin]

I have the same problem that @Andrew is there another solution? I can't create a drawable for each screen size.

[Vaibhav Jani]

@Alberto You can provide different drawable and corresponding style values in different size/density wise resource folders.

[Edmond Tamas]

Thanks @PiedPiper - this saved me a lot of time!! Best explanation ever!

[Subhalaxmi]

Hello can i customized the rating bar with different images ?? Not same i want to customized it with 3 different smiles .. Any idea ?

[Ahmad Dwaik 'Warlock']

scaleX scaleY are good but leave ugly padding, if you could get rid of that padding it would be the easiest perfect answer

[averasko]

also, they require Android 3.0 / API 11

[deadfish]

isIndicator is the key!

[Mayur R. Amipara]

if we set indicator property android:isIndicator="false" than we will interact with it..

[hannes ach]

I solve the ugly (right)padding by codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"

[D4rWiNS]

if you want the clicks working use android:isIndicator="false"

[jean d'arme]

It doesn't work for me: stackoverflow.com/questions/32208154/…

[AdamMc331]

The docs imply ratingBarStyleSmall is the smaller of the two. I think your comment is backward.

[Sharath]

Rating bar is not clickable when giving the above code.

[Pang]

This is what the OP has already tried and other answers have already mentioned.

[Nautilus]

Although that looks like the easiest solution, it did not work for me. For some reason there was no effect. Is it because I'm on Android 5.x?

[Denny]

Link is broken.

[Farray]

@Denny Content is available from Google Cache. I'm not updating the post with the content as I haven't looked at Android rating bars in years, and am not certain if the content in that link is still valid.

[Ganpat Kaliya]

when i use this code for small ratting bar my rating star is streched. how to solve this problem ?

[Manohar]

you can remove some extra padding by specifying height of rating bar ex : android:layout_height="40dp"

[murt]

use style="?attr/ratingBarStyleSmall" instead. Answer of Farry works but it gets some random color on Samsung ;*

[Johan]

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.