Android Rating Bar Example


             Rating bar is used to accept the user ratings. Rating bar shows number of stars in which the user can touch,drag to set the value. Android gives direct way to create the rating bars using <RatingBar> in the xml layout file.

Example:

<RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="28dp" />



This will create a rating bar with all default values.

There are few important properties that can be used. They are listed below;
XML layout property
Java equivalent method
Description
android:isIndicator
setIsIndicator(boolean)
This takes boolean value 'true' or 'false'. If this propery is set to 'true' then the rating bar will be non-changeable by the user. In other words the rating bar will act like an indicator.
android:numStars
setNumStars(int numStars)
This takes int value which indicates the number of stars to be displayed in the rating bar.
android:rating
setRating(float rating)
This takes a float value input which will be the default rating to be displayed when the rating bar is loaded for the first time.
android:stepSize
setStepSize(float stepSize)
This takes a float value which is the step size of rate increase/decrease. For example, if we set step size to 1.0 then the rating values will be increased/decreased by 1

Adding callback function:
We need to implement the interface OnRatingBarChangeListener to add callback functions to the rating bar.
RatingBar.OnRatingBarChangeListener is a callback that notifies clients when the rating has been changed. This includes changes by the user through a touch  or other events and programmatic changes.

This has an abstract methos onRatingChanged() that needs to be implemented in out application.

public abstract void onRatingChanged (RatingBar ratingBar, float rating, boolean fromUser)

The parameters are;
ratingBar The RatingBar whose rating has changed.
rating The current rating.
fromUser  True if the rating change was initiated by a user's touch or other events.

Sample application:

The sample application has one rating bar which will simply display the user's rating in the layout.

Layout file:
activity_main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="28dp" />

    <TextView
        android:id="@+id/rating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/ratingBar1"
        android:layout_below="@+id/ratingBar1" />

</RelativeLayout>


Main activity java class:
MainActivity.java


package com.example.ratingbar;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;

/**
 * Demonstrates how to create, use Rating bar in android application. <br/>
 * Shows how to get value of the rating bar, how to add listener. <br/>
 * 
 * @author Vienna <br/>Aug 24 2013
 * @version 1.0
 */
public class MainActivity extends Activity implements OnRatingBarChangeListener {

 /**
  * Rating bar instance
  */
 RatingBar ratingBar;
 /**
  * Customized Rating text
  */
 TextView ratingText;

 /**
  * @see android.app.Activity#onCreate(android.os.Bundle)
  */
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ratingText = (TextView) findViewById(R.id.rating);
  ((RatingBar) findViewById(R.id.ratingBar1))
    .setOnRatingBarChangeListener(this);
 }

 /**
  * @see android.app.Activity#onCreateOptionsMenu(android.view.Menu)
  */
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

 /**
  * Notification that the rating has changed.
  * 
  * @see android.widget.RatingBar.OnRatingBarChangeListener#onRatingChanged(android.widget.RatingBar,
  *      float, boolean)
  */
 @Override
 public void onRatingChanged(RatingBar ratingBar, float rating,
   boolean fromTouch) {
  final int numStars = ratingBar.getNumStars();
  ratingText.setText(rating + "/" + numStars);
 }
}


Output:



Source code of this application:
RatingBar.zip




Reactions:

0 comments :

Post a Comment