Issue styling Rating bar

Question

I am having problem styling rating bar

Here is the screenshot

I want to reduce the size of rating bar. I know I can use style small to make them smaller but that is too small. Can I make somewhat medium style?.

Here is my xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#F0EEEF">
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="RATE OUR SERVICES"
    android:gravity="center"
    android:textColor="@color/textColor"
    android:textStyle="bold"/>
    </LinearLayout>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="By Quality"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"/>
    <RatingBar
        android:theme="@style/RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:numStars="5"
        android:isIndicator="false" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="By Services"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"/>
    <RatingBar
        android:theme="@style/RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:numStars="5"
        android:isIndicator="false" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="By Time"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"/>
    <RatingBar
        android:theme="@style/RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:numStars="5"
        android:isIndicator="false" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Overall Rating"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"/>
    <RatingBar
        android:theme="@style/RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:numStars="5"
        android:isIndicator="false" />
</LinearLayout>

Instead of wrap_content for layout_widht and layout_height, put your size desired in dp. (e.g 150dp for layout_width) — Chol, Feb 19 '16 at 13:34
I think that the RatingBar is too static.....see here: http://stackoverflow.com/questions/2874537/how-to-make-a-smaller-ratingbar — Opiatefuchs, Feb 19 '16 at 13:46

score 2 · Answer 1 · answered Feb 19 '16 at 13:55

You Can use a custom RatingBar. Following is the code 1. create a file in drawable as custom_ratingbar.xml

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

then use following in your RatingBar :-

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:progressDrawable="@drawable/custom_ratingbar"
    android:numStars="5"
    android:stepSize="0.2"
    android:rating="3.0" />

score 0 · Answer 2 · answered Feb 19 '16 at 13:48

You can create custom style for ratingbar to make it have suitable size:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:minHeight">48dip</item> <!-- your desired size -->
        <item name="android:maxHeight">48dip</item> <!-- your desired size -->
    </style>  
</resources>

then use this style to your rating bar. There is more specific tutorial:http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/.

FlyingPumba · Answer 3 · 2016-08-20T04:52:36.157

I made a custom ratingbar which might help you: SimpleRatingBar.

It features:

Fully working android:layout_width: it can be set to wrap_content, match_parent or abritary dp.
Arbitrary number of stars.
Arbitrary step size.
Size of stars can be controlled exactly or by setting a maximum size.
Customizable colors (border, fill and background of stars).
Customizable size separation between stars.
Customizable border width of stars.
Allows to set OnRatingBarChangeListener
Stars fill can be set to start from left to right or from right to left (RTL language support).
AnimationBuilder integrated in the view to set rating programatically with animation.

Here is a preview of it.

You can find it either in jcenter or in Maven Central. So in your build.gradle file just add to your dependencies:

compile 'com.iarcuschin:simpleratingbar:0.1.+'

I hope it's useful.

Will definitely give it a try next time as that project is over now — Vivek Mishra, Aug 04 '16 at 02:28

Issue styling Rating bar

3 Answers3