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?

Reck

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

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

Downstream

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

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

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

Link is broken. – Levanter

@Levanter 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. – Downstream

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

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

Napkin

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

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

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

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

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 – Gunther

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

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 – Gunther

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

@Zone 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. – Napkin

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

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

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

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

It doesn't work for me: #32208654 – Herringbone

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

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

Vastah

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

also, they require Android 3.0 / API 11 – Tremain

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

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

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

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

Dinnerware

isIndicator is the key! – Royster

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

Coopery

Rating bar is not clickable when giving the above code. – Kerosene

Answer 6

apply this.

<RatingBar android:id="@+id/indicator_ratingbar"
    style="?android:attr/ratingBarStyleIndicator"
    android:layout_marginLeft="5dip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical" />

Kilauea

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

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

Answer 7

I found an easier solution than I think given by the ones above and easier than rolling your own. I simply created a small rating bar, then added an onTouchListener to it. From there I compute the width of the click and determine the number of stars from that. Having used this several times, the only quirk I've found is that drawing of a small rating bar doesn't always turn out right in a table unless I enclose it in a LinearLayout (looks right in the editor, but not the device). Anyway, in my layout:

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

and within my activity:

    final RatingBar minimumRating = (RatingBar)findViewById(R.id.myRatingBar);
    minimumRating.setOnTouchListener(new OnTouchListener()
    { 
        public boolean onTouch(View view, MotionEvent event)
        { 
            float touchPositionX = event.getX();
            float width = minimumRating.getWidth();
            float starsf = (touchPositionX / width) * 5.0f;
            int stars = (int)starsf + 1;
            minimumRating.setRating(stars);
            return true; 
        } 
    });

I hope this helps someone else. Definitely easier than drawing one's own (although I've found that also works, but I just wanted an easy use of stars).

Ogbomosho

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

Answer 8

 <RatingBar
                    android:rating="3.5"
                    android:stepSize="0.5"
                    android:numStars="5"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:theme="@style/RatingBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

// if you want to style 

 <style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/colorPrimary</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

// add these line for small rating bar

style = "?android:attr/ratingBarStyleSmall"

Husch

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

Answer 9

<RatingBar
    android:id="@+id/rating_bar"
    style="@style/Widget.AppCompat.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Tiresias

Answer 10

although answer of Farry works, for Samsung devices RatingBar took random blue color instead of the defined by me. So use

style="?attr/ratingBarStyleSmall"

instead.

Full code how to use it:

<android.support.v7.widget.AppCompatRatingBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?attr/ratingBarStyleSmall" // use smaller version of icons
                android:theme="@style/RatingBar"
                android:rating="0"
                tools:rating="5"/>

<style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/grey</item>
        <item name="colorControlActivated">@color/yellow</item>
        <item name="android:numStars">5</item>
        <item name="android:stepSize">1</item>
    </style>

Sikhism

Answer 11

The best answer I got

  <style name="MyRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:minHeight">15dp</item>
    <item name="android:maxHeight">15dp</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/home_add</item>
</style>

user like this

<RatingBar
                style="?android:attr/ratingBarStyleIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:isIndicator="false"
                android:max="5"
                android:rating="3"
                android:scaleX=".8"
                android:scaleY=".8"
                android:theme="@style/MyRatingBar" />

Increase/Decrease sizes by using scaleX and scaleY value

Fletafletch

Answer 12

Use This Code

<RatingBar
    android:id="@+id/ratingBarSmalloverall"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="30dp"
    android:isIndicator="false"
    android:numStars="5" />

Forsooth

Answer 13

<RatingBar
    android:id="@+id/ratingBar1"
    android:numStars="5"
    android:stepSize=".5"
    android:rating="3.5"
    style="@android:style/Widget.DeviceDefault.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Westing

Answer 14

The Best Answer for small ratingbar

<RatingBar
                    android:layout_width="wrap_content"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:layout_height="wrap_content" />

Fassold

Answer 15

use the following code for small rating bar with onTouch event

enter code here


<RatingBar
            android:id="@+id/ratingBar"
            style="?android:ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isIndicator="false"
            android:rating="4"
            android:stepSize="0.5" />

Krystalkrystalle

Answer 16

After a lot of research I found the best solution to reduce the size of custom rating bars is to get the size of progress drawable in certain sizes as mentioned below :

xxhdpi - 48*48 px

xhdpi - 36*36 px

hdpi - 24*24 px

And in style put the minheight and maxheight as 16 dp for all Resolution.

Let me know if this doesn't help you to get a best small size rating bars as these sizes I found very compatible and equivalent to ratingbar.small style attribute.

Gallows

Answer 17

Its working for me in rating bar xml style="?android:attr/ratingBarStyleSmall" add this.it will work.

Creosol

Answer 18

I think it will work by adjusting the scale after adding this style="?android:attr/ratingBarStyleSmall"

<RatingBar
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:progressTint="#FFD700"
            android:rating="2.5"
            android:scaleX="0.50"
            android:scaleY="0.50"
            android:stepSize="0.5"
            android:transformPivotY="0dp" />

Otiliaotina

Answer 19

I solve this issue the following: style="?android:attr/ratingBarStyleSmall"

Urga

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