Menampilkan Webview Pada Aplikasi di Android Studio

WebView Android Studio

Di Android, pada sebuah aktivitas, kita bisa menampilkan halaman dari suatu website/URL. Atau kita juga bisa membuat halaman HTML di Android dan menampilkannya sebagai Webview pada sebuah aktivitas. Keduanya akan di bahas.

WebView Versi Halaman URL

Persiapkan project Anda! Lihat pada postingan ini untuk tutorial pembuatan project baru, dan pada postingan ini untuk tutorial membuat aktivitas baru. Pada pembahasan ini kita akan membuatnya pada activity launcher / activity_main.xml. Dan pada Webview URL, tentunya akan dicontohkan URL dari blog ini sebagai penampakannya. Langkah pertama adalah meminta izin akses internet dengan menambahkan <uses-permission android:name="android.permission.INTERNET" /> di dalam tag <manifest> pada AndroidManifest.xml.

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

    <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"
            android:label="Contoh Webview">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Setelah itu, tambahkan <WebView pada activity_main.xml untuk membuat Webview :

<?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"
    tools:context=".MainActivity">

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

</RelativeLayout>

Langkah terakhir, pada java file MainActivity.java, pertama-tama membuat variabel untuk class WebView, lalu mendapatkan id dari WebView yang dibuat di activity_main.xml tadi dengan findViewById. Kemudian sedikit tambahan pengaturan saat halaman URL tersebut di muat, yaitu:

• setLoadsImagesAutomatically(true) ntuk memuat secara otomatis gambar pada halaman URL.
• setJavaScriptEnabled(true) untuk memuat halaman URL yang mendukung Javascript.
• setSupportZoom(true) untuk dapat melakukan aktivitas zoom in zoom out pada halaman URL.
• setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY) untuk dapat menggulir halaman URL.
• setWebViewClient(new WebViewClient() agar setiap link yang di klik pada halaman URL termuat dalam aplikasi (tidak keluar dari aplikasi).

Berikut kode lengkapnya pada MainActivity.java :

package com.example.proyekpertama;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        WebView gwnbs = findViewById(R.id.webview);
        gwnbs.getSettings().setLoadsImagesAutomatically(true);
        gwnbs.getSettings().setJavaScriptEnabled(true);
        gwnbs.getSettings().setDomStorageEnabled(true);

        /* Agar halaman yang dimuat dapat melakukan zoom*/
        gwnbs.getSettings().setSupportZoom(true);
        gwnbs.getSettings().setBuiltInZoomControls(true);
        gwnbs.getSettings().setDisplayZoomControls(false);

        /* Mendukung scrollbar di dalam WebView*/
        gwnbs.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        gwnbs.setWebViewClient(new WebViewClient());
        gwnbs.loadUrl("https://gwnbs.com");
    }
}

Sekarang coba jalankan aplikasi dan lihat hasilnya.. Diakhir artikel ini nantinya akan ditunjukkan sebuah video pendek saat aplikasi dijalankan pada Android smartphone. Karena kita masih akan membahas cara membuat halaman HTML di Android Studio yang akan ditampilkan sebagai Webview.

WebView Versi HTML

Pertama buatlah terlebih dahulu folder assets dengan cara klik kanan pada folder res > New > Folder > Assets Folder. Setelah itu akan muncul tab konfigurasi, tidak perlu ada yang di apa-apakan; langsung klik Finish. Berikut gambar panduannya :

Gambar 1 : Panduan membuat Asset Folder

Setelah itu folder assets akan muncul tepat diatas folder res. Untuk membuat file HTML, klik kanan pada folder assets tersebut kemudian New > File. Akan muncul tab baru, isikan kolom nama dengan nama file HTML yang diinginkan dengan format namafile.html lalu klik OK. Disini kita buat dengan nama gwnbs.html. Setelah itu file gwnbs.html akan masuk pada folder asset dan secara otomatis terbuka di jendela editor.

Gambar 2 :  Panduan membuat file HTML

