Aplikasi Webview : Cara Menciptakan Webview Memakai Android Studio

Aplikasi webview android ialah aplikasi yang memungkinkan Anda sanggup mengintegrasikan halaman web atau blog sebagai potongan dari aplikasi android. Hal ini sangat baik kita terapkan apabila anda sudah mempunyai blog yang ingin di konversi ke dalam bentuk aplikasi android.

Aplikasi webView hadir dengan semua fitur browser desktop ibarat pengelolaan riwayat, cookie, proteksi HTML5 dan masih banyak lagi. Dengan memakai Webview Anda sanggup menciptakan aplikasi keren serta sanggup mengintegrasikan game HTML5 di aplikasi. Anda cukup mempelajari tahap demi tahap cara menciptakan aplikasi web android serta penerapan Webview dalam blog supaya sanggup menciptakan 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 proteksi navigasi dan bookmark. Anda juga akan mencar ilmu bagaimana memakai WebView dengan elemen material lainnya ibarat 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 sebab semuanya berformat XML. Sebagai misalnya anda sanggup 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 acara 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 sepertinya sangat gampang 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 acara browser sederhana yang bertindak sebagai browser dalam aplikasi yang menyediakan opsi mundur, maju dan bookmark . Kita akan mencar ilmu 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 kafetaria untuk menginput laman web. Namun URL akan kita defenisikan eksklusif di dalam project aplikasi android.

1. Untuk memulai menciptakan aplikasi webview silakan buka software Android Studio dan buatlah project gres dengan menentukan "Start a new Android Studio project".
2. Masukkan detail project anda ibarat Application name (nama aplikasi), Company domain (versisdk.com), Project location (lokasi penyimpanan Project).
3. Pilih Next untuk melanjutkan ke sajian "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 menentukan "Empty Activity". lalu pilih lagi Next untuk melaksanakan 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 sampai 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 sanggup 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 sebab itulah maka kita harus memperlihatkan izin atau permission pada aplikasi sehingga sanggup mengakses internet.

Anda perlu menambahkan permission pada file androidmanifest.xml supaya sanggup memperlihatkan izin aplikasi untuk mengakses internet.

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

2. Build.gradle

Saat kita pertama kali menciptakan project gres pada point diatas yakni menciptakan webview, terdapat beberapa script yang perlu kita tambahkan yakni appcompat. Script ini kita harus tambahkan pada buil.gradle supaya tidak muncul error pada MainActivity.java. Anda perlu menambahkan sempurna 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 aba-aba 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 jawaban 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 aba-aba yang telah anda timpa pada MainActivity.class terdapat beberapa hal yang anda perlu ketahui. Kita akan membahas aba-aba yang telah kami Bold di atas.

a) package com.versisdk.webview.

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

b) private static jawaban 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 bekerjsama mempunyai peranan untuk menampilkan loading ketika aplikasi mengakses URL anda. Loading akan tampil berganti warna dan akan berhenti sampai 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 aba-aba point keempat menghubungkan WebView class java ke layout supaya URL Web anda sanggup 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 sanggup timpa keseluruhan aba-aba 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 lalu ditampilkan ke activity_main.xml.

Agar lebih memahami mengenai cara menciptakan aplikasi Webview dengan memakai android Studio, Silakan anda download tumpuan webview android yang sudah jadi disini.

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

Share this post