Membuat Aplikasi Android dengan WebView Android Studio

Selamat siang, di post kali ini saya akan membahas tentang contoh penggunaan Webview pada Android Studio. Kebetulan juga yang sudah mengikuti seri Membuat Website Professional dengan PHP & MySql sesuai dengan tujuannya untuk mendorong Bangkitnya Semangat UKM Indonesia pada artikel ini akan saya lengkapi dengan aplikasi android memanfaatkan webview android studio tadi pada project tersebut.

Jika ingin menampilkan sebuah aplikasi berbasis web (atau sekedar sebuah halaman web) sebagai bagian dari aplikasi Android yang dikembangkan, bisa menggunakan WebView. Kelas WebView adalah anak kelas View, karena itu webview dapat menampilkan halaman web yang diinginkan sebagai bagian dari layout Activity. Sejak Android 4.4, komponen WebView berbasiskan Chromium open source project sehingga memiliki veresi ter-update engine JavaScript V8.

Untuk membuat aplikasi WebView, silahkan buka Android Studio dan buatlah proyek baru dengan cara memilih Menu File -> New -> New Project. Pada proyek ini saya berikan nama project Hospital. Untuk nama Company Domain nya saya menganturnya seperti ini com.app.hospital. Kemudian pilih lokasi penyimpanan proyek yang dibuat, selanjutnya silahkan pilih Next. Pada bagian penentuan minimum SDK, silahkan pilih sesuai yang diinginkan.

Pada pilihan Activity, silahkan pilih Blank Activity kemudian pilih Next. Selanjutnya akan muncul tampilan seperti di bawah ini. Biarkan saja tetap pada default-nya, untuk menyelesaikan pembuatan proyek silahkan tekan tombol Finish.

#1 activity_main.xml

Klik folder res >> layout >> klik activity_main.xml, kemudian pilih WebView yang berada pada Palette. Kemudian klik dan seret pada tampilan Android seperti dibawah ini.

Untuk Menyisipkan ProgessBar silahkan sisipkan code ini 

Jadi code lengkap pada activity_main.xml sbb: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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: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>

#2 MainActivity.java

Setelah itu, saya akan mendefinisikan situs web yang akan ditampilan pada class WebView. Untuk memasukan URL nya silahkan buka MainActivity.java yang terdapat pada folder java. Tambahkan kode seperti di bawah ini 

package com.app.hospital;

import androidx.appcompat.app.AppCompatActivity;
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;


public class MainActivity extends AppCompatActivity {
    WebView webView;
    ProgressBar progressBar;

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

    }

    public class myWebclient extends WebViewClient{
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            progressBar.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);
    }
}

Baris kode 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);
    }

#3 Style.xml

Hilangkan actionbar webview dengan kode dibawah (letaknya di dalam folder values) 

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

#4 AndroidManifest.xml

Android secara default tidak memiliki permission. Saat aplikasi perlu menggunakan fitur-fitur khusus yang ada di perangkat (misalnya mengakses kamera, mengirim SMS, membaca kontak, internet dll.) mereka perlu diberikan permission dari user agar tujuannya tercapai. Tambahkan sedikit kode dibawah untuk memberi akses internet pada aplikasi android. (letaknya pada folder manifests) 

#5 Screenshot

Berikut tampilan yang dijalankan pada android emulator

Sekian tutorial Membuat Aplikasi Android dengan WebView Android Studio, untuk membuat APK nya anda tinggal meng-generate project ini di Build >> Generate Signed Bundle/APK