How can I decrease the size of Ratingbar?

Question

In my activity I have some Rating bars. But the size of this bar is so big! How can I make it smaller?

Edit

Thanks to Gabriel Negut, I did it with the following style:

<RatingBar
style = "?android:attr/ratingBarStyleSmall"
android:numStars = "5"
android:rating   = "4" />

Now, the size is reduced but number of stars and rating do not take effect!!! Why? I have 7 stars that 6 of them is selected.

Do you mean a Seekbar? Setting height and width works fine for me. Can you post your code snippet here? — Shailendra Singh Rajawat, May 27 '11 at 14:28
I would recommend removing the "edit" and instead making it the accepted answer. That or @GabrielNegut can edit his answer to include that kind of solution. Including the solution in the question kind of takes away from the Q&A experience. — onebree, Aug 18 '15 at 12:37

Gabriel Negut · Accepted Answer · 2016-08-17T08:29:14.237

213

The original link I posted is now broken (there's a good reason why posting links only is not the best way to go). You have to style the RatingBar with either ratingBarStyleSmall or a custom style inheriting from Widget.Material.RatingBar.Small (assuming you're using Material Design in your app).

Option 1:

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

Option 2:

// styles.xml
<style name="customRatingBar"   
    parent="android:style/Widget.Material.RatingBar.Small">
    ... // Additional customizations
</style>

// layout.xml
<RatingBar
    android:id="@+id/ratingBar"
    style="@style/customRatingBar"
    ... />

edited Aug 17 '16 at 08:29

answered May 27 '11 at 14:34

Gabriel Negut

13,860
4
38
45

22

or using this style style="?android:attr/ratingBarStyleSmall" will reduce the size. – Aniruddha K.M Dec 10 '14 at 05:46
3

But there is a useless extra padding on the right! How to remove that?! – Dr.jacky Jan 15 '18 at 06:37
Note: make width="wrap_content" to get rid of extra stars – hkchakladar Aug 08 '19 at 17:54

score 107 · Answer 2 · answered Jul 03 '15 at 12:45

107

This was my solution after a lot of struggling to reduce the rating bar in small size without even ugly padding

 <RatingBar
        android:id="@+id/listitemrating"
        style="@android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX=".5"
        android:scaleY=".5"
        android:transformPivotX="0dp"
        android:transformPivotY="0dp"
        android:isIndicator="true"
        android:max="5" />

answered Jul 03 '15 at 12:45

TechArcSri

1,982
1
13
20

5

I logged in just to upvote your answer regarding the usage of transformPivot to mitigate the uneven padding problem. Thanks! – imin Jul 29 '15 at 10:11
Finally no more padding!! – Udayaditya Barua Jun 17 '16 at 08:08
1

Awesome answer! Thank you! – valerybodak Sep 02 '16 at 13:15
2

Scale bothers alignment of sibling views and imbalances margins and spacing. – Prateek Gupta Aug 01 '18 at 09:48

score 68 · Answer 3 · answered Jun 25 '14 at 11:50

68

If you want to show the rating bar in small size, then just copy and paste this code in your project.

  <RatingBar
    android:id="@+id/MyRating"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/getRating"
    android:isIndicator="true"
    android:numStars="5"
    android:stepSize="0.1" />

answered Jun 25 '14 at 11:50

Pir Fahim Shah

10,505
1
82
81

3

What is android:stepSize="0.1" ? – darwin Apr 23 '16 at 07:25
http://codingaffairs.blogspot.com/2016/05/android-material-design-small-rating-bar.html – Developine May 18 '16 at 17:05
also check my asnwer at the end of this page. – Developine May 18 '16 at 17:06
@HammadTariqSahi It is good, keep it up, But is there any problem in my code? Let me know if there is any thing, please – Pir Fahim Shah May 23 '16 at 05:52
@PirFahimShah thankyou, bro I havent checked this code. you can improve and can style rating bar if you follow that approach. – Developine May 23 '16 at 05:56
@HammadTariqSahi Ok, i will surely look at it – Pir Fahim Shah May 23 '16 at 06:01
@can you please fix this issue http://stackoverflow.com/questions/37383165/tokenmismatchexception-for-api-in-laravel-5-2-31 – Pir Fahim Shah May 23 '16 at 06:01
@PirFahimShah what if I want the ratingBarStyleSmall style AND also I want to style the stars' color to yellow please? – Beeing Jk Jun 27 '16 at 10:02

