android ratingbar

Android Ratingbar Example | Kotlin

In this tutorial, we’ll learn about Android Rating Bar. RatingBar is an Android widget that displays a rating scale with star icons. You may have encountered this RatingBar when an application asks you to rate it. In Android, creating a rating is pretty simple. To make a Rating Bar.

What is the rating bar?

A RatingBar is a SeekBar and ProgressBar extension that displays a star rating. When using the default size RatingBar, the user can set the rating by touching/dragging or using the arrow keys.

XML AttributeDescription
android: idit is used to identify the control in a unique way.
android: ratingIt is used to specify how many stars should be displayed.
android: numStarsIt is used to establish the rating bar’s default rating value./by-default numStars is 5


What is the purpose of the rating bar?

RatingBar is a tool that allows users to rate products. The getRating() function is used in the following code to calculate the rating of the products. The getRating() function returns a value of type double.

Preview: Ratingbar Example

What is the step size in the Android RatingBar?

It is a SeekBar and ProgressBar extension that displays star ratings and allows users to rate them by clicking on the stars. We can set the step size in RatingBar using android: stepSize, and it will always return a rating value as a floating-point number such as 1.0, 2.0, 2.5, and so on.

simply follow the steps to create a Ratingbar:

Step 1: Create a New Project in Android studio.

Step 2: Now open an activity main.xml file from the /res/layout folder and write the following code. In the XML layout file, we create one RatingBar control, one Button, and one TextView, and an imageview, as seen below.

<?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: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="432dp"
        android:backgroundTint="@color/black"
        android:background="@color/white"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />

    <TextView
        android:id="@+id/Result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="48dp"
        android:textSize="27sp"
        android:textColor="@color/black"
        app:layout_constraintBottom_toTopOf="@+id/RatingBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="58dp"
        android:onClick="Rate"
        android:text="Rate Us!!"
        android:textColor="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        android:backgroundTint="@color/teal_200"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/RatingBar" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/logo" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: We need to load the XML layout resource from our activity onCreate() callback method once we’ve finished creating the layout with appropriate controls. To do so, open the file MainActivity.kt and write the code as shown below.

The Android framework will often call the onCreate() callback method during the start of our activity to obtain the required layout for an activity.

package com.sagar.ratingbar

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


class MainActivity : AppCompatActivity() {
    var rate: RatingBar? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        rate = findViewById<RatingBar>(R.id.RatingBar)

        val Rating = rate!!.progressDrawable as LayerDrawable

        Rating.getDrawable(2).setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP)
    }

    fun Rate(view: View?) {

        val t = findViewById<TextView>(R.id.Result)
        t.text = "You Rated :" + rate!!.rating.toString()
    }
}

This is how we may use the RatingBar control in Android apps to display ratings based on our needs.

  • We hope that this guide will assist you in quickly creating a Rating Bar in Android. If you have any problems, please post them in the comments section, and we will gladly assist you.

This Post Has One Comment

Leave a Reply