Android Widget – Rating Bar

In Android, you can use “android.widget.RatingBar” to display rating bar component in stars icon. The user is able to touch,
drag or click on the stars to set the rating value easily.

In this tutorial, we show you how to use XML to display a rating bar, few textviews and a button. When user click on
the rating bar’s star,the selected rating value will be displayed in the textview. And, if user clicks on the button,
the selected rating value will be displayed as a floating message (toast message).

Open “your.xml” file, add a rating bar component, few textviews and a button

<!--?xml version="1.0" encoding="utf-8"?-->
<!--?xml version="1.0" encoding="utf-8"?-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <textview android:id="@+id/lblRateMe" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Rate Me" android:textappearance="?android:attr/textAppearanceMedium">
    <ratingbar android:id="@+id/ratingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numstars="4" android:stepsize="1.0" android:rating="2.0">
    <button android:id="@+id/btnSubmit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Submit">
    <linearlayout android:id="@+id/linearLayout1" android:layout_width="match_parent" android:layout_height="wrap_content">
        <textview android:id="@+id/lblResult" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Result : " android:textappearance="?android:attr/textAppearanceLarge">
        <textview android:id="@+id/txtRatingValue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:textappearance="?android:attr/textAppearanceSmall">
    </textview></textview></linearlayout>
//The rating bar contains many configurable values. In this case, the rating bar contains 4 stars, each increase 1.0 value,
// so, it contains the minimum of 1.0 (1 star) and maximum value of 4.0 (4 stars). In addition, it made the 2nd star (2.0) selected by default.</button></ratingbar></textview></linearlayout>

Inside activity “onCreate()” method, attach a listener on rating bar, fire when rating value is changed. Another listener on button,
fire when button is clicked. Read the code’s comment, it should be self-explanatory.

public class MainActivity extends Activity {
  private RatingBar ratingBar;
  private TextView txtRatingValue;
  private Button btnSubmit;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    addListenerOnRatingBar();
    addListenerOnButton();
  }
  public void addListenerOnRatingBar() {
    ratingBar = (RatingBar) findViewById(R.id.ratingBar);
    txtRatingValue = (TextView) findViewById(R.id.txtRatingValue);
    //if rating value is changed,
    //display the current rating value in the result (textview) automatically
    ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
        public void onRatingChanged(RatingBar ratingBar, float rating,
            boolean fromUser) {
            txtRatingValue.setText(String.valueOf(rating));
        }
    });
  }
  public void addListenerOnButton() {
    ratingBar = (RatingBar) findViewById(R.id.ratingBar);
    btnSubmit = (Button) findViewById(R.id.btnSubmit);
    //if click on me, then display the current rating value.
    btnSubmit.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MyAndroidAppActivity.this,
                String.valueOf(ratingBar.getRating()),
                    Toast.LENGTH_SHORT).show();
        }
    });
  }
}