Cara Membuat ProgressBar pada Webview Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial android studio kali ini, kita akan belajar membuat sebuah aplikasi webview dengan menggunakan ProgressBar, 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.

Pada aplikasi yang akan kita buat, kita akan menambahkan sebuah ProgressBar untuk menampilkan pemrosesan atau bisa disebut juga tampilan loading, saat memuat halaman web. ProgressBar sendiri, pada umumnya digunakan untuk memberikan informasi proses transfer data atau proses aktivitas, seperti membuaka halaman aplikasi, mengunggah file, mengunduh file, mengirimkan file, dsb.

Tutorial berikut ini merupakan lanjutan dari tutorial sebelumnya, yaitu Cara Membuat Fast Webview pada Android Studio, jadi saya sarankan untuk membuka link tersebut terlebih dahulu, jika kalian sudah membuat webview, dari tutorial yang saya berikan atau membutnya sendiri, kita akan lanjut materi berikut ini.

Materi Lainnya Yang Disarankan:

• Pengertian dan Fungsi ProgressBar pada Android Studio
• Membuat Fast Loading Webview Menggunakan Kotlin
• Penggunaan DownloadManager pada Webview

Cara Membuat ProgressBar pada Webview Android Studio

Karena project berikut ini merupakan lanjutan dari tutorial sebelumnya, jadi disini saya sudah membuat sebuah activity yang digunakan untuk menampilkan halaman web dengan element UI Webview.

Pada kode xml didalam activity tersebut, akan kita tambahkan tag <ProgressBar>, diatas komponen webview, seperti berikut 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:orientation="vertical"
    tools:context="android.cianjur.developer.net.fastwebview.web_page">

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

    <WebView
        android:id="@+id/my_web"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

Selanjutnya, buka file web_page.java kalian, pertama akan kita tambahkan serta Inisialisasi ID ProgressBar tersebut pada method onCreate().

import android.widget.ProgressBar;

public class web_page extends AppCompatActivity {

    private WebView websiteku;
    private ProgressBar loading; //Menambahkan widget ProgressBar

    private String URL = "http://www.wildantechnoart.net/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_page);
        websiteku = findViewById(R.id.my_web);
        loading = findViewById(R.id.progress); //Menginisialisasi ID ProgressBar
        settings();
        load_website();
    }

Didalam method settings(), akan kita biarkan saja seperti ini:

private void settings(){
        WebSettings web_settings = websiteku.getSettings();
        web_settings.setJavaScriptEnabled(true);
        web_settings.setAllowContentAccess(true);
        web_settings.setUseWideViewPort(true);
        web_settings.setLoadsImagesAutomatically(true);
        web_settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        web_settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        web_settings.setEnableSmoothTransition(true);
        web_settings.setDomStorageEnabled(true);
    }

Lalu pada method load_website() akan kita tambahkan beberapa fungsi atau method, serta atribut lainnya yang digunakan untuk progressBar, masukan source code berikut ini:

private void load_website(){
        if(Build.VERSION.SDK_INT >= 19){
            websiteku.setLayerType(View.LAYER_TYPE_HARDWARE, null);
        }else{
            websiteku.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }

        //Tambahkan WebChromeClient
        websiteku.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //ProgressBar akan Terlihat saat Halaman Dimuat
                loading.setVisibility(View.VISIBLE);
                loading.setProgress(newProgress);
                if(newProgress == 100){
                    //ProgressBar akan Menghilang setelah Valuenya mencapat 100%
                    loading.setVisibility(View.GONE);
                }
                super.onProgressChanged(view, newProgress);
            }
        });

        websiteku.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                view.loadUrl(request.toString());
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                //ProgressBar akan Menghilang setelah Halaman Selesai Dimuat
                super.onPageFinished(view, url);
                loading.setVisibility(View.GONE);
            }
        });

        websiteku.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        websiteku.loadUrl(URL);
    }

Penjelasan :

• Dalam method load_website(), jika versi SDK lebih besar/sama dengan API 19 (Kitkat), maka webview tersebut akan mengset tipe layer jenis Hardware, hal ini digunakan untuk meningkatkan kualitas rendering saat transformasi rotasi diterapkan pada suatu tampilan.
• Dan jika versi SDK dibawah API 19,  maka webview tersebut akan mengset tipe layer jenis Software.
• Didalam WebChromeClient pada method onProgressChanged, saat aplikasi memuat suatu halaman, progressBar akan terlihat dan value/nilai pada progresBar tersebut akan terus bertambah hingga halaman selesai dimuat, setelah valuenya mencapai 100, maka progress bar akan menghilang kembali.
• Pada WebViewClient, terdapat sebuah method bernama shouldOverrideUrlLoading, fungsinya untuk mengambil alih kontrol saat url baru akan dimuat di WebView saat ini. Jika WebViewClient tidak disediakan, secara default WebView akan meminta Activity Manager untuk memilih penangan yang tepat untuk url. 
• Pada onPageFinished, setelah halaman selesai dimuat, progressBar akan menghilang.
• setScrollBarStyle digunakan untuk memilih gaya ScrollBar pada webView.
• loadUrl, digunakan untuk memuat Url yang diberikan.

Terakhir, jalankan project tersebut menggunakan emulator atau langsung pada ponsel android kalian.

Demo:

Kalian bisa mendownload Project tersebut di GitHub saya. Download Disini.

Terimakasih atas kunjungannya, semoga meteri yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.