วิธีใช้ RatingBar ใน Android

ภาพรวม

RatingBar เป็น Widget สำหรับรับคะแนนแบบดาว (Star Rating) รองรับทั้ง **Indicator** (แสดงอย่างเดียว) และ **Interactive** (ผู้ใช้กด/ลากได้) เป็น Subclass ของ AbsSeekBar → ProgressBar → View

XML Attributes สำคัญ

ตัวอย่างพื้นฐาน

1. Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="24dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ให้คะแนนแอปของเรา"
        android:textSize="18sp"
        android:layout_marginBottom="16dp" />

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:stepSize="0.5"
        android:rating="0.0" />

    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="ส่งคะแนน" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:textSize="16sp" />

</LinearLayout>

2. MainActivity.java

package com.example.myapplication;

import android.os.Bundle;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private RatingBar ratingBar;
    private TextView tvResult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ratingBar = findViewById(R.id.ratingBar);
        tvResult = findViewById(R.id.tvResult);
        Button btnSubmit = findViewById(R.id.btnSubmit);

        // ฟังเหตุการณ์เปลี่ยนแปลงคะแนน (Optional)
        ratingBar.setOnRatingBarChangeListener((bar, rating, fromUser) -> {
            tvResult.setText(String.format("คะแนนปัจจุบัน: %.1f ดาว", rating));
        });

        btnSubmit.setOnClickListener(v -> {
            float rating = ratingBar.getRating();
            if (rating == 0) {
                Toast.makeText(this, "กรุณาให้คะแนนก่อน", Toast.LENGTH_SHORT).show();
            } else {
                String msg = String.format("ขอบคุณสำหรับคะแนน %.1f ดาว!", rating);
                Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
                // TODO: ส่งคะแนนไป Server, บันทึก SharedPreferences, ฯลฯ
            }
        });
    }
}

การปรับแต่งรูปลักษณ์ (Custom Style)

1. ใช้ Style/Theme

<!-- res/values/styles.xml -->
<style name="CustomRatingBar" parent="Widget.AppCompat.RatingBar">
    <item name="android:progressTint">@color/gold</item>
    <item name="android:secondaryProgressTint">@color/gray_light</item>
    <item name="android:starHalf">@drawable/custom_star_half</item>
    <item name="android:starFull">@drawable/custom_star_full</item>
</style>

<!-- ใน Layout -->
<RatingBar
    style="@style/CustomRatingBar"
    android:numStars="5"
    android:stepSize="0.5" />

2. Custom Drawable (res/drawable/custom_ratingbar.xml)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Background stars -->
    <item android:id="@android:id/background">
        <bitmap android:src="@drawable/star_empty" android:gravity="center" />
    </item>
    <!-- Secondary progress (Optional) -->
    <item android:id="@android:id/secondaryProgress">
        <bitmap android:src="@drawable/star_half" android:gravity="center" />
    </item>
    <!-- Progress (Filled stars) -->
    <item android:id="@android:id/progress">
        <bitmap android:src="@drawable/star_filled" android:gravity="center" />
    </item>
</layer-list>

Indicator Mode (Read-only)

<RatingBar
    android:id="@+id/ratingIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="0.1"
    android:rating="4.3"
    android:isIndicator="true"
    android:progressTint="@color/gold" />

ใช้แสดงคะแนนเฉลี่ยจาก Review ผู้ใช้อื่น (ไม่ให้ผู้ใช้กดได้)

การดึงค่าและใช้งาน

• ratingBar.getRating() → คืนค่า float (0.0 - numStars)
• ratingBar.setRating(3.5f) → ตั้งค่าด้วยโค้ด
• ratingBar.setOnRatingBarChangeListener(...) → ฟังเหตุการณ์เปลี่ยนแปลง
• ratingBar.setIsIndicator(true/false) → เปลี่ยนโหมด Interactive/Indicator

Best Practices

• ใช้ stepSize="0.5" สำหรับการให้คะแนนทั่วไป (ครึ่งดาว)
• ใช้ stepSize="0.1" หรือ 0.01 สำหรับ Indicator (คะแนนเฉลี่ย)
• ตั้งค่า android:isIndicator="true" สำหรับการแสดงผลอย่างเดียว
• Custom Drawable ใช้ Layer-list (background/secondaryProgress/progress) เพื่อรองรับทุกสถานะ
• บันทึกคะแนนใน SharedPreferences/Room เพื่อไม่ให้ผู้ใช้โหวตซ้ำ (Optional)

สรุป

RatingBar ใช้งานง่าย: ตั้งค่า numStars, stepSize, rating เริ่มต้น → ใช้ getRating() ดึงค่า → OnRatingBarChangeListener สำหรับ Real-time feedback สามารถ Custom Style/Drawable ได้เต็มที่ เหมาะสำหรับ Review, Feedback, Survey ในแอป