LOADING . . .

Membuat Aplikasi Android dengan WebView Android Studio

0 Comment



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

Screen Shot 2020-04-23 at 13.36.07

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.

Screen Shot 2020-04-23 at 13.36.16

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

Screen Shot 2020-04-23 at 14.00.45

Untuk Menyisipkan ProgessBar silahkan sisipkan code ini 

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

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) 

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

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

<uses-permission android:name="android.permission.INTERNET"/>

#5 Screenshot

Berikut tampilan yang dijalankan pada android emulator

Screen Shot 2020-04-23 at 13.44.46

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




I’d love to hear from you, leave a Reply!