วิธีสร้าง Circular Progress Bar แบบกำหนดเองใน Android ด้วย Kotlin

ตัวอย่างนี้สาธิตวิธีสร้าง Circular Progress Bar (วงกลมโหลด) แบบกำหนดเอง โดยใช้ Drawable XML และควบคุม Progress ด้วย Kotlin

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

Android Studio → New Project → Empty Activity

ขั้นตอนที่ 2: สร้าง Drawable วงกลม (res/drawable/circular_progressbar.xml)

<?xml version="1.0" encoding="utf-8"?>
<ring xmlns:android="https://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:thicknessRatio="8"
    android:useLevel="true">

    <gradient
        android:startColor="#4CAF50"
        android:endColor="#81C784"
        android:type="sweep" />

</ring>

ขั้นตอนที่ 3: 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="24dp"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:max="100"
        android:progress="0"
        android:progressDrawable="@drawable/circular_progressbar" />

    <TextView
        android:id="@+id/tvProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="0%"
        android:textSize="32sp"
        android:textStyle="bold"
        android:textColor="#4CAF50" />

</RelativeLayout>

ขั้นตอนที่ 4: โค้ดหลัก (MainActivity.kt)

import android.os.Bundle
import android.os.Handler
import android.os.Looper
import android.widget.ProgressBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private var progress = 0
    private val handler = Handler(Looper.getMainLooper())
    lateinit var progressBar: ProgressBar
    lateinit var tvProgress: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "Circular Progress Demo"

        progressBar = findViewById(R.id.circularProgressbar)
        tvProgress = findViewById(R.id.tvProgress)

        // จำลองโหลดข้อมูล
        simulateLoading()
    }

    private fun simulateLoading() {
        Thread {
            while (progress < 100) {
                progress++
                Thread.sleep(50) // จำลองงานหนัก

                // อัปเดต UI บน Main Thread
                handler.post {
                    progressBar.progress = progress
                    tvProgress.text = "$progress%"
                }
            }
        }.start()
    }
}

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

Manifest มาตรฐาน

🎨 ปรับแต่งรูปแบบวงกลม (circular_progressbar.xml)

ทดสอบ

รันแอป → จะเห็นวงกลมโหลดหมุนจาก 0% ถึง 100% พร้อมตัวเลขตรงกลาง