Naveed Ahmad · Answer 4 · 2016-12-15T06:16:02.427

48

The below snippet worked for me to resize the ratingBar

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleIndicator"
    android:scaleX=".5"
    android:rating="3.5"
    android:scaleY=".5"
    android:transformPivotX="0dp"
    android:transformPivotY="0dp"
    android:max="5"/>

edited Dec 15 '16 at 06:16

answered Dec 03 '16 at 20:37

Naveed Ahmad

6,627
2
58
83

2

how to change the ratting bar color for this rating bar half fill, full fill, and empty color ? – Ganpat Kaliya Dec 06 '16 at 07:43
rating parameter is used to fill the rating bar right? I used android:rating="3.5" so 3.5 stars are filled. you can set up to 5 because max = 5 is set in the xml. If you want to change the colors of the rating bar, you have to create a style in style.xml see this link : http://stackoverflow.com/a/35914622/2915785 – Naveed Ahmad Dec 06 '16 at 13:22
how to android:transformPivotX="0dp" android:transformPivotY="0dp" Programmatically ? – Salman Khakwani Dec 16 '16 at 04:36
1

@NaveedAhmad But there is a useless padding on the right! How to remove that?! – Dr.jacky Jan 15 '18 at 06:33
@Mr.Hyde check the styles of raringbar https://stackoverflow.com/a/24407907/2915785 – Naveed Ahmad Jan 15 '18 at 09:53
@NaveedAhmad It doesn't do any related thing to padding! Or at least, I couldn't find it. https://github.com/aosp-mirror/platform_frameworks_base/blob/master/core/res/res/values/styles_material.xml -> `progressDrawable`, `indeterminateDrawable`, `minHeight`, `maxHeight`. – Dr.jacky Jan 15 '18 at 13:12

score 46 · Answer 5 · edited Mar 03 '14 at 04:25

46

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.

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

edited Mar 03 '14 at 04:25

jvperrin

3,368
1
23
33

answered Mar 03 '14 at 04:08

ZeWolfe15

676
7
8

14

the problem with this is that the ratingbar still takes up the same width and height as before even though the icons are smaller. This causes alignment issues since there is a bunch of left and right padding next to the first and last icons. For example, if you want your icons like this "XXXXX", after the scaling it will look like this "-----XXXXX-----" where the "-" is empty space and "X" is an icon. So your rating bar will seem like it got pushed to the right because of the empty space – theDazzler Apr 05 '14 at 23:15
1

Im guessing you're using relative layout. Its a pain but you can tweak it to go into the right position by using `android:layout_marginRight `and the likes to get it the way you want. – ZeWolfe15 Apr 30 '14 at 01:20
5

to get scale without creating a padding on the left add android:transformPivotX="0dp" – darwin Apr 23 '16 at 07:31

score 12 · Answer 6 · answered May 18 '16 at 17:05

Working Example

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

and add this in your styles xml file

<style name="RatingBar"   
parent="android:style/Widget.Material.RatingBar.Small">
<item name="colorControlNormal">@color/primary_light</item>
<item name="colorControlActivated">@color/primary_dark</item>
</style>

This way you dont need to customise ratingBar.

score 10 · Answer 7 · answered Apr 17 '18 at 11:35

Check my answer here. Best way to achieve it.

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

and use like

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

score 8 · Answer 8 · answered Jul 25 '20 at 04:46

This Worked for me.
Check this image

            android:id="@+id/ratingBar"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:scaleX=".8"
            android:scaleY=".8"
            android:stepSize="0.5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.543"
            app:layout_constraintStart_toEndOf="@+id/title"
            app:layout_constraintTop_toTopOf="parent" />

score 6 · Answer 9 · edited Aug 18 '15 at 13:17

