Android Rating Bar Example

In this article, I will show you an example of Android’s RatingBar. A rating bar shows a rating in stars. The user can touch/drag or use arrow keys to set the rating when using the default size RatingBar.

Other than default, we have other styles too which we will see in this article.

Main Layout

Some important attributes of rating bar.

1. numStars The number of stars you want to show in the rating bar
2. rating The default value of rating
3. stepSize This is the unit of the size you can increase or decreases as you drag the rating bar.

welcome.xml:

<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.RatingBarExampleActivity" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="4"
        android:rating="2"
        android:stepSize=".5" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/rating_result_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rating_result" />

        <TextView
            android:id="@+id/rating_result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>


</LinearLayout>

Main Activity

In the main activity, you find the rating bar widget and set its value to the rating_result text. This would be the RatingBar’s default value. We also attach a listener to rating bar using setOnRatingBarChangeListener. In OnRatingBarChangeListener.onRatingChanged, we re-set the rating_result value.

RatingBarExampleActivity:

package com.javarticles.android;


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

public class RatingBarExampleActivity extends Activity {
	private RatingBar ratingBar;
	private TextView ratingValue;
	
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);
		
		ratingBar = (RatingBar) findViewById(R.id.ratingBar);
		ratingValue = (TextView) findViewById(R.id.rating_result);
		ratingValue.setText(String.valueOf(ratingBar.getRating()));
		
		ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
			
			@Override
			public void onRatingChanged(RatingBar ratingBar, float rating,
					boolean fromUser) {
				ratingValue.setText(String.valueOf(rating));
			}
		});
	}
}

Run the application

When you start the app, the rating widget shows up with the default rating.

Let’s change the rating to 3.5. The listener attached to the rating bar updates the text value showing the rating result.

Other styles

Let’s add two more styles of rating bars. The smaller RatingBar style ( ratingBarStyleSmall) and the larger indicator-only style (ratingBarStyleIndicator). Both of them do not support user interaction and should only be used as indicators. If it is an indicator type, you can also use isIndicator and set it to true.

welcome.xml:

<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.RatingBarExampleActivity" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="4"
        android:rating="2"
        android:stepSize=".5" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="18dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/rating_result_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rating_result" />

        <TextView
            android:id="@+id/rating_result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

    <TextView
        android:id="@+id/rating_other_styles"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/rating_other_styles"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/rating_small_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/rating_small" />

    <RatingBar
        android:id="@+id/ratingBarSmall"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating=".5" />

    <TextView
        android:id="@+id/rating_indicator_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/rating_indicator" />

    <RatingBar
        android:id="@+id/ratingBarIndicator"
        style="?android:attr/ratingBarStyleIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="4" />

</LinearLayout>

Run the application

We have added ‘Other Styles’ of rating bars. Both the rating bars, the small styled and indicator type, only indicate the rating. You can’t change them.

Download the source code

This was an example about Android’s RatingBar. You can download the source code here: ratingExample.zip