Android Custom RatingBar Example

android.widget.RatingBar is used to represent rating bar in android applation. It is subclass of android.widget.ProgressBar, so it behaves similar with ProgressBar. This article will tell you how to use RatingBar in android, it also show you example about how to customize RatingBar background, stars and it’s behaviour.

1. RatingBar Properties And Methods.

  1. numStars : Number of  stars that will be displayed.
  2. stepSize : Number of stars should be changed at least for each progress increase.
  3. rating : Current rating number (number of stars.).
  4. isIndicator : Boolean value, true means can not modify it use finger, false means user can modify it use finger.
  5. setOnRatingBarChangeListener : Set a listener responsive to rating number changed event.

2. RatingBar Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/3MHCo3JBHoM

This example include below files.

  1. seekbar_unpressed_thumb : This is an gray image used as custom rating bar’s background.
  2. seekbar_pressed_thumb : This is an gray image used as custom rating bar’s progress drawable.
    You can go to Android SeekBar Example to get above two images.
  3. rating_bar_layer.xml : This is a layer-list drawable used as rating bar progressDrawable property’s value.
  4. activity_rating_bar.xml : Layout xml file includes all UI components.
  5. RatingBarActivity.java : Contain logic java code such as update rating bar progress automatically, show rating bar info etc.

3. rating_bar_layer.xml

Saved in app / res / drawable folder. Please note the item order in this file.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background"
        android:drawable="@drawable/seekbar_unpressed_thumb"
        android:bottom="7dp"/>

    <item android:id="@android:id/secondaryProgress"
           android:drawable="@drawable/seekbar_unpressed_thumb"
           android:bottom="7dp"/>

    <item android:id="@android:id/progress"
        android:drawable="@drawable/seekbar_pressed_thumb"
        android:bottom="7dp"/>

</layer-list>

4. activity_rating_bar.xml

Saved in app / res / layout folder.

Please Note: RatingBar’s android:layout_width property’s value should be “wrap_content”, do not specify it to “match_parent”, otherwise it will display more stars than specified.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:layout_editor_absoluteY="8dp"
    tools:layout_editor_absoluteX="8dp">

    <!--layout_width's value can only be wrap_content. -->
    <RatingBar
        android:id="@+id/ratingBarDefault"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:stepSize="0.5"/>
    <TextView
        android:id="@+id/ratingBarDefaultInfo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"/>

    <RatingBar
        android:id="@+id/ratingBarCustom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="8"
        android:stepSize="1"
        android:progressDrawable="@drawable/rating_bar_layer"/>
    <TextView
        android:id="@+id/ratingBarCustomInfo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
</LinearLayout>

5. RatingBarActivity.java

package com.dev2qa.example;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.widget.RatingBar;
import android.widget.TextView;

public class RatingBarActivity extends AppCompatActivity {

    // Handle first rating bar message.
    Handler defaultRatingBarHandler ;

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

        setTitle("dev2qa.com - RatingBar Example");

        // Get first rating bar.
        final RatingBar ratingBarDefault = (RatingBar)findViewById(R.id.ratingBarDefault);

        // First rating bar can not be modified manually.
        ratingBarDefault.setIsIndicator(true);

        // Set first rating bar's listener.
        ratingBarDefault.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            TextView ratingBarDefaultInfo = (TextView)findViewById(R.id.ratingBarDefaultInfo);
            @Override
            public void onRatingChanged(RatingBar ratingBar, float ratingValue, boolean fromUser) {
                int currentProgress = ratingBarDefault.getProgress();
                ratingBarDefaultInfo.setText("Current start number is " + ratingValue + ", Progress number is " + currentProgress);
            }
        });

        defaultRatingBarHandler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                if(msg.what==1) {
                    float currRating = ratingBarDefault.getRating();
                    if(currRating==ratingBarDefault.getNumStars())
                    {
                        currRating = 0;
                    }
                    float stepSize = ratingBarDefault.getStepSize();

                    float newRating = currRating + stepSize;
                    ratingBarDefault.setRating(newRating);
                }
            }
        };

        new Thread(){
            @Override
            public void run() {
                try {
                    while(true) {
                        Message msg = new Message();
                        msg.what = 1;
                        defaultRatingBarHandler.sendMessage(msg);
                        Thread.sleep(1000);
                    }
                }catch (Exception ex)
                {
                    ex.printStackTrace();
                }
            }
        }.start();


        // Second rating bar is customized.
        final RatingBar ratingBarCustom = (RatingBar)findViewById(R.id.ratingBarCustom);
        ratingBarCustom.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            TextView ratingBarCustomInfo = (TextView)findViewById(R.id.ratingBarCustomInfo);
            @Override
            public void onRatingChanged(RatingBar ratingBar, float ratingValue, boolean fromUser) {
                int currentProgress = ratingBarCustom.getProgress();
                ratingBarCustomInfo.setText("Current start number is " + ratingValue + ", Progress number is " + currentProgress);
            }
        });
    }
}

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.