Membuat WebView Dengan Progress Bar pada Android Studio

Membuat WebView Dengan Progress Bar pada Android Studio sangat mudah.  WebView merupakan salah satu widget yang berfungsi menampilkan halaman web di dalam aplikasi android. WebView mengubah aplikasi Anda menjadi aplikasi web.

Penjelasan Singkat Mengenai Apa itu WebView

Contoh kasus : Badoystudio.com hanya bisa diakses melalui web tidak mempunyai aplikasi android. Maka dengan WebView kita bisa membuat aplikasi androidnya (berbentuk apk) tentunya dapat diinstall pada smartphone android sehingga ketika kita ingin mengakses badoystudio.com hanya perlu menyentuh icon badoystudio yang sudah terinstall dismartphone android.

Script WebView pada xml yaitu :

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

    />

Script Object Class WebView pada java yaitu :

webView = (WebView) findViewById(R.id.webView);

Untuk memuat url web ke WebView, gunakan metode loadUrl (String url) dari kelas WebView, dengan script :

webView.loadUrl("https://badoystudio.com");

Cara Membuat Webview dengan Progress Bar

Untuk langkah-langkah selengkapnya yaitu sebagai berikut :

Buat Layout WebView pada Activity_Main.xml

Layout webview badoystudio.com ini akan ditambahkan progress bar supaya saat proses load website akan menampilkan icon loading.  Untuk script lengkapnya yaitu sebagai berikut : 

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


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

        />

    <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/progressBar2"
        />

</RelativeLayout>

MainActivity.java

Tambahkan script untuk memanggil url website, object class Webview, dan proses progress bar pada MainActivity.java yaitu sebagai berikut :

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

import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    WebView webView;
    ProgressBar bar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
        bar=(ProgressBar) findViewById(R.id.progressBar2);
        webView.setWebViewClient(new myWebclient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://badoystudio.com");


    }

    public class myWebclient extends WebViewClient{
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            bar.setVisibility(View.GONE);
        }

        @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 super.shouldOverrideUrlLoading(view, url);
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
            webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }
}

Script Dibawah Digunakan Untuk Back Ke Webview ketika kita sudah membuka konten yang terdapat pada website.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
        webView.goBack();
        return true;
    }

    return super.onKeyDown(keyCode, event);
}

Style.xml

Agar terlihat lebih baik ui nya hilangkan actionbar webview dengan script dibawah ini :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources> 

AndroidManifests.xml

Tambahkan user permission internet pada AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="badoystudio.com.webview">

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


    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Running Project

Silahkan running project melalui android virtual device, emulator genymotion, atau langsung menggunakan smartphone yang kamu miliki.  Maka hasilnya akan seperti gambar berikut :

Penutup

Mudah bukan untuk membuat web kita menjadi apk webview pada android studio. Share ya jika bermanfaat. Tunggu apalagi praktekan sekarang 😀