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 that rating and display in Toast Message or show in 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>

RatingBar Design

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 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();
            }
        });
    }


}

Screenshot

Ratingbar Android Screenshot

DOWNLOAD FROM GITHUB

Recent Articles

How to Implement Text To Speech in Android Studio

Text-to-speech (TTS) technology reads clearly digital manual - the words on computers, smartphones, and tablets. This tutorial explains how to implement text to speech in android...

[Updated] Temporarily Free Games and Apps on Google Play Store

Every week there are free games and apps on the Google Play store. Here is the list of free games and apps on the Play Store you...

OnePlus 7T vs iPhone 11 | Specs Comparison

The OnePlus 7T and iPhone 11 are the two best phones if you looking for a price of less than $1000. Both the phone...

Elon Musk unveils Tesla’s Cybertruck

Are you into gaming or love watching sci-fi movies?  What about those back to the future movies which gave us a glimpse of the...

7 Best Hiking Apps you Must Try in 2020

Having the best hiking apps always gives you an advantage if you are going for adventurous trips. These apps can track your workout and activities...

Stay on Top - Get the daily news in your inbox

Related Stories