Beranda / Android Programming / Basic Android / Webview

Cara Membuat Fast Loading WebView di Android Studio

Oleh Wildan M Athoillah

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada aplikasi Android, Webview digunakan untuk menampilkan halaman web, layaknya sebuah browser, dengan adanya webview, kalian dapat menghubungkan aplikasi android dengan konten yang berada di web, secara otomatis, konten yang terdapat pada web tersebut, akan singkron dengan tampilan atau konten web pada aplikasi android. Webview menggunakan mesin rendering yang disebut WebKit, digunakan untuk menampilkan halaman web dan mencakup metode untuk menavigasi maju dan mundur melalui history, memperbesar dan memperkecil tampilan, melakukan pencarian teks, dsb.


Pada materi berikut ini, kita akan belajar, bagaimana cara membuat serta menggunakan webview pada Android Studio, dan juga beberapa settingan pada webview tersebut, agar proses rendering saat pemuatan halaman menjadi lebih cepat.

Materi Lainnya Yang Direkomendasikan:

Membuat Fast Webview pada Android Studio

Buat Project Baru pada Andrid Studio kalian. atau IDE sejenisnya.

Karena Webview memerlukan koneksi Internet, pertama kita akan menambahkan <uses-permission> INTERNET, didalam file AndroidManifest.xml (app > src > main) untuk Mengizinkan aplikasi membuka soket jaringan.
<uses-permission android:name="android.permission.INTERNET"/>
Dan jangan lupa untuk mengaktifkan hardwareAccelerated pada tag <application>. didalam file AndroidManifest, Seperti pada gambar berikut ini:


Setelah itu buatlah new Empty Activity, buka activity tersebut, pada kode xmlnya, kita akan menggunakan LinearLayout (Vartical) sebagai container, lalu akan kita tambahkan komponen webiew kedalam layout/container tersebut seperti ini :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="android.cianjur.developer.net.fastwebview.web_page">

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

</LinearLayout>
Jika kalian tidak menggunakan kode xml secara manual, kalian dapat mendrag/drop webview tersebut pada bagian Pallet dibagian layout, seperti ini:


Selanjutnya, kita akan memasukan Source Code pada project tersebut, buka file.java kalian, sebagai persiapan, masukan beberapa package yang diperlukan, lalu kita akan menginisialisasi Webview dan beberpa method, serta variable String, yang digunakan untuk menyimpan URL web, seperti pada contoh berikut ini:
package android.cianjur.developer.net.fastwebview;

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

//Beberapa Package Yang Akan Digunakan Untuk Merancang Webview
import android.view.View;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class web_page extends AppCompatActivity {
    
    private WebView web;
    
    //URL web, yang akan kita gunakan pada Webview
    private String website = "http://www.wildantechnoart.net/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_page);
        web = findViewById(R.id.my_web);
        settings();
        load_website();
    }

    //Method Ini Digunakan sebagai Setelan/Pengaturan Web
    private void settings(){

    }

    //Untuk Mengatur, dan menampilan Halaman Web pada Aplikasi
    private void load_website(){

    }
}
Disan, kita membuat 2 buah method yang bernama settings() dan load_website(), kedua method tersebut nanti akan kita gunakan sebagai setelan web dan pemasangan artibut-atribut yang diperlukan untuk webview tersebut.

Pada method settings() masukan script/kode berikut ini :
//Method Ini Digunakan sebagai Setelan/Pengaturan Web
    private void settings(){
        WebSettings web_settings = websiteku.getSettings();
        web_settings.setJavaScriptEnabled(true);
        web_settings.setAllowContentAccess(true);
        web_settings.setUseWideViewPort(true);
        web_settings.setLoadsImagesAutomatically(true);
        web_settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        web_settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        web_settings.setEnableSmoothTransition(true);
        web_settings.setDomStorageEnabled(true);
    }
Penjelasan :

