Tạo Progress Bar tròn tùy chỉnh trong Android bằng Kotlin

Hướng dẫn này minh họa cách tạo Progress Bar hình tròn tùy chỉnh (Circle Custom Progress Bar) trong Android sử dụng Kotlin.

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: Thiết kế giao diện (activity_main.xml)

File XML cần chứa ProgressBar và TextView (code gốc bị thiếu phần ProgressBar, dưới đây là bản hoàn chỉnh):

<?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="50dp"
        android:text="Tutorials Point"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="32sp"
        android:textStyle="bold" />

    <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" />

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

</RelativeLayout>

Bước 3: Tạo drawable progress bar tròn (res/drawable/circularprogressbar.xml)

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="https://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="10dp">
        <gradient
            android:centerColor="#007aff"
            android:endColor="#00c6ff"
            android:startColor="#007aff"
            android:type="sweep" />
    </shape>
</rotate>

Bước 4: Viết code MainActivity.kt

import android.content.res.Resources
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.os.Handler
import android.widget.ProgressBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    var status = 0
    private val handler = Handler()
    lateinit var textView: TextView

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

        val drawable: Drawable = resources.getDrawable(R.drawable.circularprogressbar)
        val progressBar: ProgressBar = findViewById(R.id.circularProgressbar)
        progressBar.progress = 0
        progressBar.secondaryProgress = 100
        progressBar.max = 100
        progressBar.progressDrawable = drawable

        textView = findViewById(R.id.textView)

        Thread(Runnable {
            while (status < 100) {
                status += 1
                handler.post {
                    progressBar.progress = status
                    textView.text = String.format("%d%%", status)
                }
                try {
                    Thread.sleep(16)
                } catch (e: InterruptedException) {
                    e.printStackTrace()
                }
            }
        }).start()
    }
}

Bước 5: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.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ị, nhấn Run. Progress Bar tròn sẽ chạy từ 0% đến 100% với animation mượt mà, TextView hiển thị phần trăm thực thời gian.