วิธีสร้าง Custom RatingBar ใน Android

ภาพรวม

ตัวอย่างนี้สาธิตการใช้ RatingBar พื้นฐานและปรับแต่ง รวมถึงการจับ Event เมื่อผู้ใช้ให้คะแนน

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio → File → New Project และกรอกข้อมูลที่จำเป็น

ขั้นตอนที่ 2: เลย์เอาต์ (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="2.0"
        android:stepSize="1.0"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/buttonCheck"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CHECK"
        android:layout_below="@id/ratingBar"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

ขั้นตอนที่ 3: โค้ดหลัก (src/MainActivity.java)

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    RatingBar ratingBar;
    Button button;

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

        ratingBar = findViewById(R.id.ratingBar);
        ratingBar.setNumStars(5); // ตั้งค่าจำนวนดาว (ซ้ำกับ XML แต่ทำได้)
        
        button = findViewById(R.id.buttonCheck);

        // Event เมื่อผู้ใช้เปลี่ยนคะแนน
        ratingBar.setOnRatingBarChangeListener((bar, rating, fromUser) -> {
            if (fromUser) {
                Toast.makeText(MainActivity.this, 
                    "Stars: " + (int)rating, Toast.LENGTH_SHORT).show();
            }
        });

        // Event เมื่อกดปุ่ม CHECK
        button.setOnClickListener(v -> 
            Toast.makeText(MainActivity.this, 
                "Stars: " + (int)ratingBar.getRating(), 
                Toast.LENGTH_SHORT).show()
        );
    }
}

ขั้นตอนที่ 4: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

การทดสอบ

รันแอป แตะที่ดาวเพื่อให้คะแนน หรือกดปุ่ม CHECK เพื่ออ่านค่าปัจจุบัน

การสร้าง Custom RatingBar จริง (Advanced)

ตัวอย่างด้านบนเป็น RatingBar มาตรฐาน สำหรับ Custom จริงๆ ต้องทำดังนี้:

1. สร้าง Drawable Selector (res/drawable/custom_ratingbar.xml)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <bitmap android:src="@drawable/star_empty" />
    </item>
    <item android:id="@android:id/secondaryProgress">
        <bitmap android:src="@drawable/star_half" />
    </item>
    <item android:id="@android:id/progress">
        <bitmap android:src="@drawable/star_filled" />
    </item>
</layer-list>

2. ใช้ Style ใน res/values/styles.xml

<style name="CustomRatingBar" parent="Widget.AppCompat.RatingBar">
    <item name="android:progressDrawable">@drawable/custom_ratingbar</item>
    <item name="android:minHeight">32dp</item>
    <item name="android:maxHeight">32dp</item>
</style>

3. ใช้ใน XML

<RatingBar
    style="@style/CustomRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="0.5" />

4. ต้องเตรียมรูปภาพ 3 ไฟล์

• star_empty.png - ดาวว่าง
• star_half.png - ดาวครึ่ง
• star_filled.png - ดาวเต็ม

คุณสมบัติหลักของ RatingBar