Langkah berikutnya membuat konten pada file gwnbs.html tersebut dengan basis HTML. Berikut HTML sederhana yang saya buat pada file gwnbs.html :

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Daftar Saham BEI</title>
</head>
<body><br/>
<table border="1">
    <thead>
    <tr role="row" bgcolor='#0DB8B8'>
        <th class="sorting_disabled" rowspan="1" colspan="1">No</th>
        <th class="sorting_disabled" rowspan="1" colspan="1">Kode</th>
        <th class="sorting_disabled" rowspan="1" colspan="1">Nama</th>
        <th class="sorting_disabled" rowspan="1" colspan="1">Tanggal Pencatatan</th>
        <th class="sorting_disabled" rowspan="1" colspan="1">Saham Beredar</th>
        <th class="sorting_disabled" rowspan="1" colspan="1">Papan Pencatatan</th>
    </tr>
    </thead>
    <tbody>
    <tr role="row" class="odd">
        <td>1</td>
        <td>AALI</td>
        <td>Astra Agro Lestari Tbk.</td>
        <td>09 Des 1997</td>
        <td class="text-right">1.924.688.333</td>
        <td>UTAMA</td>
    </tr>
    <tr role="row" class="even" bgcolor="#C5D6D4">
        <td>2</td>
        <td>ABBA</td>
        <td>Mahaka Media Tbk.</td>
        <td>03 Apr 2002</td>
        <td class="text-right">2.755.125.000</td>
        <td>PENGEMBANGAN</td>
    </tr>
    <tr role="row" class="odd">
        <td>3</td>
        <td>ABDA</td>
        <td>Asuransi Bina Dana Arta Tbk.</td>
        <td>06 Jul 1989</td>
        <td class="text-right">620.806.680</td>
        <td>Pengembangan</td>
    </tr>
    <tr role="row" class="even" bgcolor="#C5D6D4">
        <td>4</td>
        <td>ABMM</td>
        <td>ABM Investama Tbk.</td>
        <td>06 Des 2011</td>
        <td class="text-right">2.753.165.000</td>
        <td>Utama</td>
    </tr>
    <tr role="row" class="odd">
        <td>5</td>
        <td>ACES</td>
        <td>Ace Hardware Indonesia Tbk.</td>
        <td>06 Nov 2007</td>
        <td class="text-right">17.150.000.000</td>
        <td>UTAMA</td>
    </tr>
    <tr role="row" class="even" bgcolor="#C5D6D4">
        <td>6</td>
        <td>ACST</td>
        <td>Acset Indonusa Tbk.</td>
        <td>24 Jun 2013</td>
        <td class="text-right">700.000.000</td>
        <td>UTAMA</td>
    </tr>
    <tr role="row" class="odd">
        <td>7</td>
        <td>ADES</td>
        <td>Akasha Wira International Tbk.</td>
        <td>13 Jun 1994</td>
        <td class="text-right">589.896.800</td>
        <td>PENGEMBANGAN</td>
    </tr>
    <tr role="row" class="even" bgcolor="#C5D6D4">
        <td>8</td>
        <td>ADHI</td>
        <td>Adhi Karya (Persero) Tbk.</td>
        <td>18 Mar 2004</td>
        <td class="text-right">3.560.849.376</td>
        <td>UTAMA</td>
    </tr>
    <tr role="row" class="odd">
        <td>9</td>
        <td>ADMF</td>
        <td>Adira Dinamika Multi Finance T</td>
        <td>31 Mar 2004</td>
        <td class="text-right">1.000.000.000</td>
        <td>Utama</td>
    </tr>
    <tr role="row" class="even" bgcolor="#C5D6D4">
        <td>10</td>
        <td>ADMG</td>
        <td>Polychem Indonesia Tbk</td>
        <td>20 Okt 1993</td>
        <td class="text-right">3.889.179.559</td>
        <td>Utama</td>
    </tr>
    <tr role="row" class="odd">
        <td>11</td>
        <td>ADRO</td>
        <td>Adaro Energy Tbk.</td>
        <td>16 Jul 2008</td>
        <td class="text-right">31.985.962.000</td>
        <td>Utama</td>
    </tr>
    </tbody>
</table>
</body>
</html>

Selanjutnya langkah terakhir adalah memasukkan file html tersebut ke file java MainActivity.java. Caranya cukup simpel karena hanya perlu mengganti alamat URL pada  gwnbs.loadUrl("https://gwnbs.com"); dengan file:///android_asset/gwnbs.html. Sehingga akan menjadi  gwnbs.loadUrl("file:///android_asset/gwnbs.html");. 

package com.example.proyekpertama;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        WebView gwnbs = findViewById(R.id.webview);
        gwnbs.getSettings().setLoadsImagesAutomatically(true);
        gwnbs.getSettings().setJavaScriptEnabled(true);
        gwnbs.getSettings().setDomStorageEnabled(true);

        /* Agar halaman yang dimuat dapat melakukan zoom*/
        gwnbs.getSettings().setSupportZoom(true);
        gwnbs.getSettings().setBuiltInZoomControls(true);
        gwnbs.getSettings().setDisplayZoomControls(false);

        /* Mendukung scrollbar di dalam WebView*/
        gwnbs.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        gwnbs.setWebViewClient(new WebViewClient());
        gwnbs.loadUrl("file:///android_asset/gwnbs.html");
    }
}

Berikut dibawah ini gambar demo WebView versi HTML dan video pendek WebView versi halaman URL. Jika ada pertanyaan atau saran kritik, silahkan posting di komentar atau melalui kontak lain yang dapat dilihat pada halaman Contact.

Gambar 3 :  WebView versi HTML