Android Studio : Rating bar example

Some people just like to give judgment. Whether a food quality is meh or delicious or an app is really shitty or good. In order to let these people have an outlet to express their judgment in your Android app, you can add the rating bar into your app.

For this tutorial, let's learn how to add a rating bar, a button to capture the result and display the result.

---

---

Create a new project and head over to /res/layout/activity_main.xml file and fill the file up with:

---

 <?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="com.example.sweetlogic.ratingbar.MainActivity">


 <RatingBar
 android:id="@+id/ratingBar"
 android:layout_width="wrap_content"
 android:layout_height="48dp"
 android:text="RateMe"
 android:visibility="visible"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.235" />

 <Button
 android:id="@+id/buttonGetRatingBarResult"
 android:layout_width="368dp"
 android:layout_height="48dp"
 android:text="Get rating result"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 tools:layout_editor_absoluteX="8dp"
 tools:layout_editor_absoluteY="231dp" />

 <TextView
 android:id="@+id/textView"
 android:layout_width="368dp"
 android:layout_height="48dp"
 android:text="Rating bar example"
 android:textColor="@android:color/background_dark"
 android:textSize="24sp"
 android:textStyle="bold"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.004" />

 <TextView
 android:id="@+id/ratingBarResult"
 android:layout_width="368dp"
 android:layout_height="48dp"
 android:text="Result : 0.0"
 android:textColor="@android:color/background_dark"
 android:textSize="24sp"
 android:textStyle="bold"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.36" />


 </android.support.constraint.ConstraintLayout>

---

Next, head over to MainActivity.java file and fill it up with the source code below. We also like to add some minor enhancement. Instead of getting the result manually each time the user press the button. We would like to add a listener on the rating bar changes as well.

---

 package com.example.sweetlogic.ratingbar;

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


 public class MainActivity extends AppCompatActivity {

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

 // get the rating bar result
 addListenerOnButton();

 // listen to the rating bar changes
 addListenerOnRatingBar();
 }

 public void addListenerOnButton() {

 final RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
 Button button = (Button) findViewById(R.id.buttonGetRatingBarResult);

 button.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View arg0) {

 float result = ratingBar.getRating();

 Toast.makeText(MainActivity.this, "You have rated : " + String.valueOf(result), Toast.LENGTH_LONG).show();
 }

 });
 }

 // instead of getting the rating bar manually each time when the user press the button
 // we can get the result automagically adding a change listener on it.

 public void addListenerOnRatingBar() {

 final RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
 final TextView ratingBarResult = (TextView) findViewById(R.id.ratingBarResult);

 ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
 public void onRatingChanged(RatingBar ratingBar, float rating,boolean fromUser) {

 // update our result
 ratingBarResult.setText("Result : " + String.valueOf(rating));

 }
 });
 }
 }

---

Finally, build and run the app. If everything goes smoothly, you should be able to see the app in action such as shown below.

References:

https://developer.android.com/reference/android/widget/RatingBar.html

https://www.socketloop.com/tutorials/android-studio-image-button-and-button-example