Pada method tersebut terdapat sebuah variable webSettings yang digunakan untuk mengelola setelan webiew.
  • javaScriptEnabled: Untuk mengaktifkan atau menonaktifkan javaScript pada webview.
  • allowContentAccess: Mengaktifkan atau menonaktifkan akses URL konten dalam WebView, fungsinya untuk memuat konten dari penyedia konten pada sistem. Defaultnya aktif/true
  • useWideViewPort: Menetapkan apakah WebView harus mengaktifkan dukungan untuk tag meta HTML "viewport" atau harus menggunakan area pandang lebar/wide viewing area.
  • loadImagesAutomativally: Mengaktifkan atau menonaktifkan pemuatan gambar pada webview, semua gambar pada konten akan dimuat secara otomatis, nilai defaultnya adalah true
  • cacheMode (LOAD_NO_CACHE): Berfungsi agar webiew tidak menggunakan cache saat memuat jaringan.
  • setRenderPriority (RenderPriority.HIGH): Untuk mengatur prioritas Rendering, Nilai Defaultnya adalah NORMAL, perlu kalian ketahui, motode ini tidak digunakan di tingkat API 18 (JellyBean 4.3), jadi tidak akan didukung pada versi yang mendatang.
  • setEnableSmoothTransition: Menetapkan apakah WebView memungkinkan transisi yang mulus saat melakukan panning atau zooming atau saat jendela webview tidak memiliki fokus, jika kita set menjadi true, maka webview akan memilih solusi untuk memaksimalkan kinerjanya. nilai defaultnya adalah false. (Metode ini tidak digunakan lagi di tingkat API 17)
  • domStorageEnabled Menetapkan apakah API penyimpanan DOM diaktifkan. DOM atau Penyimpanan web, digunakan untuk menyimpan data di browser web, mirip seperti cookie namun dengan kapasitas yang sangat meningkat.


Selanjutnya pada method load_website() masukan script/kode berikut ini :
//Untuk Mengatur, dan menampilan Halaman Web pada Aplikasi
    private void load_website(){
        if(Build.VERSION.SDK_INT >= 19){
            websiteku.setLayerType(View.LAYER_TYPE_HARDWARE, null);
        }else{
            websiteku.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }

        websiteku.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                view.loadUrl(request.toString());
                return true;
            }
        });

        websiteku.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        websiteku.loadUrl(URL);
    }
Penjelasan :
  • Dalam method load_website(), jika versi SDK lebih besar/sama dengan API 19 (Kitkat), maka webview tersebut akan mengset tipe layer jenis Hardware, hal ini digunakan untuk meningkatkan kualitas rendering saat transformasi rotasi diterapkan pada suatu tampilan. 
  • Dan jika versi SDK dibawah API 19, maka webview tersebut akan mengset tipe layer jenis Software. 
  • Pada WebViewClient, terdapat sebuah method bernama shouldOverrideUrlLoading, fungsinya untuk mengambil alih kontrol saat url baru akan dimuat di WebView saat ini. Jika WebViewClient tidak disediakan, secara default WebView akan meminta Activity Manager untuk memilih penangan yang tepat untuk url. 
  • setScrollBarStyle digunakan untuk memilih gaya ScrollBar pada webView. 
  • loadUrl, digunakan untuk memuat Url halaman web.

Tambahkan juga, method onBackPressed(), agar aplikasi tidak langsung tertutup saat menekan tombol back, jika website pada webview tersebut bisa kembali ke halaman sebelumnya.

public void onBackPressed() {
        if(websiteku.canGoBack()){
            websiteku.goBack();
        }else{
            super.onBackPressed();
        }
    }
Selanjutnya, Jalankan project tersebut menggunakan emulator atau langsung pada smartphone android kalian.

 Demo:


Jika kalian ingin menghapus ActionBar/ToolBar pada aplikasi tersebut, supaya tampilan webview yang kita buat menjadi full screen. Buka direktori main > res > values > styles.xml. Lalu ubah Style nya menjadi NoActionBar.


Demo:


Kalian bisa mendownload Project tersebut di GitHub saya. Download Disini.

Terimakasih atas kunjungannya, semoga meteri yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.