Cara Menerapkan ProgressBar pada Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Didalam sebuah aplikasi, sering kali kita melihat sebuah prosses/progress yang memungkinkan user untuk menunggu sejenak saat mengakses sebuah konten, contohnya saat pengguna sedang mengakses konten online atau saat kita sedang memdownload file, maka proses tersebut terlihat oleh user.

ProgressBar merupakan elemen UI yang digunakan untuk indikasi suatu proses dalam aplikasi, elemen UI tersebut akan menampilkan suatu pemrosesan pada konten yang di akses oleh user.

Materi Yang Harus Kalian Pelajari Sebelumnya:

• Tutorial Cara Berpindah Activity Menggunakan Intent
• Cara Membuat Splash Screen pada Android Studio
• Tutorial Dasar Penggunaan Thread Pada Java

Setelah kalian selesai membuat project pada android studio, selanjutnya, buat new Empty Activity, berinama "splashActivity", activity tersebut harus dijadikan activity yang pertama tampil pada layar.

Ada 2 jenis progressBar yang terdapat pada android studio, pertama yaitu yang indikasi kemajuannya dapat ditentukan, contohnya, saat kita mendownload file, user harus menunggu beberapa saat, sampai value dari progressBar tersebut mencapai 100%, atau saat menyalin file ke tempat penyimpanan yang berbeda.

A. ProgressBar (Horizontal)

Sebagai contoh, kita akan membuat program sederhana menggunakan ProgressBar yang indikasi kemajuannya dapat ditentukan, pada program tersebut, menggunakan 2 buah activity, activity pertama digunakan sebagai halaman splash screen, dimana pada halaman tersebut, akan menampilkan progressBar yang nilai kemajuannya telah ditentukan, lalu akan berpindah pada activity selanjutnya setelah nilai yang ditentukan mencapai 100%.

1) Buka file activity_splash.xml, untuk membuat progressBar, kalian perlu menambahkan tag <ProgressBar>, agar user bisa mengetahui persentasenya, kita akan mengunakan TextView yang akan menampilkan persentase dari progress tersebut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="android.cianjur.developer.net.basicandroid.splashActivity">

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"/>

    <TextView
        android:id="@+id/persentase"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="0%"
        android:textSize="15sp"
        android:textStyle="bold" />
</LinearLayout>

Ada beberapa atribut didalam tag <ProgressBar> yang perlu kalian ketahui, diantaranya:

• style="?android:attr/progressBarStyleHorizontal" Digunakan untuk membuat progressBar horizontal yang nilai indikasi kemajuannya dapat ditentukan.
• android:max="100" Untuk menentukan maksimal nilai/value pada progressBar tersebut.

2) Buat Activity baru, berinama "MainActivity", disini saya cukup menambahkan textView saja pada layout tersebut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Selamat Datang Di WILDAN TECHNO ART"
        android:textSize="15sp"
        android:textStyle="bold" />
</RelativeLayout>

3) Selanjutnya buka class splashActivity.java, pada class tersebut kita akan menggunakan thread, untuk indikasi pemrosesan dapat berjalan hingga selesai dan menampilkan persentasenya pada textView, dari 0% sampai 100%  menggunakan class handler, class ini akan kita gunakan untuk mengirimkan data berkali-kali pada activity,  handler tersebut akan kita daftarkan pada thread dan mengirim pesan menggunakan method sendMessage(),

package android.cianjur.developer.net.basicandroid;

import android.content.Intent;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

public class splashActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private TextView persentase;
    private int Value = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        progressBar = findViewById(R.id.progress);
        persentase = findViewById(R.id.persentase);
        progressBar.setProgress(0); //Set Progress Dimulai Dari O

        // Handler untuk Updating data pada latar belakang
        final Handler handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                // Menampung semua data yang ingin diproses oleh thread
                persentase.setText(String.valueOf(Value)+"%");
                if(Value == progressBar.getMax()){
                    Toast.makeText(getApplicationContext(), "Progress Completed", Toast.LENGTH_SHORT).show();
                    startActivity(new Intent(splashActivity.this, MainActivity.class));
                    finish();
                }
                Value++;
            }
        };

        // Thread untuk updating progress pada ProgressBar di Latar Belakang
        Thread thread = new Thread(new Runnable() {
            @Override
            public void run() {
                try{
                    for(int w=0; w<=progressBar.getMax(); w++){
                        progressBar.setProgress(w); // Memasukan Value pada ProgressBar
                        // Mengirim pesan dari handler, untuk diproses didalam thread
                        handler.sendMessage(handler.obtainMessage());
                        Thread.sleep(100); // Waktu Pending 100ms/0.1 detik
                    }
                }catch(InterruptedException ex){
                    ex.printStackTrace();
                }
            }
        });
        thread.start();
    }
}

Perlu kalian ingat, setiap data yang ingin di proses oleh thread harus berada didalam method handleMessage(), yaitu subclass dari class handler,

Jalankan project tersebut:

B. ProgressBar (Rolling)

Jenis ini merupakan turunan dari progressBar yang nilai indikasi kemajuannya tidak tentu, dengan tampilan seperti roda yang berputar-putar.

Untuk contoh berikut ini kita tidak akan menggunakan TextView untuk menmpilkan persentasenya, buka kembali file activity_splash.xml, lalu ubah artibut style dan tambahkan atribut android:indeterminate pada tag <ProgressBar> menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="android.cianjur.developer.net.basicandroid.splashActivity">

    <ProgressBar
        android:id="@+id/rolling"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="match_parent"
        android:indeterminate="true"
        android:layout_height="wrap_content" />
</LinearLayout>

Pada class SplashActivity.java, untuk contoh kali ini, kita cukup menggunakan thread yang sederhana saja, tapi kalian bisa membuatnya sekreatif mungkin:

package android.cianjur.developer.net.basicandroid;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class splashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        Thread thread = new Thread(new Runnable() {
            @Override
            public void run() {
                try{
                    Thread.sleep(3000); // Waktu Pnding 3 Detik
                }catch(InterruptedException ex){
                    ex.printStackTrace();
                }finally {
                    startActivity(new Intent(splashActivity.this, MainActivity.class));
                    finish();
                }
            }
        });
        thread.start();
    }
}

Berikut ini screenshot dari activity yang menggunakan progressBar(Rolling):

Selamat mencoba, silakan sesuaikan dengan project yang ingin kalian buat, hanya itu saja yang bisa saya jelaskan, mohon maaf bila ada kesalahan,

Wassalamualaikum Warahmatullahi Wabarakatuh.