Android: RatingBar with Indicator Example

19 September 2012 By Nithya Vasudevan 21,111 views 3 Comments
19 Flares Twitter 0 Facebook 13 Google+ 6 19 Flares ×

Project Description

  • In the previous Android 4 rating bar example here, we created a simple rating bar and accepted user rating and displayed the rating as a Toast message.
  • In this Android RatingBar tutorial, we will create a rating bar with indicator using android.widget.RatingBar defined in XML layout file and implement OnRatingBarChangeListener to accept user rating, calculate the total ratings and display it in indicator rating bar.

Environment Used

Prerequisites

Android Project

Create an Android project and name it as “InteractiveRatingBar“.

strings.xml

Open res/values/string.xml and replace it with following content.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, InteractiveRatingBarActivity!</string>
    <string name="app_name">InteractiveRatingBar</string>
</resources>

XML layout files

This application uses XML layout file (main.xml) to display the rating bar.

Open main.xml file in res/layout and copy the following content.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RatingBar
        android:id="@+id/getRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:stepSize="1.0" />

    <RatingBar
        android:id="@+id/setRating"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/getRating"
        android:isIndicator="true"
        android:numStars="5"
        android:stepSize="0.1" />

    <TextView
        android:id="@+id/countText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/getRating"
        android:layout_toRightOf="@+id/setRating"
        android:paddingLeft="10dp" />
</RelativeLayout>

This layout file creates two Android RatingBar – one for accepting user rating and other for displaying the overall ratings.

android:numStarsThe number of stars (or rating items) to show
android:stepSizeThe step size of the rating
android:isIndicatorWhether this rating bar is an indicator (and non-changeable by the user)
style=”?android:attr/ratingBarStyleSmall”Creates small indicator RatingBar style

Activity

In src folder, create a new Class and name it as “InteractiveRatingBarActivity” in the package “com.theopentutorials.android.views” and copy the following code.

package the.opentutorials.android.views;

import java.text.DecimalFormat;
import android.app.Activity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class InteractiveRatingBarActivity extends Activity implements
		OnRatingBarChangeListener {
	RatingBar getRatingBar;
	RatingBar setRatingBar;
	TextView countText;
	int count;
	float curRate;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		findViewsById();

		setRatingBar.setRating(curRate);
		getRatingBar.setOnRatingBarChangeListener(this);
	}   

	private void findViewsById() {
		getRatingBar = (RatingBar) findViewById(R.id.getRating);
		setRatingBar = (RatingBar) findViewById(R.id.setRating);
		countText = (TextView) findViewById(R.id.countText);
	}

	public void onRatingChanged(RatingBar rateBar, float rating,
			boolean fromUser) {
		DecimalFormat decimalFormat = new DecimalFormat("#.#");
		curRate = Float.valueOf(decimalFormat.format((curRate * count + rating)
				/ ++count));
		Toast.makeText(InteractiveRatingBarActivity.this,
				"New Rating: " + curRate, Toast.LENGTH_SHORT).show();
		setRatingBar.setRating(curRate);
		countText.setText(count + " Ratings");
	}
}

Here, in onRatingChanged() method, we get the user’s rating, calculate the overall rating and total no. of ratings and set it in the rating bar marked as indicator.

AndroidManifest.xml

Define the activity in AndroidManifest.xml file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="the.opentutorials.android.views"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".InteractiveRatingBarActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output

Run your application

Project Folder Structure

The complete folder structure of this example is shown below.

Tags: , , , , , , , , ,

  • ashish

    Nicw Work

  • Sakthivel A

    Nice tutorial…

  • jupiter.at

    you can change rating when ratingbar style is ratingBarStyleSmall?