android.widget.RatingBar is used to represent rating bar in android applation. It is subclass of android.widget.ProgressBar, so it behaves similar with ProgressBar. This article will tell you how to use RatingBar in android, it also show you example about how to customize RatingBar background, stars and it’s behaviour.
1. RatingBar Properties And Methods.
- numStars : Number of stars that will be displayed.
- stepSize : Number of stars should be changed at least for each progress increase.
- rating : Current rating number (number of stars.).
- isIndicator : Boolean value, true means can not modify it use finger, false means user can modify it use finger.
- setOnRatingBarChangeListener : Set a listener responsive to rating number changed event.
2. RatingBar Example.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/3MHCo3JBHoM
This example include below files.
- seekbar_unpressed_thumb : This is an gray image used as custom rating bar’s background.
- seekbar_pressed_thumb : This is an gray image used as custom rating bar’s progress drawable.
You can go to Android SeekBar Example to get above two images. - rating_bar_layer.xml : This is a layer-list drawable used as rating bar progressDrawable property’s value.
- activity_rating_bar.xml : Layout xml file includes all UI components.
- RatingBarActivity.java : Contain logic java code such as update rating bar progress automatically, show rating bar info etc.
3. rating_bar_layer.xml
Saved in app / res / drawable folder. Please note the item order in this file.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" android:drawable="@drawable/seekbar_unpressed_thumb" android:bottom="7dp"/> <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/seekbar_unpressed_thumb" android:bottom="7dp"/> <item android:id="@android:id/progress" android:drawable="@drawable/seekbar_pressed_thumb" android:bottom="7dp"/> </layer-list>
4. activity_rating_bar.xml
Saved in app / res / layout folder.
Please Note: RatingBar’s android:layout_width property’s value should be “wrap_content”, do not specify it to “match_parent”, otherwise it will display more stars than specified.
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" tools:layout_editor_absoluteY="8dp" tools:layout_editor_absoluteX="8dp"> <!--layout_width's value can only be wrap_content. --> <RatingBar android:id="@+id/ratingBarDefault" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" android:stepSize="0.5"/> <TextView android:id="@+id/ratingBarDefaultInfo" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="20dp"/> <RatingBar android:id="@+id/ratingBarCustom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="8" android:stepSize="1" android:progressDrawable="@drawable/rating_bar_layer"/> <TextView android:id="@+id/ratingBarCustomInfo" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
5. RatingBarActivity.java
package com.dev2qa.example; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.widget.RatingBar; import android.widget.TextView; public class RatingBarActivity extends AppCompatActivity { // Handle first rating bar message. Handler defaultRatingBarHandler ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_rating_bar); setTitle("dev2qa.com - RatingBar Example"); // Get first rating bar. final RatingBar ratingBarDefault = (RatingBar)findViewById(R.id.ratingBarDefault); // First rating bar can not be modified manually. ratingBarDefault.setIsIndicator(true); // Set first rating bar's listener. ratingBarDefault.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() { TextView ratingBarDefaultInfo = (TextView)findViewById(R.id.ratingBarDefaultInfo); @Override public void onRatingChanged(RatingBar ratingBar, float ratingValue, boolean fromUser) { int currentProgress = ratingBarDefault.getProgress(); ratingBarDefaultInfo.setText("Current start number is " + ratingValue + ", Progress number is " + currentProgress); } }); defaultRatingBarHandler = new Handler(){ @Override public void handleMessage(Message msg) { if(msg.what==1) { float currRating = ratingBarDefault.getRating(); if(currRating==ratingBarDefault.getNumStars()) { currRating = 0; } float stepSize = ratingBarDefault.getStepSize(); float newRating = currRating + stepSize; ratingBarDefault.setRating(newRating); } } }; new Thread(){ @Override public void run() { try { while(true) { Message msg = new Message(); msg.what = 1; defaultRatingBarHandler.sendMessage(msg); Thread.sleep(1000); } }catch (Exception ex) { ex.printStackTrace(); } } }.start(); // Second rating bar is customized. final RatingBar ratingBarCustom = (RatingBar)findViewById(R.id.ratingBarCustom); ratingBarCustom.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() { TextView ratingBarCustomInfo = (TextView)findViewById(R.id.ratingBarCustomInfo); @Override public void onRatingChanged(RatingBar ratingBar, float ratingValue, boolean fromUser) { int currentProgress = ratingBarCustom.getProgress(); ratingBarCustomInfo.setText("Current start number is " + ratingValue + ", Progress number is " + currentProgress); } }); } }