Tùy chỉnh Progress Bar trong Android bằng Kotlin

Ví dụ này minh họa cách tạo Progress Bar tùy chỉnh (custom) trong Android sử dụng Kotlin.

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

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

Bước 2: Cấu hình layout chính (activity_main.xml)

Thêm mã sau vào 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"
    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>

Bước 3: Viết mã MainActivity.kt

Thêm mã sau vào 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
    }
}

Bước 4: Tạo drawable tùy chỉnh (res/drawable/circle.xml)

Để Progress Bar có hình tròn tùy chỉnh, tạo file res/drawable/circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thicknessRatio="8"
    android:useLevel="true">
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent"
        android:type="sweep" />
</shape>

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>
                
                
            </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. Từ 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 và kiểm tra màn hình hiển thị.

Mở rộng: Để tạo Progress Bar tròn hiện đại hơn, hãy dùng Material Components với CircularProgressIndicator (từ thư viện com.google.android.material:material). Nó hỗ trợ indeterminate, determinate, màu sắc, kích thước, animation mượt mà ngay out-of-the-box.