In this tutorial, we’ll discuss and implement RatingBar in our Android app using Kotlin.
Table of Contents
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:
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.
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: