Dynamic RatingBar in Kotlin

Android RatingBar is a user interface widget which is used to get the rating from the customers or users. It is an extension of SeekBar and Progress Bar that shows star ratings and it allow users to give the rating by clicking on the stars.

In RatingBar, we can set the step size using android:stepSize and it will always return a rating value as floating point number such as 1.0, 2.0, 2.5 etc. By using, android:numStars attribute we can specify the number of stars in RatingBar. RatingBar is used to get ratings form users or customers about the product, movie or hotel experience etc. RatingBar can be created manually or programmatically but we are going to discuss programmatically or dynamically.

Step by Step Implementation

Step 1: Create a new project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note: Select Kotlin as the programming language.

Step 2: Modify the activity_main.xml file

In this file, we use the Constraint Layout and a Linear Layout inside it where we will add the Rating Bar and set its attributes like id, padding etc and it can be accessed in the Kotlin file using id.

activity_main.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:layout_marginTop="32dp"
        android:layout_marginBottom="32dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2">

    </LinearLayout>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rate Me!!!"
        android:textColor="@android:color/background_dark"
        android:textSize="32sp"
        app:layout_constraintBottom_toTopOf="@+id/layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="You Rated : _._"
        android:textColorHint="@color/colorAccent"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Design UI:

Step 3: Creating RatingBar in MainActivity.kt file

First of all, we declare variable ratingBar to create RatingBar and set its attributes using it.

val ratingBar = RatingBar(this)
val layoutParams = LinearLayout.LayoutParams(
    ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
)
ratingBar.layoutParams = layoutParams
ratingBar.numStars = 5

After this, add RatingBar into the Linear Layout using the statements

layout.addView(ratingBar)

MainActivity.kt:

Kotlin

package org.geeksforgeeks.demo

import android.os.Bundle
import android.view.ViewGroup
import android.widget.Button
import android.widget.LinearLayout
import android.widget.RatingBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // Declare UI elements
    private lateinit var layout: LinearLayout
    private lateinit var button: Button
    private lateinit var textView: TextView

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

        // Initialize UI elements by finding their respective IDs
        layout = findViewById(R.id.layout)
        textView = findViewById(R.id.textView)
        button = findViewById(R.id.button)

        // Create RatingBar
        val ratingBar = RatingBar(this)
        val layoutParams = LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT)
            
        ratingBar.layoutParams = layoutParams
        ratingBar.numStars = 5

        // Add RatingBar and button to LinearLayout
        layout.addView(ratingBar)

        // Set click listener for the button
        button.setOnClickListener {
        
            // Display the rating value inside the
            // TextView when the button is clicked
            textView.text = buildString {
                append("You Rated : ")
                append(ratingBar.rating)
            }
        }
    }
}

Output:

Create Quiz