Aplikasi Webview : cara membuat webview menggunakan Android studio

Aplikasi webview android adalah aplikasi yang memungkinkan Anda dapat mengintegrasikan halaman web atau blog sebagai bagian dari aplikasi android. Hal ini sangat baik kita terapkan apabila anda sudah memiliki blog yang ingin di konversi ke dalam bentuk aplikasi android.

Aplikasi webView hadir dengan semua fitur browser desktop seperti pengelolaan riwayat, cookie, dukungan HTML5 dan masih banyak lagi. Dengan menggunakan Webview Anda dapat membuat aplikasi keren serta dapat mengintegrasikan game HTML5 di aplikasi. Anda cukup mempelajari tahap demi tahap cara membuat aplikasi web android serta penerapan Webview dalam blog agar dapat membuat aplikasi android.

Cara Membuat Aplikasi Webview Android

Pada artikel ini kita akan sama-sama mempelajari penggunaan dasar WebView mulai dari menampilkan halaman web untuk membangun browser in-app sederhana yang menyediakan dukungan navigasi dan bookmark. Anda juga akan belajar bagaimana menggunakan WebView dengan elemen material lainnya seperti CollapsingToolbar dan NestedScrollView untuk mencapai pengalaman android yang lebih baik.

Pengetahuan Dasar webview android

Hal penting yang harus kita ketahui dalam mengintegrasikan WebView di aplikasi andoid tidak akan memakan waktu lebih dari dua langkah. Pertama, Anda perlu menyertakan elemen WebView di tata letak xml Anda. Biasanya source code Webview di letakkan pada layout karena semuanya berformat XML. Sebagai contohnya anda bisa perhatikan source code  berikut:

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

Yang kedua, anda perlu memuat laman url spesifik di webview dari aktivitas Anda. Di bawah ini versisdk memuat homepage google ke tampilan web.

WebView webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("http://google.co.id");

Meskipun memuat url sederhana tampaknya sangat mudah dengan menyesuaikan WebView memerlukan pengetahuan menyeluruh mengenai WebView dan metode yang diberikannya. Kita akan mulai dengan metode dasar yang disediakan WebView.

Baca Juga: mengenal Akun Admob untuk seorang Developer Android

 Nantinya kita akan membangun aktivitas browser sederhana yang bertindak sebagai browser dalam aplikasi yang menyediakan opsi mundur, maju dan bookmark . Kita akan belajar satu demi satu dengan memulai sebuah proyek sederhana di Android Studio.

Membuat Webview Android

Pada tutorial kali kita akan membangun sebuah aplikasi webview dimana tidak disediakan address bar untuk menginput laman web. Namun URL akan kita defenisikan langsung di dalam project aplikasi android.

1. Untuk memulai membuat aplikasi webview silakan buka software Android Studio dan buatlah project baru dengan memilih "Start a new Android Studio project".
2. Masukkan detail project anda seperti Application name (nama aplikasi), Company domain (versisdk.com), Project location (lokasi penyimpanan Project).
3. Pilih Next untuk melanjutkan ke menu "Target Android Devices".
4. Silakan anda pilih versi minimum sdk pada Phone and Tablet "Select the form factors and minimum SDK". Klik next untuk melanjutkan ke Add an Activity to Mobile.
5. Pada pilihan Activity, kami menganjurkan anda memilih "Empty Activity". kemudian pilih lagi Next untuk melakukan Configure Activity.
6. Pilihan pada Konfigurasi Activity biarkan secara default saja yakni Activity name (MainActivity) dan Layout Name (activity_main). Klik Finish
7. Harap tunggu hingga selesai Builing project.

Jika selesai Building project maka kita akan perhatikan default untuk MainActivity.class dan activity_main.xml. Lihat Source code defaultnya:

⇒ MainActivity.class

package com.farrelstudio.webview;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

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

⇒ activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.farrelstudio.webviewtutorial.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Agar dapat menampilkan URL web anda atau blog pada aplikasi webview, ada beberapa langkah pengeditan yang akan kita lakukan di antara lain:

1. Androidmanifest.xml
2. MainActivity.java
3. activity_main.xml
4. build.gradle

