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.
numStarsThe number of stars you want to show in the rating barratingThe default value of ratingstepSizeThis 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.
Rating Widget
Let’s change the rating to 3.5. The listener attached to the rating bar updates the text value showing the rating result.
Change Rating
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.
Rating Bars with Fixed Ratings
Download the source code
This was an example about Android’s RatingBar. You can download the source code here: ratingExample.zip
