Android | Creating a RatingBar

Last Updated : 13 Feb, 2025

RatingBar in Android is used to display star-based ratings, commonly seen in applications for reviews and feedback. It allows users to set ratings and returns the rating as a float value for eg. 1.5, 3.0, 4.5, etc. To get the rating value, we use the .rating function in Kotlin and .getRating() function in Java. In this article, we will demonstrate how to implement rating bar in both Java and Kotlin.

Key Features

Displays a star rating system.
Allows users to input ratings in fraction.
Can be customized in terms of appearance and behavior.
Supports event listeners for handling rating changes.

Customization

To customise the Rating bar, use the following method:

val stars = ratingBar.progressDrawable as LayerDrawable
stars.getDrawable(2).setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP)

The .setColorFilter() method is used to set a custom color to the Rating Bar.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

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

Step 2: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the below code to it.

activity_main.xml:

XML

<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/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:layout_marginBottom="32dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

Design UI:

Step 3: Working with the MainActivity file

Navigate to app > java > your app's package name > MainActivity file and add the code below. Comments are added in the code to get to know in detail.

MainActivity.java

package org.geeksforgeeks.demo;

import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.LayerDrawable;
import android.os.Bundle;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    // Declare UI elements
    private RatingBar ratingBar;
    private Button button;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        // Set click listener for the button
        button.setOnClickListener(view -> {
            // Display the rating value inside the TextView when the button is clicked
            textView.setText("You Rated : " + ratingBar.getRating());
        });

        // Change the color of the stars in the RatingBar
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        // Change the filled stars to green
        stars.getDrawable(2).setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP);
    }
}

MainActivity.kt

package org.geeksforgeeks.demo

import android.graphics.Color
import android.graphics.PorterDuff
import android.graphics.drawable.LayerDrawable
import android.os.Bundle
import android.widget.Button
import android.widget.RatingBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // Declare UI elements
    private lateinit var ratingBar: RatingBar
    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
        ratingBar = findViewById(R.id.ratingBar)
        textView = findViewById(R.id.textView)
        button = findViewById(R.id.button)

        // 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)
            }
        }

        // Change the color of the stars in the RatingBar
        val stars = ratingBar.progressDrawable as LayerDrawable
        // Change the filled stars to green
        stars.getDrawable(2).setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP)
    }
}

Output:

RadioGroup in Android

AnushkaKhattri

Improve

Article Tags :

Practice Tags :