สร้าง Custom Progress Bar ใน Android ด้วย Kotlin

บทนำ

ตัวอย่างนี้สาธิตการสร้าง Custom Progress Bar ใน Android โดยใช้ Drawable XML วาดวงกลมโหลดเอง แล้วนำไปใช้กับ ProgressBar ใน Kotlin

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

สร้างโปรเจกต์ใหม่ใน Android Studio

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

สร้างไฟล์ circle.xml ในโฟลเดอร์ res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="https://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360">

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="true">

        <size
            android:width="200dp"
            android:height="200dp" />

        <gradient
            android:centerColor="#00FF00"
            android:endColor="#0000FF"
            android:startColor="#FF0000"
            android:type="sweep"
            android:useLevel="false" />

    </shape>
</rotate>

ขั้นตอนที่ 3: Layout (activity_main.xml)

เพิ่มโค้ดใน res/layout/activity_main.xml ใช้ android:progressDrawable="@drawable/circle":

<?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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="#008080"
        android:padding="5dp"
        android:text="TutorialsPoint"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold" />

    <ProgressBar
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="200dp"
        style="?android:progressBarStyleLarge"
        android:progress="100"
        android:id="@+id/progressBar"
        android:progressDrawable="@drawable/circle" />

</RelativeLayout>

ขั้นตอนที่ 4: MainActivity.kt

เพิ่มโค้ดใน src/MainActivity.kt:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ProgressBar

class MainActivity : AppCompatActivity() {
    lateinit var progressBar: ProgressBar

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

        progressBar = findViewById(R.id.progressBar)
        progressBar.max = 100
        progressBar.progress = 20 // ตั้งค่าเริ่มต้น 20%
    }
}

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

ตรวจสอบการประกาศ Activity

การทดสอบ

รันแอป จะแสดง Progress Bar วงกลมสีสันสวยงาม ที่ความคืบหน้า 20%

ขยายความสามารถ: สามารถใช้ ObjectAnimator เพื่อทำ Animation ความคืบหน้าแบบ Smooth หรือสร้าง ProgressBar แบบ Horizontal ด้วย Drawable แบบ Layer-list