Progress Bar pada Webview : Membuat loading di Android Studio

Progress Bar pada Webview : membuat loading di Android Studio. Pada tulisan Sebelumnya kami telah membahas cara membuat aplikasi webview dengan android studio. Dalam aplikasi tersebut belum adanya tampilan loading saat halaman di buka. Tampilan yang akan kita masukan ke dalam webview disebut progressBar.

Fungsi Progress Bar yakni dapat menyajikan suatu proses loading data dengan bentuk bar. Progress Bar akan muncul saat membuka suatu laman aplikasi android, mendownload ataupun mengunggah suatu file pada perangkat Android.

Kali ini kami akan membagikan tutorial tentang Cara menggunakan ProgressBar di android studio yang biasa digunakan pada aplikasi android.  Progress bar dapat memberikan beberapa informasi mengenai  proses transfer data, proses aktivitas, atau yang sering kita sebut dengan tampilan loading data.

Cara Membuat Progress Bar Pada Webview

Cara ini kita akan lakukan pada sebuah aplikasi yang menggunakan fitur WebView. Progress bar yang akan kita pergunakan hanya menampilkan proses loading data dari koneksi internet.

Sebenarnya hal ini bertujuan agar pengguna dapat mengetahui batas akhir dari loading data yang akan di muat pada aplikasi. Progress bar yang disisipkan pada webview akan menggunakan widget yang berputar putar saja.

1.  Tambahkan Widget Progrees Bar

Untuk kali ini kita akan menambahkan widget Progress bar pada layout yang nantinya harus terhubung ke sebuah class java. Disini kami berikan contoh loading dari website google dan kami berikan nama activity-browser.java

Silakan salin data berikut pada Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:card_view="http://schemas.android.com/tools"
    android:background="@drawable/background_blacks">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:indeterminate="true"
        android:indeterminateTint="@color/colorPrimary"
        android:indeterminateTintMode="src_atop"
        android:visibility="gone" />

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/webView"/>

</RelativeLayout>

Pada kode diatas kita akan hubungkan ke class java dengan identitas progress bar yakni  android:id="@+id/progressBar". Sedangkan untuk webview menggunakan  android:id="@+id/webView"

2.  Tambahkan Progress Bar pada Class Java

Buka class java dimana anda ingin menghubungkan dengan layout kemudian paste kode berikut ini:

public class GamesActivity extends AppCompatActivity {
    WebView webView;
    ProgressBar mProgressBar;
    String url = "http://games.farrelstudio.com/";
    private AdView mAdView;

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

        webView = (WebView) findViewById(R.id.webView);
        mProgressBar = (ProgressBar) findViewById(R.id.progressBar);
        webView.getSettings().setJavaScriptEnabled(true);
        // Tiga baris di bawah ini agar laman yang dimuat dapat melakukan zoom.
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false);
        webView.loadUrl(url);

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //ProgressBar akan Terlihat saat Halaman Dimuat
                mProgressBar.setVisibility(View.VISIBLE);
                webView.setVisibility(View.GONE);

            }
        });


        webView.setWebViewClient(new WebViewClient(){

            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

                webView.loadUrl("file:///android_asset/error.html");

            }

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

        });

    }
}

Supaya Progress bar dapat ditampilkan dengan baik, maka sebaiknya halaman website harus disembunyikan dulu. Cara ini agar kelihatan lebih natural untuk menampilkan website.

Secara singkat kita hanya menggunakan setVisibility untuk menampilkan atau pun menyembunyikan webview serta progress bar. Saat loading data maka progress bar akan ditampilkan dan menghidden webview. Namun jika loading data telah selesai maka webview ditampilkan dan progress bar harus disembunyikan kembali.

Dengan cara penempatan progress bar seperti ini maka setiap kali ada yang mengakses web di dalamnya maka akan ditampilkan progress bar kembali.

Demikian postingan kami mengenai Progress Bar pada Webview : Membuat loading di Android Studio.