Android RatingBar using Kotlin

In this tutorial, we’ll discuss and implement RatingBar in our Android app using Kotlin.

What is Android RatingBar?

Android RatingBar is an extension of the SeekBar. SeekBar is an extension of the ProgressBar.

Rating Bar is used to create a review/rating UI where the user can drag over the UI except that there is not an explicit thumb icon.

RatingBar States

A RatingBar has three states: full, empty, and partial.

The rating of a rating bar is a float value.

Rating Bar XML Attributes

The important XML attributes of the rating bar are:

1. android:numStars – The number of rating stars you wish to show on the screen. If you set the RatingBar width to match parent, this attribute would be ignored and the number of stars would be 10.
2. android:rating – This expects a float value. The value here fills that many stars.
3. android:stepSize – The size of each star. By default, this is 0.5. Setting it to 1 can’t fill the star partially anymore. This attribute should be between 0 and 1.
4. android:progressTint – The color of the stars filled.
5. android:progressBackgroundTint – The color of the stars not filled.
6. android:secondaryProgressTint – The color passed here would add a border on the partially filled star.
7. android:isIndicator – Setting this to true says that the RatingBar is for display only. You cannot fill the rating.
8. android:progressDrawable – We pass the drawable for a custom star here.
9. style – Used to set a custom/built-in style on the RatingBar. Besides the default Style, there are two more: Small, Indicator. We can create our own custom style as well.

Kotlin Code to Create Rating Bar

The OnRatingBarChangeListener interface is implemented and the following Kotlin function has to be overridden.

override fun onRatingChanged(p0: RatingBar?, p1: Float, p2: Boolean)

The boolean value is true if the rating is changed by the user.

Rating Bar XML Examples

Let’s look at the different kinds of RatingBar using XML code.

1. Simple Rating Bar

<RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="1"
        android:stepSize="1" />

2. Rating Bar with Background and Secondary Progress Tint

<RatingBar
        android:id="@+id/ratingBar3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:numStars="3"
        android:secondaryProgressTint="@android:color/white"
        android:stepSize="0.2" />

3. RatingBar with Progress and Secondary Progress Tint

<RatingBar
        android:id="@+id/ratingBar4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/black"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="1"
        android:stepSize="0.5" />


    <RatingBar
        android:id="@+id/ratingBar5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/white"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="2.5"
        android:secondaryProgressTint="@color/colorPrimaryDark"
        android:stepSize="0.5" />

By default, the secondary progress tint is colorAccent set in the styles.xml.

4. Rating Bar Small Style

<RatingBar
        android:id="@+id/ratingBar7"
        style="@android:style/Widget.Material.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:isIndicator="false"
        android:numStars="5"
        android:rating="1"
        android:stepSize="0.5" />

5. Custom Rating Bar

Android RatingBar Kotlin Project Structure

1. XML Layout Code

The code for the layout activity_main.xml is given below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="32sp"/>

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="1"
        android:stepSize="1" />

    <RatingBar
        android:id="@+id/ratingBar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numStars="5" />


    <RatingBar
        android:id="@+id/ratingBar3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:numStars="3"
        android:rating="0.4"
        android:secondaryProgressTint="@android:color/white"
        android:stepSize="0.2" />


    <RatingBar
        android:id="@+id/ratingBar4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/black"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="1"
        android:stepSize="0.5" />


    <RatingBar
        android:id="@+id/ratingBar5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/white"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="2.5"
        android:secondaryProgressTint="@color/colorPrimaryDark"
        android:stepSize="0.5" />

    <RatingBar
        android:id="@+id/ratingBar6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="true"
        android:numStars="5"
        android:rating="0.7"
        android:stepSize="0.7" />


    <RatingBar
        android:id="@+id/ratingBar7"
        style="@android:style/Widget.Material.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:isIndicator="false"
        android:numStars="5"
        android:rating="1"
        android:stepSize="0.5" />


    <RatingBar
        android:id="@+id/ratingBar8"
        style="@style/CustomRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/holo_orange_dark" />

    <RatingBar
        android:id="@+id/ratingBar9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/black"
        android:progressDrawable="@drawable/ic_action_happy"
        android:progressTint="@color/colorPrimary"
        android:rating="1" />


</LinearLayout>

A Custom RatingBar needs to set the progressDrawable and its other attributes in the styles.xml otherwise it won’t work. The last RatingBar won’t work in the above layout.

Add the following code in the styles.xml file.

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

We’ve created a custom_ratingbar.xml drawable as well.

<?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/ic_action_happy"
            android:tint="?attr/colorControlNormal" />
    </item>
    <item android:id="@android:id/secondaryProgress">
        <bitmap
            android:src="@drawable/ic_action_happy"
            android:tint="?attr/colorControlHighlight" />
    </item>
    <item android:id="@android:id/progress">
        <bitmap
            android:src="@drawable/ic_action_happy"
            android:tint="?attr/colorControlActivated" />
    </item>
</layer-list>

Note: On the Bitmap android:src you cannot set a vector image drawable.

You can find the image asset for the custom star with the project source code at the end of this tutorial.

2. Kotlin Activity Code

The code for the MainActivity.kt file is given below.

package net.androidly.androidlyratingbar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.RatingBar
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity(), RatingBar.OnRatingBarChangeListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)



        ratingBar1.onRatingBarChangeListener = this
        ratingBar2.onRatingBarChangeListener = this
        ratingBar3.onRatingBarChangeListener = this
        ratingBar4.onRatingBarChangeListener = this
        ratingBar5.onRatingBarChangeListener = this
        ratingBar6.onRatingBarChangeListener = this
        ratingBar7.onRatingBarChangeListener = this
        ratingBar8.onRatingBarChangeListener = this
        ratingBar9.onRatingBarChangeListener = this

    }

    override fun onRatingChanged(p0: RatingBar?, p1: Float, p2: Boolean) {

        textView.text = "$p1"
    }
}

Output: