Cách tạo RatingBar tùy chỉnh (Custom RatingBar) trong Android

Hướng dẫn này trình bày cách sử dụng RatingBar cơ bản trong Android. RatingBar là widget cho phép người dùng đánh giá bằng sao (star). Mặc định sử dụng drawable hệ thống, nhưng có thể tùy chỉnh giao diện hoàn toàn qua style/xml.

Các bước thực hiện (RatingBar cơ bản)

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Layout (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="16sp"
    tools:context=".MainActivity">

    <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"
        android:id="@+id/ratingBar"/>

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

</RelativeLayout>

Bước 3: Code MainActivity (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); // Có thể set lại bằng code
        button = findViewById(R.id.buttonCheck);

        // Lắng nghe thay đổi rating (khi user chạm)
        ratingBar.setOnRatingBarChangeListener((rb, rating, fromUser) -> {
            Toast.makeText(MainActivity.this, "Số sao: " + (int) rating, Toast.LENGTH_SHORT).show();
        });

        // Kiểm tra rating hiện tại khi nhấn nút
        button.setOnClickListener(v -> {
            Toast.makeText(MainActivity.this, "Số sao: " + (int) ratingBar.getRating(), Toast.LENGTH_SHORT).show();
        });
    }
}

Bước 4: Cấu hình 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>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Chạm vào sao để đánh giá, nhấn "KIỂM TRA" để xem giá trị hiện tại.

Tùy chỉnh RatingBar (Custom Style) - Nâng cao

Để thay đổi hình ảnh sao (star), màu sắc, kích thước:

1. Tạo drawable cho sao (res/drawable/ratingbar_custom.xml)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Background (sao rỗng) -->
    <item android:id="@android:id/background">
        <bitmap android:src="@drawable/star_empty" android:gravity="center" />
    </item>

    <!-- Secondary progress (nếu có) -->
    <item android:id="@android:id/secondaryProgress">
        <bitmap android:src="@drawable/star_half" android:gravity="center" />
    </item>

    <!-- Progress (sao đầy) -->
    <item android:id="@android:id/progress">
        <bitmap android:src="@drawable/star_filled" android:gravity="center" />
    </item>
</layer-list>

2. Tạo style (res/values/styles.xml)

<style name="CustomRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/ratingbar_custom</item>
    <item name="android:minHeight">48dp</item>
    <item name="android:maxHeight">48dp</item>
    <item name="android:numStars">5</item>
    <item name="android:stepSize">0.5</item>
    <item name="android:isIndicator">false</item>
</style>

3. Áp dụng trong XML

<RatingBar
    android:id="@+id/customRatingBar"
    style="@style/CustomRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rating="3.5" />

Chuẩn bị ảnh

• star_empty.png: Sao rỗng (viền)
• star_half.png: Sao nửa (nếu stepSize < 1)
• star_filled.png: Sao đầy

Đặt trong res/drawable/ (các độ phân giải: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).

Các thuộc tính quan trọng

Lấy giá trị Rating

float rating = ratingBar.getRating(); // float
int stars = (int) rating; // Lấy phần nguyên