RatingBar

RatingBar in Android – Implementation and Overview

RatingBar in Android – Implementation and Overview

RatingBar in android is used to provide a user interface to provide ratings. The ratings can be for anything. rating a product to rating the app. We can make use of various methods and attributes to create the perfect rating bar.

According ro google, “A Rating Bar is an extension of SeekBar and ProgressBar that shows a rating in stars. The user can touch/drag or use arrow keys to set the rating when using the default size RatingBar”.

We will see about the implementation, design and material design standards to create the perfect bar in the coming sections below.

RatingBar – XML Implementation

We make use of the XML tag <RatingBar> to create our view in the Layout file.

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ></RatingBar>

This will implement a sample Rating Bar. The user rating is then captured in the activity and necessary actions are performed with it.

RatingBar – Creating the Activity

The docs here lists all the methods that is available with RatingBar. We will implement few important ones below.

Some important attributes of RatingBars

  • android:isIndicator – This lets the application know that, we are using the Rating Bar as just an indicator. The user cannot change the Values. Look at the below example,
Image result for google play rating
The rating bar here is just an indicator to how much the rating is. Its isIndicator is set to True
  • android:stepSize – Sets the step size for the rating bar. This takes in a floating point value, Make sure it is around 1 to 1.5 for optimal user display
  • android:rating – This sets the default rating value, that has to be shown. This can be any value, or can be set to 0. It also takes in a floating point as its value.
  • android:numStars – As the name suggest, you can set the max stars that has to be shown. It is recommended to go with the default value of 5.

Once we are done, setting up our Layout file, we can move to creating our Activity to handle this Rating Bar.

Activity Implementation – RatingBar

We can use our Activity to read the value that the user sets using the Rating bar and perform our manipulations to it.

We will need one method called getRating() and read the value from that. See the below implementation for our sample Application.

We will use two additional views, TextView and a Button like below.

first_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stepSize="1.2"
        android:numStars="5"
        ></RatingBar>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter"
        android:id="@+id/button"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:id="@+id/textviewRating"
        android:layout_gravity="center"
        android:textColor="@color/colorAccent"/>
</LinearLayout>

MainActivity.java

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

public class MainActivity extends AppCompatActivity {

    RatingBar ratingBar;
    TextView textView;
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.first_layout);
         ratingBar = (RatingBar) findViewById(R.id.ratingBar);
         textView = (TextView)findViewById(R.id.textviewRating);
         button = (Button)findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText(String.valueOf(ratingBar.getRating()));
            }
        });
    }
}

The resulting Application is:

"<yoastmark

"<yoastmark

RatingBar – Important Tip

If you are thinking of setting an onClickListener directly to the Rating Bar, here is why it doesnt work. The RatingBar is a child class of AbsSeekBar which overrides the method onTouchEvent(). This prevents any form of call to the onClickListener and hence we cannot perform any action by setting the Listener directly to RatingBar.

There are two ways to implement the onclick action.

  1. Directly derive the RatingBar class into your Activity and override the onTouchEvent method.(Not as easy as it sounds, we dont have to go around deriving the RatingBar class wherever we want to implement a onclick action)
  2. Use the method onTouchEvent() on the RatingBar object like below.
ratingBar.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            // TODO perform your action here
        }
        return true;
    }

This will help you overcome the issue.

RatingBar – Material Design

Once you know how the Rating Bar plays a cordial role in the application development cycle, we see some important Material design ideas that can be followed.

Here is my favourite repository for some pretty cool looking RatingBars.Here you can find material design doc with awesome content.

I followed some of the standards in this application live on google store. Take a look at it for some inspiration.

Drop in any comments you have below.

“Learn and be Curious”

 

Leave a Comment