Cách tạo Custom RatingBar trong Android bằng Kotlin

Giới thiệu

Bài viết này minh họa cách tạo và sử dụng RatingBar tùy chỉnh trong Android sử dụng Kotlin.

Các bước thực hiện

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

Mở Android Studio, chọn File → New Project và điền đầy đủ thông tin để tạo dự án mới.

Bước 2: Thiết kế giao diện (res/layout/activity_main.xml)

<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:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:numStars="5"
        android:rating="2.0"
        android:stepSize="1.0" />

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="24sp" />
</RelativeLayout>

Bước 3: Viết logic xử lý (src/MainActivity.kt)

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

class MainActivity : AppCompatActivity() {
    lateinit var ratingBar: RatingBar
    lateinit var button: Button
    lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        ratingBar = findViewById(R.id.ratingBar)
        ratingBar.numStars = 5
        button = findViewById(R.id.buttonCheck)
        textView = findViewById(R.id.textView)
        
        ratingBar.onRatingBarChangeListener = OnRatingBarChangeListener { _, rating, _ ->
            Toast.makeText(this@MainActivity, "Số sao: " + rating.toInt(), Toast.LENGTH_SHORT).show()
        }
        
        button.setOnClickListener {
            textView.text = "Bạn đã chọn " + ratingBar.rating.toInt() + " sao"
        }
    }
}

Bước 4: Cấu hình Manifest (androidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.q11">
    <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ị Android thực với máy tính. Trong Android Studio, mở file activity và nhấn biểu tượng Run trên thanh công cụ. Chọn thiết bị di động của bạn và kiểm tra màn hình hiển thị.

Tùy chỉnh RatingBar: Để custom icon, dùng android:progressDrawable="@drawable/custom_ratingbar" với layer-list XML định nghĩa star_on/star_off.