Android Rating Bar

Open “res/layout/main.xml” file, add a rating bar component, few textviews and a button.

Note
The rating bar contains many configurable values. In this case, the rating bar contains 4 stars, each increase 1.0 value, so, it contains the minimum of 1.0 (1 star) and maximum value of 4.0 (4 stars). In addition, it made the 2nd star (2.0) selected by default.

File : res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/lblRateMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rate Me"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="4"
        android:stepSize="1.0"
        android:rating="2.0" />
 
    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />
 
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
        <TextView
            android:id="@+id/lblResult"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Result : "
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <TextView
            android:id="@+id/txtRatingValue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceSmall" />
 
    </LinearLayout>
 
</LinearLayout>

Inside activity “onCreate()” method, attach a listener on rating bar, fire when rating value is changed. Another listener on button, fire when button is clicked. Read the code’s comment, it should be self-explanatory.

File : MyAndroidAppActivity.java


package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;
 
public class MyAndroidAppActivity extends Activity {
 
  private RatingBar ratingBar;
  private TextView txtRatingValue;
  private Button btnSubmit;
 
  @Override
  public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 
 addListenerOnRatingBar();
 addListenerOnButton();
 
  }
 
  public void addListenerOnRatingBar() {
 
 ratingBar = (RatingBar) findViewById(R.id.ratingBar);
 txtRatingValue = (TextView) findViewById(R.id.txtRatingValue);
 
 //if rating value is changed,
 //display the current rating value in the result (textview) automatically
 ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
  public void onRatingChanged(RatingBar ratingBar, float rating,
   boolean fromUser) {
 
   txtRatingValue.setText(String.valueOf(rating));
 
  }
 });
  }
 
  public void addListenerOnButton() {
 
 ratingBar = (RatingBar) findViewById(R.id.ratingBar);
 btnSubmit = (Button) findViewById(R.id.btnSubmit);
 
 //if click on me, then display the current rating value.
 btnSubmit.setOnClickListener(new OnClickListener() {
 
  @Override
  public void onClick(View v) {
 
   Toast.makeText(MyAndroidAppActivity.this,
    String.valueOf(ratingBar.getRating()),
     Toast.LENGTH_SHORT).show();
 
  }
 
 });
 
  }
}


. Result, 2nd star is selected by default.



2. Touch on the 3rd star, rating value is changed, display the current selected value in the result (textview).



3. Touch on the 1st star, and click on the submit button, the current selected value is displayed as floating message.

Related Posts by Categories