Android Rating Bar

By Fanxtea | 1 Januari 2015

Didalam Android, kita boleh menggunakan "android.widget.RatingBar" untuk mempaparkan komponen rating bar dalam bentuk bintang. User dibenarkan sentuh, drag atau klik pada bintang untuk menentukan jumlah rating dengan mudah.

Dalam tutorial ini, saya akan menunjukkan bagaimana untuk XML memaparkan satu rating bar, beberapa textView dan satu butang. Apabila user klik pada rating bar, nilai rating yang dipilih akan dipaparkan pada textView. Seterusnya apabila user klik pada butang, nilai rating akan dipaparkan dalam bentuk mesej terapung (toast message).

1. Bar Kedudukan (Rating Bar)
Buka fail "res/layout/activity_main.xml" dan masukkan semua komponen seperti dibawah.

Fail : res/layout/activity_main.xml

<?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="Penilaian"
        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="Hantar" />
 
    <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="Keputusan : "
            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>



2. Kod
Teliti kod ini dan anda akan faham.

Fail: MainActivity.java

package com.fanxtea.helloworld;
 
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 MainActivity extends Activity {
 
  private RatingBar ratingBar;
  private TextView txtRatingValue;
  private Button btnSubmit;
 
  @Override
  public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_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(MainActivity.this,
    String.valueOf(ratingBar.getRating()),
     Toast.LENGTH_SHORT).show();
 
  }
 
 });
 
  }
}

3. Demo
Run aplikasi.

Default akan menunjukkan rating bar dua bintang.



Selepas rating bar ditekan Keputusan akan keluar dan selepas butang "Hantar" ditekan, toast message akan muncul.