Android: RatingBar with Indicator Example

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

• JDK 6 (Java SE 6)
• Eclipse Indigo IDE for Java EE Developers (3.7.1)
• Android SDK 4.0.3 / 4.1 Jelly Bean
• Android Development Tools (ADT) Plugin for Eclipse (ADT version 20.0.0)
• Refer this link to setup the Android development environment

Prerequisites

• HelloWorld Example
• Simple rating bar in Android

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.

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.