Cách tạo ProgressBar trong Android

Reading Time: 3 minutes

Có hai loại ProgressBar trong Android: Horizontal và Circular. Hôm nay, chúng ta sẽ triển khai cả hai loại này.

ProgressBar trong Android

ProgressBar là một thành phần đồ họa dùng để hiển thị mức độ hoàn thành của một tác vụ nào đó dưới dạng một thanh tiến trình. Nó cho người dùng biết được khoảng thời gian cần thiết để hoàn thành công việc. Sử dụng ProgressBar là một cách làm hay để cải thiện trải nghiệm người dùng, vì nó hiển thị trạng thái của một tác vụ đang chạy (ví dụ như tải một hình ảnh).

Các thuộc tính của ProgressBar

Dưới đây là một số thuộc tính quan trọng dùng để định nghĩa một ProgressBar.

1. android:max: Ta có thể dùng thuộc tính này để đặt giá trị tối đa cho ProgressBar. Mặc định, giá trị tối đa của progress bar là 100.
2. android:indeterminate: Thuộc tính này nhận một giá trị boolean tùy thuộc vào tính determinate (có thể biết trước được điểm kết thúc hoặc tổng thời lượng) của tiến trình. Nếu đặt là false, ProgressBar sẽ hiển thị tiến độ thực tế. Ngược lại, nếu là true, Android sẽ hiển thị một hiệu ứng động lặp lại theo chu kỳ để cho biết tác vụ đang diễn ra.
3. android:minHeight: Dùng để đặt chiều cao cho ProgressBar.
4. android:minWidth: Dùng để đặt chiều rộng cho ProgressBar.
5. android:progress: Dùng để thiết lập giá trị mà ProgressBar sẽ tăng lên sau mỗi lần cập nhật.
6. style: Mặc định, ProgressBar sẽ hiển thị dưới dạng một vòng xoay. Nếu muốn hiển thị dưới dạng thanh ngang, ta cần đặt thuộc tính style như sau: style="?android:attr/progressBarStyleHorizontal".

Trong bài hướng dẫn này, chúng ta sẽ tạo một ProgressBar và tăng giá trị của nó thông qua việc cập nhật bên trong một thread. Ta sẽ cho thread tạm dừng (sleep) 200 mili giây sau mỗi lần tăng giá trị để bạn có thể thấy rõ tiến trình.

Cấu trúc của ví dụ mẫu

Dự án này bao gồm một Activity và layout duy nhất chứa cả hai loại ProgressBar.

Code ví dụ

File activity_main.xml có một RelativeLayout làm view cha, bên trong chứa một ProgressBar dạng ngang và một ProgressBar dạng tròn, cùng với một TextView để hiển thị tiến độ dưới dạng số.

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

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="23dp"
        android:layout_marginTop="20dp"
        android:indeterminate="false"
        android:max="100"
        android:minHeight="50dp"
        android:minWidth="200dp"
        android:progress="1" />

    <ProgressBar
        android:id="@+id/progressBar_cyclic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="50dp"
        android:minWidth="50dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/progressBar"
        android:layout_below="@+id/progressBar"/>

</RelativeLayout>

Trong layout trên, giá trị của progress bar ngang sẽ tăng thêm 1 sau mỗi lần cập nhật, như đã thiết lập trong android:progress. Progress bar tròn sẽ chạy liên tục cho đến khi activity dừng lại.

package com.journaldev.progressbar;

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

public class MainActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private int progressStatus = 0;
    private TextView textView;
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        textView = (TextView) findViewById(R.id.textView);
        // Start long running operation in a background thread
        new Thread(new Runnable() {
            public void run() {
                while (progressStatus < 100) {
                    progressStatus += 1;
                    // Update the progress bar and display the
                    //current value in the text view
                    handler.post(new Runnable() {
                        public void run() {
                            progressBar.setProgress(progressStatus);
                            textView.setText(progressStatus+"/"+progressBar.getMax());
                        }
                    });
                    try {
                        // Sleep for 200 milliseconds.
                        Thread.sleep(200);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

Trong đoạn code trên, progressBar sẽ cập nhật sau mỗi 200 mili giây và các cập nhật này được thiết lập bằng setProgress(). Ta sử dụng một Handler (class của Android để quản lý các Message hoặc Runnable trong một thread) để chạy thread nền. Thread này sẽ chạy cho đến khi giá trị progressStatus đạt 100. Hình ảnh dưới đây minh họa kết quả của ứng dụng khi chạy.

Tổng kết

Như vậy, trong bài hướng dẫn này, chúng ta đã tạo một ProgressBar trong Android. Bạn có thể tải về toàn bộ ví dụ mẫu tại link này. Trong một bài hướng dẫn sau, chúng ta sẽ tìm hiểu cách thêm ProgressBar vào ProgressDialog trong trường hợp bạn cần làm nổi bật thông tin tiến độ tác vụ hơn nữa.