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
RatingBarfits 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
RatingBaron different devices to ensure it looks and works as expected.
Screenshot
