Cách tạo ProgressBar tùy chỉnh (Custom) trong Android

Giới thiệu

Hướng dẫn này trình bày cách tạo ProgressBar hình tròn tùy chỉnh (custom progress bar) trong Android sử dụng drawable shape ring.

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 thông tin cần thiết.

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ProgressBar
        android:layout_width="150dp"
        android:layout_height="150dp"
        style="?android:progressBarStyleLarge"
        android:progress="50"
        android:id="@+id/progressBar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:progressDrawable="@drawable/circle" />
</androidx.constraintlayout.widget.ConstraintLayout>

Bước 3: Tạo drawable hình tròn (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="2.5"
    android:thickness="4dp"
    android:useLevel="true">
    <solid android:color="@color/colorAccent" />
</shape>

Giải thích thuộc tính:

• shape="ring" - Hình vòng tròn
• innerRadiusRatio - Tỷ lệ bán kính trong (2.5 = bán kính ngoài / 2.5)
• thickness - Độ dày vòng tròn
• useLevel="true" - Cho phép hiển thị tiến độ (progress)
• solid color - Màu của phần đã hoàn thành

Bước 4: Logic chính (src/MainActivity.java)

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {
    ProgressBar progressBar;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        progressBar = findViewById(R.id.progressBar);
        progressBar.setMax(100);      // Giá trị tối đa
        progressBar.setProgress(20);  // Giá trị hiện tại (20%)
    }
}

Bước 5: 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.sample">
    <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>

Nâng cao: ProgressBar gradient màu

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="4dp"
    android:useLevel="true">
    <gradient
        android:type="sweep"
        android:startColor="#FF0000"
        android:endColor="#00FF00"
        android:centerColor="#0000FF" />
</shape>

ProgressBar indeterminate (xoay vô tận)

<ProgressBar
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:indeterminate="true"
    android:indeterminateDrawable="@drawable/custom_spinner" />

Chạy ứng dụng

Kết nối thiết bị Android, nhấn Run trong Android Studio. ProgressBar hình tròn sẽ hiển thị tiến độ 20% với màu accent.