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.


Example of rating bar app in Android


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>

preview of rating bar


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.

android studio rating bar app with listener

References:

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

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

  See also : Android Studio : Image button and button example





By Adam Ng

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.


Advertisement