silakan simak penjelasanya:

1. Androidmanifest.xml

Dikarenakan kita akan menampilkan URL web pada aplikasi android maka perlu adanya koneksi internet. Oleh karena itulah maka kita harus memberikan izin atau permission pada aplikasi sehingga dapat mengakses internet.

Anda perlu menambahkan permission pada file androidmanifest.xml agar dapat memberikan izin aplikasi untuk mengakses internet.

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

2. Build.gradle

Saat kita pertama kali membuat project baru pada point diatas yakni membuat webview, terdapat beberapa script yang perlu kita tambahkan yakni appcompat. Script ini kita harus tambahkan pada buil.gradle agar tidak muncul error pada MainActivity.java. Anda perlu menambahkan tepat di bawah dependencies { sehingga menjadi:

dependencies {
compile 'com.android.support:appcompat-v7:26.1.0'
 implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

3. MainActivity.java

Selanjutnya, anda harus salin dan timpa keseluruhan kode dibawah ini pada MainActivity.class

package com.versisdk.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.support.v4.widget.SwipeRefreshLayout;


public class MainActivity extends Activity {
    WebView webView;
    SwipeRefreshLayout swipe;
    private static final String Situs_Url = "https://versisdk.blogspot.com";

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

        swipe = (SwipeRefreshLayout)findViewById(R.id.swipe);

        swipe.setColorSchemeResources(R.color.colorPrimary, R.color.colorPrimaryDark, R.color.colorAccent);

        swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                WebAction();
                }
          });
        WebAction();
    }

    public void WebAction(){

        webView = (WebView) findViewById(R.id.webView);
       webView.getSettings().setAppCacheEnabled(true);
       webView.getSettings().setJavaScriptEnabled(true);
     
        webView.loadUrl(Situs_Url);
        swipe.setRefreshing(true);
        webView.setWebViewClient(new WebViewClient(){

       public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)   {
          webView.loadUrl("file:///android_asset/error.html");
               }
             public void onPageFinished(WebView view, String url)
                 swipe.setRefreshing(false);
               }
        });
    }


}

Pada kode yang telah anda timpa pada MainActivity.class terdapat beberapa hal yang anda perlu ketahui. Kita akan membahas kode yang telah kami Bold di atas.

a) package com.versisdk.webview.

Package name merupakan identitas sebuah aplikasi sehingga kode ini harus sama di setiap project class java.

b) private static final String Situs_Url = "https://versisdk.blogspot.com"

Jika anda berkeinginan mengganti URL maka silakan ganti URL di atas dengan URL Web anda.

c) swipe = (SwipeRefreshLayout)findViewById(R.id.swipe)

Kode ini sebenarnya memiliki peranan untuk menampilkan loading saat aplikasi mengakses URL anda. Loading akan tampil berganti warna dan akan berhenti hingga seluruh laman berhasil dimuat.

SwipeRefreshLayout akan terhubung dengan layout activity_main.xml dengan identitas R.id.swipe.

d) webView = (WebView) findViewById(R.id.webView)

Untuk kode point keempat menghubungkan WebView class java ke layout supaya URL Web anda dapat ditampilkan dengan identitas penghubung yakni R.id.webView.

4. activity_main.xml

Silakan edit activity_main.xml dengan memasukkan Webview yang terletak pada Palette -> Containers. Klik dan tarik masuk webview pada area project.

Atau anda bisa timpa keseluruhan kode di bawah ini pada activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.versisdk.webview.MainActivity">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    </android.support.v4.widget.SwipeRefreshLayout>
</android.support.constraint.ConstraintLayout>

 android:id="@+id/swipe" berfungsi menghubungkan loading web pada class java. Sedangkan android:id="@+id/webView"  akan mengidentifikasi URL yang telah didefenisikan dari MainActivity kemudian ditampilkan ke activity_main.xml.

Agar lebih memahami mengenai cara membuat aplikasi Webview dengan menggunakan android Studio, Silakan anda download contoh webview android yang sudah jadi disini.

Demikianlah tutorial kami kali ini, cara membuat aplikasi Webview dengan menggunakan Android Studio. Jika ada pertanyaan silakan isi kolom komentar.