Belajar Cara Membuka File HTML pada Webview Android Studio

Oleh Wildan M Athoillah 10.54

Assalamualaikum Warahmatullahi Wabarakatuh.

Webview adalah sebuah widget yang digunakan untuk menampilkan halaman website, webview ini berperan seperti browser yang dapat menampilkan sebuah situs atau web, tentunya keren bukan, jika kita punya sebuah website lalu mengubahnya kedalam bentuk .apk.

Pada dokumen atau file html tersebut, dapat digunakan untuk membuat konten untuk aplikasi yang akan kita buat, dengan menggunakan html, css, java script, dsb. seperti saat kita membangun website pada umunya, hanya saya dijalankan secara offline melalui aplikasi tersebut.

Materi lainnya yang direkomdasikan:

Penggunaan file html kedalam Webview sangat cocok jika kalian ingin membuat aplikasi seperti Referensi pembelajaran, minimal kalian punya basic di pemrograman html, css, atau java script. Pada tuorial ini kita akan membuat aplikasi sederhana menggunakan html dan webview.

Belajar Cara Membuka File HTML pada Webview Android Studio

1) Buat project baru pada Android Studio kalian.

2) Didalam project android tersebut, pertama kita perlu membuat folder / direktori assets didalam folder main, direktori ini digunakan untuk menyimpan file-file seperti .html, dsb. Untuk membuatnya klik kanan pada folder main > New > Directory.

Buat folder baru bernama assets.

3) Selanjutnya buat file baru, klik kanan pada folder assets > New > File. berinama file tersebut misalnya "kontenApp.html", untuk membuat file html, pada ujung nama file tersebut kita perlu menambahkan .html sebagai format filenya.

4) Berikutnya kita akan membuat konten sederhana didalam file .html tersebut, sebagai contoh, disini saya akan membuat biodata / profile pribadi menggunakan tag html dasar saja, tetapi jika kalian sudah paham pada pemrograman web, seperti css, php atau javascript, kalian boleh membuatnya sesuka hati.

<html>
<body>

<marquee>
    <h4>
        <center><b>WILDAN TECHNO ART<br>CIANJUR APPS DEVELOPER</b></center>
    </h4>
</marquee>

<center><b><font size="4" color="red" >Biodata Pribadi</font></b></center>
<br>
    Nama: Wildan M Athoillah<br>
    Umur: 20 Tahun<br>
    Alamat: Jl.Yos Sudarso, RT02/RW15, Cianjur - 43211<br>
    Status: Mahasiswa<br>
    Tanggal Lahir: 06 - Agustus - 1998<br>
    Jenis Kelamin: Laki-Laki
</body>
</html>

Didalam file tersebut saya tidak menggunakan tag <head> </head> untuk menapilkan teks tersebut pada layar aplikasi, didalam tab body, saya menambahkan beberapa tag pendukung seperti <marquee> (membuat teks berjalan ke samping), <h4> (membuat teks header), <font>, <center>, <b>, dsb.

5) Buat dan buka file activity_main.xml kalian, disini kita hanya perlu menambahkanWebview pada layout activity tersebut.

<?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:layout_margin="12dp"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <WebView
        android:id="@+id/konten_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />
    
</RelativeLayout>

6) Buka class MainActivity.java, pada class tersebut kita akan memanggil file tersebut pada Webview, caranya cukup simple, kita hanya perlu menggunakan fungsi loadUrl().

package android.cianjur.developer.net.basicandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

    //Deklarasi Variable
    private WebView myWebview;
    private String pathFile = "file:///android_asset/kontenApp.html";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myWebview = findViewById(R.id.konten_view);
        myWebview.loadUrl(pathFile);
    }
}

Coba kalian perhatikan, pertama kita mambut 2 buah variable, yaitu Webview dan pathFile. didalam pathFile kita membuat data String berupa lokasi dimana kita menyimpan file .html tersebut, walaupun nama folder yang kita buat sebelumnya adalah assets tapi disini kita harus menuliskannya dengan nama android_asset.

Lalu untuk memanggil url atau path dari file tersebut, kita hanya perlu menggunakan fungsi loadUrl() dari Webview.

Jika didalam file .html yang kalian buat terdapat javascript, kalian perlu mengaktifkannya dengan cara seperti berikut ini.

WebSettings settings = myWebview.getSettings();
settings.setJavaScriptEnabled(true);
myWebview.loadUrl(pathFile);

Demo:

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyaka, silakan isi kolom komentar dibawah ini.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.