Membuat Aplikasi Progress Bar Pada WebView Menggunakan Android Studio

* Artikel ini adalah rangkaian dari tutorial Android Studio, untuk melihat tutorial Android Studio lainnya bisa mengklik tautan ini

Pada tulisan kali ini, saya akan menjelaskan tentang Progress Bar yang biasa digunakan pada aplikasi untuk memberikan informasi proses transfer data, proses aktivitas, atau yang sering kita sebut dengan tampilan loading.

Pengertian dasarnya, Progress Bar adalah widget yang berguna untuk menampilkan suatu pemrosesan dalam bentuk bar. Widget ini biasanya digunakan ketika kita membuka halaman Aplikasi dan mengunduh atau mengunggah sebuah file pada perangkat Android.

Di bawah ini merupakan tampilan aplikasi yang akan kita buat. Jika kita lihat, pada tampilan aplikasi terdapat komponen EditText, Button, ProgressBar, dan WebView.

Untuk membuat aplikasi seperti tampilan di atas, silahkan buat proyek baru pada Android Studio dengan nama ProgressBarWebView, atau berikan nama proyek sesuai keinginan. Buka Android Studio, klik File – New Project isi Application Name dengan nama ProgressBarWebView dan Company Domain dengan teknojurnal.com. Pada jendela Activity silahkan pilih Empty Activity.

Setelah berhasil membuat proyek, silahkan buka file activity_main.xml yang terletak pada direktori proyek /res/layout/activity_main.xml. Pada layout ini, kita akan membuat tampilan dengan menambahkan EditText untuk memasukan tautan situs, Button, ProgressBar untuk menampilkan proses, dan WebView untuk menampilan situs yang diakses. Silahkan tambahkan kodingan seperti di bawah ini.

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="oc.startup.ra.progressbarwebview.MainActivity">

    <LinearLayout
        android:id="@+id/urlContainer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/urlField"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:text="http://"
            android:hint="Enter URL to open" />

        <Button
            android:id="@+id/goButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Open" />
    </LinearLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/urlContainer" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/progressBar" />

</RelativeLayout>

Setelah selesai membuat tampilan aplikasi, selanjutnya kita akan membuat alur logika aplikasi dengan menambahkan kodingan di bawah ini pada file MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;

public class MainActivity extends Activity {

    private WebView webView;
    private EditText urlEditText;
    private ProgressBar progress;

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

        urlEditText = (EditText) findViewById(R.id.urlField);
        webView = (WebView) findViewById(R.id.webView);
        webView.setWebChromeClient(new MyWebViewClient());

        progress = (ProgressBar) findViewById(R.id.progressBar);
        progress.setMax(100);

        Button openUrl = (Button) findViewById(R.id.goButton);
        openUrl.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                String url = urlEditText.getText().toString();
                if (validateUrl(url)) {
                    webView.getSettings().setJavaScriptEnabled(true);
                    webView.loadUrl(url);

                    MainActivity.this.progress.setProgress(0);
                }
            }

            private boolean validateUrl(String url) {
                return true;
            }
        });

    }

    private class MyWebViewClient extends WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            MainActivity.this.setValue(newProgress);
            super.onProgressChanged(view, newProgress);
        }
    }
    public void setValue(int progress) {
        this.progress.setProgress(progress);
    }
}

Pada tahapan terakhir, kita akan memberikan permission pada aplikasi ProgressBarWebViewagar dapat mengakses fitur Internet. Sehingga aplikasi dapat menggunakan koneksi dari mobile atau dari WiFi. Untuk memberikan permission, silahkan buka AndroidManifest.xml dan tambahkan kodingan di bawah ini tepat sebelum atau sesudah tag <application></application>.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Setelah selesai, silahkan jalankan aplikasi yang sudah dibuat. Jalankan dengan menggunakan emulator Android atau langsung pada perangkat Android yang dimiliki. Tulisan ini masih berkaitan dengan artikel sebelumnya, silahkan bagi pembaca yang ingin lebih mengeksplorasi aplikasi yang ProgressBarWebView.

Untuk mengunduh kode sumber aplikasi ProgressBarWebView, silahkan klik ProgressBarWebView.

* Artikel ini adalah rangkaian dari tutorial Android Studio, untuk melihat tutorial Android Studio lainnya bisa mengklik tautan ini