Learn Mobile App Development: Use Rating Bar in Android

Need to take user rating for your app? Rating bar offers a solution for you. You can use “android.widget.RatingBar” to render rating bar component in the form of star icon. The user can touch, drag or click on the stars to set the rating value.
In this tutorial, we shall learn to use XML to display a rating bar on screen, some textviews and a button. When a user clicks on the rating bar’s star, the set rating value will be displayed in the textview beneath the bar and when the button is clicked, the set rating value will be displayed as a toast message.

1. Add Rating Bar

Open the main.xml file, add a rating bar, 3 textviews and a button.

File: res/layout/main.xml


<?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:gravity="center_horizontal"



    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="5"



        android:rating="5.0"



        android:stepSize="1.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="5.0"



            android:textAppearance="?android:attr/textAppearanceSmall" />

   
</LinearLayout>




</LinearLayout>

Note:

The rating bar has many configurable parameters. Here, the rating bar contains a total of 5 stars, each incrementing by a value of 1.0. Hence, it has a minimum value of 1.0 (1 star) and a maximum value of 5.0 (5 stars). In addition, the value of 5.0 (5 star) is selected by default.

2. Java Code

Attach a listener on rating bar inside the activity “onCreate()” method which should be called when rating value is changed. Another listener should be attached on the button which should fire when the button is clicked. The code and the comments below should be self-explanatory.

File : Main.java


package com.endeavour.tutorial;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.RatingBar;

import android.widget.RatingBar.OnRatingBarChangeListener;

import android.widget.TextView;

import android.widget.Toast;




public class Main 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(Main.this, "Rating :" + String.valueOf(ratingBar.getRating()),

           Toast.LENGTH_SHORT).show();

        }

       });

 
}

}