Search code examples
androidwidgetandroid-stylesratingratingbar

Android how to increase height and width of star in ratingbar


I am implementing ratingbar and I want to set ratingbar like below attached image but the problem is that when I use match_parent of ratingbar width then more than five star show in ratingbar. Can anyone help me how to implement my rating bar as attached image or suggest me how to implement it. Here is my activity_main

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="gymtrainer.com.ratinbarexample.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="Rate 5 star for RatingBar"
        />


    <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        style="@style/foodRatingBar"
        android:id="@+id/ratingbar_default"
        android:maxWidth="250dp"
        android:numStars="5"
        android:stepSize="0.1"
        />


    <TextView
        android:id="@+id/textView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="show state up checkbox"
        android:textColor="#CC00CC"
        android:textSize="20dp"
        />


</LinearLayout>

Here is my Main Activity.

    public class MainActivity extends Activity {

    RatingBar ratingbar1;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        addListenerOnButtonClick();

    }

    public void addListenerOnButtonClick(){

        final TextView text = (TextView) findViewById(R.id.textView);

        final RatingBar ratingBar_default = (RatingBar)findViewById(R.id.ratingbar_default);

        final Button button = (Button)findViewById(R.id.button1);
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                ratingBar_default.setRating(5);
                text.setText("Rating: "+String.valueOf(ratingBar_default.getRating()));
            }
        });

        ratingBar_default.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener(){
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating,
                                        boolean fromUser) {
                // TODO Auto-generated method stub
                text.setText("Rating: "+String.valueOf(rating));
            }});
    }
}

Here is my style

 <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/star_rating_bar_full</item>
    <item name="android:minHeight">100dip</item>
    <item name="android:maxHeight">100dip</item>
</style>

enter image description here


Solution

  • If you are willing to use a RatingBar different to the Android's default, I'm the creator of: 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 in normal state (border, fill and background of stars and rating bar).
    • Customizable colors in pressed state (border, fill and background of stars and rating bar).
    • Customizable size separation between stars.
    • Customizable border width of stars.
    • Customizable stars corner radius.
    • 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.+'

    In your example, you can use it as:

    <com.iarcuschin.simpleratingbar.SimpleRatingBar
            android:id="@+id/ratingbar_default"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            app:srb_numberOfStars="5"
            app:srb_stepSize="0.1"
            app:srb_starSize="100dp"
            app:srb_borderColor="@color/your_light_green_color"
            app:srb_fillColor="@color/your_light_green_color"
            />
    

    No extra xml files needed :)

    I hope it's useful.