Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Home
Android
Android Studio

Membuat WebView pada Android Studio

WebView pada Android Studio


Jika ingin menyediakan aplikasi web (atau hanya halaman web) sebagai bagian dari aplikasi klien, Anda dapat melakukannya menggunakan WebView. Class WebView adalah ekstensi class View Android yang memungkinkan Anda menampilkan halaman web sebagai bagian dari tata letak aktivitas Anda. Class ini tidak menyertakan fitur apa pun dari browser web yang dikembangkan sepenuhnya, seperti kontrol navigasi atau kolom URL. Semua yang dilakukan WebView secara default adalah menampilkan halaman web.
Teori Singkat

Skenario umum ketika menggunakan WebView menjadi sangat membantu adalah saat Anda ingin memberikan informasi di aplikasi yang mungkin perlu diperbarui, seperti perjanjian pengguna akhir atau panduan pengguna. Dalam aplikasi Android, Anda dapat membuat Activity yang berisi WebView, lalu menggunakannya untuk menampilkan dokumen Anda yang dihosting secara online.

Skenario lain ketika WebView menjadi sangat membantu adalah saat aplikasi Anda memberikan data kepada pengguna yang selalu memerlukan koneksi internet untuk mengambil data, seperti email. Dalam kasus ini, Anda mungkin menyadari bahwa lebih mudah untuk membuat WebView di aplikasi Android Anda yang menampilkan halaman web dengan semua data pengguna, daripada membuat permintaan jaringan, lalu mengurai data, dan merendernya dalam tata letak Android. Sebagai gantinya, Anda dapat merancang halaman web yang disesuaikan untuk perangkat Android, lalu menerapkan WebView di aplikasi Android Anda yang memuat halaman web.
Menambahkan WebView ke aplikasi Anda

Modul ini menunjukkan cara memulai WebView dan cara melakukan beberapa hal tambahan, seperti menangani navigasi halaman dan mengikat JavaScript dari halaman web Anda ke kode sisi klien di aplikasi Android Anda. Untuk menambahkan WebView di aplikasi, Anda dapat menyertakan elemen di tata letak aktivitas, atau menetapkan seluruh jendela Aktivitas sebagai WebView di onCreate().
Menambahkan WebView di Layout aktivitas

Untuk menambahkan WebView ke aplikasi Anda di tata letak, tambahkan kode berikut ke file XML tata letak aktivitas Anda:
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />
Untuk memuat halaman web di WebView, gunakan loadUrl(). Contoh:
 WebView myWebView = (WebView) findViewById(R.id.webview);
 myWebView.loadUrl("http://naskahkode.com");
Menambahkan WebView di onCreate()

Untuk menambahkan WebView ke aplikasi Anda di metode onCreate() aktivitas, gunakan logika yang mirip dengan yang berikut ini:
WebView myWebView = new WebView(activityContext);
setContentView(myWebView);
Kemudian muat halaman dengan:
myWebView.loadUrl("https://naskahkode.com");
Namun, sebelum berfungsi, aplikasi Anda harus memiliki akses ke Internet. Untuk mendapatkan akses Internet, minta izin INTERNET di file manifes Anda. Contoh:
    <manifest ... >
    <uses-permission android:name="android.permission.INTERNET"/>
        ...
    </manifest>
Itulah semua yang Anda butuhkan untuk dasar WebView yang menampilkan halaman web. Selain itu, Anda dapat menyesuaikan WebView dengan mengubah hal-hal berikut:

    Mengaktifkan dukungan layar penuh dengan WebChromeClient. Class ini juga dipanggil saat WebView memerlukan izin untuk mengubah UI aplikasi host, seperti membuat atau menutup jendela dan mengirim dialog JavaScript kepada pengguna. Untuk mempelajari lebih lanjut proses debug dalam konteks ini, baca Proses Debug Aplikasi Web.Menangani peristiwa yang memengaruhi perenderan konten, seperti error pada pengiriman formulir atau navigasi dengan WebViewClient. Anda juga dapat menggunakan subclass ini untuk mengintersep pemuatan URL.
Mengaktifkan JavaScript dengan mengubah WebSettings.Menggunakan JavaScript untuk mengakses objek framework Android yang telah Anda masukkan ke dalam WebView.

Praktikum


Pertama jalankan aplikasi IDE Android Studio, caranya :

  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next 

Configure Your Project 

  • Name → WebView
  • Package Name → ubah menjadi nama blog kalian masing-masing, di sini saya  menggunakan url blog saya com.naskahkode lalu di ikuti nama project WebView
  • Save Location → C:\Users\DELL\AndroidStudioProjects\NamaMhs\ WebView
  • Language → Java Minimum API Level → API 14 → Klik Finish

Siapkan sebuah file gambar dengan forma file .png yang akan kita gunakan sebagai icon Aplikasi web view kita lalu copy kedalam folder ../res/drawable/ seperti gambar di bawah ini


 
Selanjutnya buat layout dengan ketikan kode program activity_main.xml seperti di bawah ini, kita akan menambahkan progress bar di layout ini supaya ketika proses load website akan menampilkan icon loading.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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>

Setelah itu Buka dan ubah script MainActivity.java dan tambahkan script untuk memanggil url website, object class Webview, dan proses progress bar pada MainActivity.java
package com.naskahkode.webview;

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

public class MainActivity extends AppCompatActivity {
    WebView webView;
    ProgressBar bar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
        bar=(ProgressBar) findViewById(R.id.progressBar2);
        webView.setWebViewClient(new myWebclient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://naskahkode.com/");
    }
    public class myWebclient extends WebViewClient{
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            bar.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);
    }
}

Tambahkan uses-permission INTERNET dalam script AndroidManifest.xml seperti di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.naskahkode.webview">

        <uses-permission android:name="android.permission.INTERNET"/>
        <application
            android:allowBackup="true"
            android:icon="@drawable/logo"
            android:label="@string/app_name"
            android:roundIcon="@drawable/logo"
            android:supportsRtl="true"
            android:theme="@style/Theme.WebView">
            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <action android:name="android.intent.action.VIEW" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>

    </manifest>

Agar terlihat lebih menarik User Interface-nya kita hilangkan actionbar webview dengan merubah script themes.xml yang ada dalam folder ../res/values/themes seperti dibawah ini
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.WebView" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
    </style>
</resources>


    Setelah itu coba kita jalankan menggunakan emulator yang tersedia di Android Studio Anda, maka akan tampil seperti video dibawah ini

Sumber :
https://developer.android.com/guide/webapps/webview?hl=id

Post a Comment