Android Rating Bar Example

In this tutorial, it shows you on how to use XML to display a rating bar, few textviews and a button. When the 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).
How it works?
1. Open “res/layout/main.xml” file, add a rating bar component, few textviews and a button.

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

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

</LinearLayout>

2. 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.

package isourcecode.blogspot.com;

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 SampleBlogActivity extends Activity {

/** Called when the activity is first created. */

RatingBar ratingBar;

TextView txtRatingValue;

Button btnSubmit;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

ratingBar = (RatingBar) findViewById(R.id.ratingBar);

txtRatingValue = (TextView) findViewById(R.id.txtRatingValue);

btnSubmit = (Button) findViewById(R.id.btnSubmit);

ratingBar.setOnRatingBarChangeListener(new

OnRatingBarChangeListener() {

public void onRatingChanged(RatingBar ratingBar,

float rating, boolean fromUser) {

txtRatingValue.setText(String.valueOf(rating));

}

});

btnSubmit.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(SampleBlogActivity.this,

String.valueOf(ratingBar.getRating()),

Toast.LENGTH_LONG).show();

}

});

}

3. Run the application.

Touch on the 4th star, and click on the submit button, the current selected value is displayed as floating message.

Programming Language: Java + XML
Programming IDE: Eclipse

Share this

Labels