Tuesday 28 July 2015

Android Rating Bar

fanxtea.blogspot.com

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)
  2. 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>


  3. Kod
  4. 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(); } }); } }

  5. Demo
  6. 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.