[android] How can I decrease the size of Ratingbar?

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.

This question is related to android rating-system

The answer is


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

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

enter image description here


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>

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

In the RatingBar tag, add these two lines

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

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

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


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

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.


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"

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

In RatingBar give attribute:

style="?android:attr/ratingBarStyleIndicator" 

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

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


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