ZOFTINO.COM android and web dev tutorials

Android RatingBar and Custom RatingBar Example

Android RatingBar widget allows you to provide rating feature in your application. RatingBar is a subclass of progress bar.

In this post, you will learn RatingBar styles, custom material styles, changing rating bar colors, rating bar event handling, and custom rating bar with custom image.

Android RatingBar Example

To add RatingBar to layout, use RatingBar element as shown below and define properties as explained in the following section. Below constraint layout contains RatingBar element.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RatingBar
        android:id="@+id/ratingBar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:rating="3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

Below screen shows output of above layout with default rating bar style when application theme is set to app compact material Theme.AppCompat.

android rating bar example

Android RatingBar Propterties

Some of the important properties of rating bar are described below.

  • numStars : is used to set number of stars to be displayed in rating bar.
  • rating : is used to set default rating, specifies the number of stars in select state.
  • stepSize : is used to set number of steps or touches it takes to fill all stars.
  • isIndicator : is used to indicate whether rating bar can be changed or is display only.
  • progressDrawable : is used to set drawable for rating bar background for unselected and selected states.

RatingBar Style and Material Design

In your application, to have all android UI components which follow material design, you need to use one of app compact material themes. Above screen shows RatingBar with default material style of application material theme Theme.AppCompat.

RatingBar can be customized at application or individual level by inheriting material styles.

Below example style is a custom material style which changes colors for all UI components including rating bar throughout the application when it is used as application them. To change rating bar star color, set colorAccent and colorControlNormal properties to desired colors.

<style name="AppThemeRatingBar" parent="Theme.AppCompat">
    <item name="colorAccent">#6200ea</item>
    <item name="android:colorControlNormal">#f9a825</item>
</style>
 
android rating bar custom color example

To change style of an individual rating bar, you need to define custom style which inherits rating bar materil style Widget.AppCompat.RatingBar as shown below and apply it to rating bar using theme attribute. Other app compact RatingBar material styles include Widget.AppCompat.RatingBar.Indicator and Widget.AppCompat.RatingBar.Small.

<style name="MyRatingBar" parent="Widget.AppCompat.RatingBar">
    <item name="colorAccent">#6200ea</item>
    <item name="android:colorControlNormal">#f9a825</item>
</style>

To use custom style of RatingBar throughout the application, default rating bar style of your application theme needs to be overwritten by setting ratingBarStyle property as shown below.

<style name="AppThemeRatingBar" parent="Theme.AppCompat">
    <item name="ratingBarStyle">@style/MyRatingBar</item>
</style>

Small RatingBar

Android provides small RatingBar style Widget.AppCompat.RatingBar.Small. The only difference between normal rating bar style and small rating bar style is star size of ranting bar.

Below xml shows applying small rating bar style to RatingBar using style attribute.

<RatingBar
    android:id="@+id/ratingBar3"
    . . .
    style="@style/Widget.AppCompat.RatingBar.Small"/>

Below screen shows the difference between small and normal rating bar styles.

android small rating bar example

Non Changeable RatingBar

To just show current rating and not give an option to let user change rating in your application, you can use isIndicator. Setting isIndicator to true makes rating bar non changeable or readonly. You can even use Android provided style Widget.AppCompat.RatingBar.Indicator to display read only rating bar.

<RatingBar
    android:id="@+id/ratingBar4"
    . . .
    style="@style/Widget.AppCompat.RatingBar.Indicator"/>

RatingBar Change Listener

You can handle rating bar events by setting RatingBar change listener. To do that, you need to first define RatingBar change listener by implementing onRatingChanged method of RatingBar.OnRatingBarChangeListener and then add it to RatingBar by calling setOnRatingBarChangeListener method on RatingBar.

To get the user selected rating or current rating value, you can either use rating value passed to onRatingChanged method or get it from RatingBar by calling getRating method.

Below code shows defining RatingBar change listener and adding it to rating bar.

RatingBar ratingBar = (RatingBar)findViewById(R.id.ratingBar2);

ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener(){
   @Override
   public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {

     Toast.makeText(RatingBarActivity.this,
                    "Rating changed, current rating "+ ratingBar.getRating(), 
				Toast.LENGTH_SHORT).show();
   }
});

Custom RatingBar with Custom Rating Image

If you want to use a different image than star for RatingBar, you can do so. First, you need to save the image you want to use it for RatingBar, in res/drawable folder. Then define drawable xml setting the RatingBar background and RatingBar progress drawables as shown below and save it in res/drawable folder.

For our example, I used thumb-up image for rating bar background and also notice that tint color of our custom RatingBar background and progress can be configure by setting colorControlNormal and colorControlActivated properties.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <bitmap
            android:src="@drawable/thumb_up"
            android:tint="?attr/colorControlNormal" />
    </item>
    <item android:id="@android:id/secondaryProgress">
        <bitmap
            android:src="@drawable/thumb_up"
            android:tint="?attr/colorControlActivated" />
    </item>
    <item android:id="@android:id/progress">
        <bitmap
            android:src="@drawable/thumb_up"
            android:tint="?attr/colorControlActivated" />
    </item>
</layer-list>

Below style shows how to use custom rating bar drawable defined above.

<style name="MyRatingBarTwo" parent="Widget.AppCompat.RatingBar">
<item name="android:progressDrawable">@drawable/custom_ratingbar</item>
<item name="colorControlNormal">#f57c00</item>
<item name="colorControlActivated">#c51162</item>
</style>

Below screen shot shows custom rating bar after applying above custom style to it using style and theme attributes.

android custom rating bar example

You can change the size of rating bar star or any rating image you are using. For that, you need to get the image of desired size, save it in drawable folder and use it in your custom rating bar drawable xml.

You can download material icons of different sizes which you can use for RatingBar from https://github.com/google/material-design-icons.