6

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

edited Aug 18 '15 at 13:17

onebree

1,853
1
17
44

answered Aug 18 '15 at 12:32

nafees4343

79
1
4

5

Could you elaborate on how you arrived at the solution? – onebree Aug 18 '15 at 12:38
1

This doesn't allow `RatingBar` to get changed. – CopsOnRoad Aug 07 '18 at 11:55

score 6 · Answer 10 · answered Oct 06 '19 at 02:22

6

In the RatingBar tag, add these two lines

style="@style/Widget.AppCompat.RatingBar.Small"
android:isIndicator="false"

answered Oct 06 '19 at 02:22

Mirza Haider

161
2
4

score 5 · Answer 11 · answered Aug 30 '18 at 15:49

Using Widget.AppCompat.RatingBar, you have 2 styles to use; Indicator and Small for large and small sizes respectively. See example below.

<RatingBar
    android:id="@+id/rating_star_value"
    style="@style/Widget.AppCompat.RatingBar.Small"
    ... />

score 4 · Answer 12 · edited Sep 22 '18 at 17:27

4

In RatingBar give attribute:

style="?android:attr/ratingBarStyleIndicator"

edited Sep 22 '18 at 17:27

ʍѳђઽ૯ท

16,646
7
53
108

answered Jul 10 '15 at 06:41

rajlaxmi_jagdale

1,370
15
16

score 4 · Answer 13 · answered Jun 29 '18 at 13:08

If you are using Rating bar in Linearlayout with weightSum. Please make sure that you should not assign the layout_weight for rating bar. Instead, that place rating bar inside relative layout and give weight to the relative layout. Make rating bar width wrap content.

<RelativeLayout
    android:layout_width="0dp"
    android:layout_weight="30"
    android:layout_gravity="center"
    android:layout_height="wrap_content">
        <RatingBar
            android:id="@+id/userRating"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:stepSize="1" />
</RelativeLayout>

score 4 · Answer 14 · answered Jul 05 '20 at 11:02

 <RatingBar     android:id="@+id/id_tv_rating_bar"
                style="@style/Widget.AppCompat.RatingBar.Small"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/_20sdp"
                android:layout_marginLeft="@dimen/_80sdp"
                android:numStars="5"
                android:paddingTop="@dimen/_5sdp"
                android:rating="5" />

Just use style="@style/Widget.AppCompat.RatingBar.Small" it'll work for Sure!

after using this rating bar color is not changing. How to change it? — Shoaib Kakal, Sep 12 '20 at 03:13

score 4 · Answer 15 · answered Jun 18 '22 at 09:53

4

This will work perfectly

style="?android:attr/ratingBarStyleSmall"

answered Jun 18 '22 at 09:53

KISHORE K J

186
2
4

score 2 · Answer 16 · answered Jan 02 '14 at 20:16

2

If you only need the default style, make sure you have the following width/height, otherwise the numStars could get messed up:

android:layout_width="wrap_content"
android:layout_height="wrap_content"

answered Jan 02 '14 at 20:16

Sean

2,967
2
29
39

1

using this style style="?android:attr/ratingBarStyleSmall" will reduce the size – Aniruddha K.M Dec 10 '14 at 05:44

score 0 · Answer 17 · answered Dec 11 '18 at 11:07

For those who created rating bar programmatically and want set small rating bar instead of default big rating bar


    private LinearLayout generateRatingView(float value){
        LinearLayout linearLayoutRating=new LinearLayout(getContext());
        linearLayoutRating.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
        linearLayoutRating.setGravity(Gravity.CENTER);
        RatingBar ratingBar = new RatingBar(getContext(),null, android.R.attr.ratingBarStyleSmall);
        ratingBar.setEnabled(false);
        ratingBar.setStepSize(Float.parseFloat("0.5"));//for enabling half star
        ratingBar.setNumStars(5);
        ratingBar.setRating(value);
        linearLayoutRating.addView(ratingBar);
        return linearLayoutRating;
    }

How can I decrease the size of Ratingbar?

17 Answers17

Linked