Cara Membuat Progress Bar di Web View Android Studio

Cara Membuat Progress Bar di Web View Android Studio. Assalamualaikum, untuk berpindah dari satu halaman ke halaman lainnya biasanya ada jeda waktu yang digunakan untuk meload halaman. Di dalam web ada namanya preloader yang berfungsi untuk memberikan respon loading saat halaman akan diload, sedangkan di android studio ada namaya progressbar yang memberikan fungsi sama dengan preloader. Di tutorial kali ini saya akan membahas bagaimana menggunakan progress bar pada webview di android studio.






Progressbar berfungsi sebagai respon yang ditampilkan oleh aplikasi saat akan berpindah dari satu halaman ke halaman lainnya. Hal ini penting agar user tahu apakah aplikasi bekerja atau tidak. Aplikasi yang dipasang preloader juga akan memberikan pengalaman yang lebih baik untuk user saat user melakukan aksi tertentu.Intinya adalah "progressbar adalah proses yang ditampilkan saat akan berpindah dari satu halaman ke halaman lain". Mungkin langsung saja masuk ke tutorial utama.

Cara Membuat ProgressBar di Web View Android Studio

• 1. Buka android studio, pilih empty activty, beri nama project bebas pilih api bebas, atau biarkan secara default android studio yang memilih lalu tekan finish
• 2. Agar tidak lupa, tambahkan uses-permission. Buka file AndroidManifest.xml, filenya bisa kalian cari di direktori app > manifest > AndroidManifest.xml. Lalu tambahkan script di bawah ini tepat diatas tag <application>
• 3. Buka activity_main.xml, cari filenya di folder res > layout > activity_main.xml. Lalu tambahkan script di bawah ini. Script dibawah ini berfungsi untuk membuat tampilan layout webview dan menambahkan progress bar

<?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:id="@+id/home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"
        />

    <ProgressBar
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="110dp"
        android:id="@+id/progress"
        />

</RelativeLayout>

• 4. Masuk ke file MainActivity.java lalu tambahkan script dibawah ini tepat pada tulisan public class MainActivity extends AppCompatActivity { .

package com.sahretech.mutiarasunnahnews;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class home extends AppCompatActivity {

    WebView mWebView;
    ProgressBar bar;

    //buat source web
    String URL = "http://sahretech.com/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);

        mWebView = (WebView) findViewById(R.id.webView);
        bar=(ProgressBar) findViewById(R.id.progress);
        //menghidupkan javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(URL);
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //ProgressBar akan Terlihat saat Halaman Dimuat
                bar.setVisibility(View.VISIBLE);
                bar.setProgress(newProgress);
                if(newProgress == 100){
                    //ProgressBar akan Menghilang setelah Valuenya mencapat 100%
                    bar.setVisibility(View.GONE);
                }
                super.onProgressChanged(view, newProgress);
            }
        });
        mWebView.setWebViewClient(new MyWebViewClient());

    }


    //method ini perlu ditambahkan agar saat halaman web diload tetap diload di aplikasi, tidak diload di webbrowseer
    private class MyWebViewClient extends WebViewClient {

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }


        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            view.loadUrl(url);
            return true;
        }
    }

    //tambahkan method ini agar saat tombol back ditekan, tidak keluar dari aplikasi tapi kembali ke halaman sebelumnya
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()){
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

• Jika Muncul error klik pada tulisan yang merah/error lalu tekan alt+enter untuk mengimport class.

• 6. Tahap ini adalah tahap opsional bisa kalian ikuti atau tidak, tujuannya adalah untuk menghilangkan actionbar yang ada diatas webview kita nanti. Masuk ke file res > values > style.xml lalu ikut gambar di bawah ini.

• 7. Jika sudah, coba running aplikasi kalian, maka hasilnya akan tampil seperti gambar gif di bawah ini

Sekian tutorial cara membuat progress bar di webview android studio. Semoga tulisan singkat ini bermanfaat bagi kita semua. Ada pertanyaan, kritik dan saran bisa tinggalkan di kolom komentar di bawah ini. Happy Coding!!!