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?

score 196 · Answer 1 · edited Dec 15 '15 at 10:29

196

How to glue the code given here ...

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

A full star

Empty star

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

edited Dec 15 '15 at 10:29

Nermeen

15,883
5
59
72

answered Jul 30 '11 at 09:29

Vaibhav Jani

12,428
10
61
73

7

Shoudn't this: be "@drawable/star_half" /> or whatever you called it? – StackOverflowed May 23 '12 at 20:14
8

Thanks a bunch. However, just a small comment: you need no image of half star. It will be automatically generated based on the progress. – Boris Strandjev Nov 13 '12 at 16:50
just awesome! exactly what I needed. Implemented in 60 secs. Txs – Hubert Mar 21 '13 at 05:09
1

@Vlad Read first line of answer I mentioned from where I get this. – Vaibhav Jani Sep 05 '13 at 07:03
4

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 – Ahmad Dwaik 'Warlock' Sep 22 '13 at 07:03
@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. – Vaibhav Jani Sep 23 '13 at 04:57
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 – Ahmad Dwaik 'Warlock' Sep 23 '13 at 07:19
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. – Andrew Jan 10 '14 at 17:09
@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. – Vaibhav Jani Jan 11 '14 at 06:17
I have the same problem that @Andrew is there another solution? I can't create a drawable for each screen size. – May 22 '14 at 11:22
@Alberto You can provide different drawable and corresponding style values in different size/density wise resource folders. – Vaibhav Jani May 22 '14 at 12:00
1

Thanks @PiedPiper - this saved me a lot of time!! Best explanation ever! – Edmond Tamas Aug 02 '14 at 10:27
Hello can i customized the rating bar with different images ?? Not same i want to customized it with 3 different smiles .. Any idea ? – Subhalaxmi Aug 22 '14 at 12:30
It doesn't work for me: http://stackoverflow.com/questions/32208154/custom-ratingbar-showing-five-stars-despite-setrating – jean d'arme Aug 25 '15 at 15:36
1

when i use this code for small ratting bar my rating star is streched. how to solve this problem ? – Ganpat Kaliya Jan 28 '17 at 05:09

score 112 · Accepted Answer · edited Dec 26 '22 at 03:40

112

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

edited Dec 26 '22 at 03:40

starball

20,030
7
43
238

answered Jul 04 '10 at 03:07

Farray

8,290
3
33
37

It's much better to use ?android:attr/ratingBarStyleSmall and set global rating theme but not use the exactly theme name, thanks a lot;) – Tsung Wu Apr 01 '14 at 10:44
8

if we set indicator property **android:isIndicator="false"** than we will interact with it.. – Mayur R. Amipara Mar 02 '15 at 06:11
The [docs](http://developer.android.com/reference/android/widget/RatingBar.html) imply ratingBarStyleSmall is the smaller of the two. I think your comment is backward. – AdamMc331 Sep 30 '15 at 18:21
5

Link is broken. – Denny Oct 07 '16 at 10:38
@Denny Content is available from [Google Cache](http://webcache.googleusercontent.com/search?q=cache:hjTGRYzwt_8J:custom-android-dn.blogspot.com/2013/01/how-to-use-and-custom-ratingbar-in.html+&cd=1&hl=en&ct=clnk&gl=us). 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. – Farray Oct 12 '16 at 15:10
use `style="?attr/ratingBarStyleSmall"` instead. Answer of Farry works but it gets some random color on Samsung ;* – murt Dec 01 '17 at 13:52

score 75 · Answer 3 · edited Apr 30 '15 at 10:55

75

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"

edited Apr 30 '15 at 10:55

Stewartside

20,378
12
60
81

answered Aug 27 '14 at 12:40

Loolooii

8,588
14
66
90

scaleX scaleY are good but leave ugly padding, if you could get rid of that padding it would be the easiest perfect answer – Ahmad Dwaik 'Warlock' Sep 09 '14 at 08:24
also, they require Android 3.0 / API 11 – averasko Dec 09 '14 at 23:39
7

I solve the ugly (right)padding by `codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"` – hannes ach May 09 '15 at 12:26
1

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? – Nautilus Jan 28 '16 at 13:09
you can remove some extra padding by specifying height of rating bar ex : `android:layout_height="40dp"` – Manohar Aug 28 '17 at 13:43

score 46 · Answer 4 · answered Jul 13 '13 at 18:14

46

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

answered Jul 13 '13 at 18:14

zyamys

1,609
1
21
23

4

isIndicator is the key! – deadfish Jan 04 '15 at 19:39

score 20 · Answer 5 · edited Feb 05 '15 at 06:33

20

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

edited Feb 05 '15 at 06:33

Sagar Maiyad

12,655
9
63
99

answered Jun 12 '13 at 09:21

Bouchehboun Saad

728
5
9

2

Rating bar is not clickable when giving the above code. – Sharath Nov 17 '15 at 14:46

score 16 · Answer 6 · answered Jul 30 '11 at 09:08

16

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

answered Jul 30 '11 at 09:08

Mohammed Azharuddin Shaikh

41,633
14
96
115

1

Although visually it is great. click events not working on this solution. do you have any fix for this? – Gökhan Barış Aker Jul 25 '12 at 13:20
4

if you want the clicks working use android:isIndicator="false" – D4rWiNS Jul 09 '15 at 09:07

score 15 · Answer 7 · answered Sep 17 '12 at 03:31

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

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. — Beer Me, Jan 17 '13 at 20:03

indrajeet jyoti · Answer 8 · 2019-03-01T07:58:43.270

7

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

edited Mar 01 '19 at 07:58

answered Feb 27 '19 at 11:33

indrajeet jyoti

431
6
8

While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) 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. – Johan Feb 27 '19 at 11:51

score 5 · Answer 9 · edited Aug 17 '17 at 15:42

5

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

edited Aug 17 '17 at 15:42

Paul Roub

36,322
27
84
93

answered Aug 17 '17 at 14:54

chry

434
7
5

score 3 · Answer 10 · answered Dec 01 '17 at 13:51

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>

score 3 · Answer 11 · answered Apr 17 '18 at 10:27

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

score 2 · Answer 12 · edited Dec 03 '16 at 20:42

2

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

edited Dec 03 '16 at 20:42

Sajal Narang

397
1
14

answered Nov 30 '16 at 09:01

Dharmendra Mishra

2,427
1
13
9

score 2 · Answer 13 · answered Feb 13 '17 at 09:15

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

score 2 · Answer 14 · answered May 01 '18 at 06:02

2

The Best Answer for small ratingbar

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

answered May 01 '18 at 06:02

Arun Prajapati

283
2
6

score 1 · Answer 15 · answered Aug 17 '17 at 14:13

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

score 0 · Answer 16 · answered Jul 20 '17 at 18:59

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.

score 0 · Answer 17 · answered Jun 04 '18 at 13:29

0

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

answered Jun 04 '18 at 13:29

S HemaNandhini

333
3
5

score 0 · Answer 18 · answered Aug 26 '23 at 11:29

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

score -4 · Answer 19 · answered Dec 19 '15 at 08:48

-4

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

answered Dec 19 '15 at 08:48

Hai Rom

1,751
16
9

This is what the OP has already tried and other answers have already mentioned. – Pang Dec 19 '15 at 09:12

How to make a smaller RatingBar?

19 Answers19

Linked