RatingBar in Android Studio

In Android, RatingBar is an extension of SeekBar and ProgressBar which shows the rating in stars. RatingBar is a subclass of AbsSeekBar class. The user has to touch and drag to the left and right to set the RatingBar.

In this tutorial, We will show how to display RatingBar in Android Studio. When the user submits the rating, how to take it and say it in Toast Message or Text Field.

RatingBar in Android Studio Tutorial:

1. Create a new project in Android Studio File ⇒ Blank Activity

2. Open the Activity_main.xml file and copy the below code

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="195dp"
        android:layout_height="91dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="72dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:srcCompat="@drawable/car" />

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="8dp"
        android:theme="@style/RatingBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.496"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="72dp"
        android:layout_marginEnd="8dp"
        android:text="SUBMIT"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ratingBar" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="8dp"
        android:fontFamily="cursive"
        android:text="Rate This Car"
        android:textSize="36sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

3. Now you have to add the Drawable Resource File in Drawable Folder and name the file as car.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportWidth="24" android:viewportHeight="24">
    <path android:fillColor="#FF3A00" android:pathData="M16,6L15,6.75L17.5,10H13.5V8.5H12V10H3C1.89,10 1,10.89 1,12V15H3A3,3 0 0,0 6,18A3,3 0 0,0 9,15H15A3,3 0 0,0 18,18A3,3 0 0,0 21,15H23V12C23,10.89 22.11,10 21,10H19L16,6M6,13.5A1.5,1.5 0 0,1 7.5,15A1.5,1.5 0 0,1 6,16.5A1.5,1.5 0 0,1 4.5,15A1.5,1.5 0 0,1 6,13.5M18,13.5A1.5,1.5 0 0,1 19.5,15A1.5,1.5 0 0,1 18,16.5A1.5,1.5 0 0,1 16.5,15A1.5,1.5 0 0,1 18,13.5Z"/>
</vector>

4. Open the file style.xml and here we have to add RatingBar Style.

colorControlNormal – The color applied to RatingBar in a normal state where the user has not dragged the RatingBar.

colorControlActivated – The color applied to RatingBar in the activated state where the user has dragged the RatingBar.

<style name="RatingBar" parent="Theme.AppCompat">
    <item name="colorControlNormal">#5C5B5B</item>
    <item name="colorControlActivated">#FFC107</item>
</style>

5. Once you have done the above step, open Mainactivity.java File and do the following changes.

package androidhire.com.ratingbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    RatingBar ratingBar;
    Button button;

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

        ratingBar = findViewById(R.id.ratingBar);
        button = findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                float ratingcount = ratingBar.getRating();

                Toast.makeText(getApplicationContext(),"Rating is :" +ratingcount,Toast.LENGTH_LONG).show();
            }
        });
    }
}

Some Tips:

Consistency in UI: Make sure the RatingBar fits well with your app’s design. It should be easy to spot and use.
Feedback: Consider providing immediate feedback when a user selects a rating. It could be a simple toast message or saving the rating to a database.
Testing: Test the RatingBar on different devices to ensure it looks and works as expected.

Screenshot

DOWNLOAD FROM GITHUB