Android RatingBar Using Kotlin

In this tutorial, we’ll be discussing and implementing RatingBar in our Android Application using Kotlin.

Android RatingBar

A RatingBar is an extension of the SeekBar(which is an extension of the ProgressBar). It is used to make review/rating UI where the user can drag over the UI except that there is not explicit thumb icon.

A RatingBar has three states: full, empty, partial.
The rating is a float value.

Following are the relevant XML Attributes:

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.

android:rating – This expects a float value. The value here fills that many stars

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.

android:progressTint – The color of the stars filled.

android:progressBackgroundTint – The color of the stars not filled.

android:secondaryProgressTint – The color passed here would add a border on the partially filled star.

android:isIndicator – Setting this to true says that the RatingBar is for display only. You cannot fill the rating.

android:progressDrawable – We pass the drawable for a custom star here.

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.

The OnRatingBarChangeListener interface is implemented and the following Kotlin function needs 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.

Let’s look at the different kinds of RatingBar.

Simple Rating Bar

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

RatingBar 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" />

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.

RatingBar 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" />

Custom Rating Bar

”

Project Structure

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 inside styles.xml :

<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. As shown below:

<?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.

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"
    }
}

The output of the application in action is given below:

This brings an end to this tutorial. You can download the project from the link below: