Contoh Penggunaan WebView di Android

Artikel ini berisi contoh script yang saya gunakan untuk membuat aplikasi WebView di Android menggunakan Android Studio. Selain itu, ada juga beberapa solusi untuk menyelesaikan masalah yang biasanya ada saat menggunakan webview.

Contoh Penggunaan WebView

Tambahkan komponen WebView di layout.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</androidx.constraintlayout.widget.ConstraintLayout>

Tambahkan permission INTERNET di AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testwebview">
    
    <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.MAIN" />

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

</manifest>

Tambahkan script berikut di MainActivity.

package com.example.testwebview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

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

        WebView webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://irmanfrdev.com/");
    }
}

Sampai sini, harusnya web sudah bisa dibuka. Tapi jika didalamnya terdapat link untuk membuka halaman tertentu, maka akan muncul masalah baru. WebView akan membuka halaman tersebut di browser terpisah, bukan didalam aplikasi.

Mencegah WebView Membuka Halaman di Browser

Supaya aplikasi WebView membuka halaman baru didalam aplikasi (tidak menggunakan browser terpisah), bisa ditambahkan script berikut ini.

...
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://irmanfrdev.com/");

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return false;
    }
});
...

Menggunakan Tombol Back di WebView

Sekarang muncul masalah lagi, aplikasi webview tidak akan meng-handle tombol back yang ditekan oleh user. Jika harusnya kembali ke halaman sebelumnya (seperti di browser), tapi yang ada malah keluar aplikasi.

Tambahkan dan ubah script nya seperti berikut agar tombol back bisa digunakan di webview.

public class MainActivity extends AppCompatActivity {

    private WebView webView = null;

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

        webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://irmanfrdev.com/");

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return false;
            }
        });
    }

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

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

Menghilangkan ActionBar (Full Screen)

Default nya aplikasi webview yang dibuat dengan script di atas masih menggunakan ActionBar.

ActionBar di aplikasi WebView

Jika ingin menghilangkan ActionBar tersebut dan membuat aplikasi WebView menjadi full screen tanpa ActionBar, bisa ditambahkan/diubah script berikut ini.

Edit di bagian res > values > styles.xml.

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

Setting awalnya adalah Theme.AppCompat.Light.DarkActionBar dan diubah menjadi Theme.AppCompat.Light.NoActionBar.

Leave a Reply