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.
numStars
The number of stars you want to show in the rating barrating
The default value of ratingstepSize
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