Blog

Halo sobat netizen kali ini saya akan sharing cara membuat webview di android studio, buat temen – temen yang belum tahu webview adalah sebuah penyebutan sebuah aplikasi android yang menampilkan sebuah web dalam bentuk aplikasi android, kedengaranya mirip seperti browser ya

Webview sedikit berbeda dengan browser, kalau di browser kita mengetikan URL https://mr-leong.com maka browser akan menuju ke alamat tersebut namun jika di webview kita tidak perlu mengetikan URL seperti di atas akan tetapi sekali kita membuka aplikasi maka halaman akan langsung menuju ke alamat yang kita tentukan.

Nah untuk cara pembuatanya sobat harus menginstall terlebih dahulu Android Studio di Komputer / Laptop sobat kemudian sobat buka Android Studio dan buat project baru kemudian pilih Empty Activity atau Basic Activity Template

Sisanya setting nama project dan lainya sesuai keinginan sobat. Dalam pembuatan webview ada beberapa poin saja yang sobat perlu perhatikan dalam codinganya jadi sobat hanya perlu mengikuti langkah di bawah dan dijamin akan berhasil 100%.

Catatan : 

Beberapa file yang perlu diedit dalam pembuatan Webview Android 

1. AndroidManifest.xml
2. activity_main.xml
3. MainActivity.java
4. styles.xml

Oke kita mulai dari yang pertama yaitu file AndroidManifest.xml file ini sobat bisa temukan dalam folder manifests. klik 2x dan ikuti coding di bawah atau lebih bagusnya tambahkan coding yang tidak ada di Android Studio sobat dengan coding di bawah..

AndoridManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="leong.com.webview">

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

    <application
        android:usesCleartextTraffic="true"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Penjelasan AndoridManifest.xml

Nah coding di atas yang saya tambahkan adalah

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

kode ini berfungsi untuk memberikan akses kepada aplikasi untuk membuka internet

Selanjutnyya ada tambahan koding di bagian <application

android:usesCleartextTraffic="true"

untuk kode di atas ini berfungsi untuk menghilangkan error pada Versi Android 8.0 Ke atas, kalau tidak salah pesan errornya jika tidak menginputkan kode di atas adalah

err cleartext not permitted webview

hal tersebut terjadi karena versi android 8 – 9 ke atas menonaktifkan fitur cleartext secara default yang membuat webview tidak bekerja sebagaimana mestinya.

Oke setelah selesai dengan koding di bagian AndroidManifest.xml sekarang kita lanjut ke bagian koding activity_main.xml yang terdapat di folder res –> layout, sekarang sobat tambahkan koding yang tidak ada dengan coding yang saya sedikan di bawah.

activity_main.xml

<?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:id="@+id/webview"
        />

</RelativeLayout>

Penjelasan activity_main.xml

nah untuk koding di atas selain merubah bagian atas menggunalan RelativeLayout yang sobat perlu perhatikan adalah bagian di bawah ini…

<WebView
//Berfungsi untuk menyamakan lebar dengan Handphone sobat
    android:layout_width="match_parent"    
   
//Berfungsi untuk menyamakan tinggi dengan Handphone sobat
    android:layout_height="match_parent" 
  
//Berfungsi untuk membuat identitas pada webview   
    android:id="@+id/webview"                     
    />

Kita lanjut setelah selesai pada bagian activity_main.xml sekarang kita berlaih ke bagian yang paling inti yaitu MainActivity.java yang terdapat pada folder java, sekarang sobat tambahkan kode di bawah ini jika belum ada atau bisa di copy paste

MainActivity.java

package leong.com.webview;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity<WebactivityTab1> extends AppCompatActivity {

    WebView web;
    String url;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        url = "ganti_dengan_url_sobat.com";

        web= (WebView) findViewById(R.id.web);
        web.getSettings().setJavaScriptEnabled(true);
        web.loadUrl(url);
        web.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView web, String url) {
                if(url.startsWith("tel:") || url.startsWith("whatsapp:")) {
                    Intent intent = new Intent(Intent.ACTION_VIEW);
                    intent.setData(Uri.parse(url));
                    startActivity(intent);
                    return true;
                }
                return false;
            }
        });

    }
    @Override
    public void onBackPressed() {
        if (web.canGoBack()) {
            web.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

Penjelasan MainActivity.java

Nah untuk kode di atas ini memang lebih panjang dari yang lain karena kebanyakan perintah ini dan itu dilakukan di MainActivity.java, sekarang saya coba menerangkan bagian pentingnya saja. pertama ada bagian di bawah ini…

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

kode di atas berfungsi untuk memasukan library yang dibutuhkan untuk pembuatan aplikasi webview, jadi sobat masukan saja import seperti di atas. Kemudian ada lagi

public class MainActivity<WebactivityTab1> extends AppCompatActivity {
    //Membuat Variabel Webview dengan nama web
    WebView web;
    //Membuat Variabel url dengan tipe data String (huruf / kata)
    String url;

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

        //masukan url web kalian di bawah ini
        url = ""ganti_dengan_url_sobat.com"";     
  
        //mencari id dengan nama web yang sudah kita buat sebelumnya
        web = (WebView) findViewById(R.id.web);

        //membuat javascript pada web dapat dikenali oleh webview
        web.getSettings().setJavaScriptEnabled(true);

        //melakukan load pada url di atas
        web.loadUrl(url);

        //membuat webview apabila ada tombol share ke WA ataupun Telegram langsung membuka         aplikasi bawaan di smartphone
        web.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView web, String url) {
                if(url.startsWith("tel:") || url.startsWith("whatsapp:")) {
                    Intent intent = new Intent(Intent.ACTION_VIEW);
                    intent.setData(Uri.parse(url));
                    startActivity(intent);
                    return true;
                }
                return false;
            }
        });

terakhir ada kode di bawah ini…

@Override
public void onBackPressed() {
    if (web.canGoBack()) {
        web.goBack();
    } else {
        super.onBackPressed();
    }

yang artinya apabila saat ditekan tombol kembali pada smartphone kalau masih bisa kembali ke halaman sebelumnya maka webview akan kembali namun apabila telah sampai di ujung halaman maka tombol kembali harus ditekan 2 kali untuk menutup aplikasi, kalau tidak memakai kode ini maka saat di ujung halaman kalau ditekan kembali sekali saja maka aplikasi akan keluar.

Sekarang kita ke bagian terakhir yaitu mengedit bagian styles.xml seperti coding di bawah ini…

styles.xml

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

Penjelasan styles.xml

nah untuk kode di atas hanya berpengaruh sedikit ke tampilan yang dalam pengertianya kode di atas tidak menampilkan ActionBar dan hal tersebut dikarenakan kita merubah kode pada bagian

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Oke sampai disini sekarang sobat bisa mencoba run aplikasinya menggunakan Virtual Device Emulator (Kalau memory Kuat) 😀 atau menggunakan Device asli cukup dengan kabel USB. atau kalau sudah yakin langsung saja build APK nya dan nanti hasilnya akan seperti gambar di bawah ini

Tampilan Aplikasi

Tampilan Halaman pada aplikasi Webview

Nah satu lagi tips yang akan saya berikan yaitu untuk mengganti nama aplikasi dan icon pada Webview.

Mengganti Nama Aplikasi 

1. Buka folder res—–>values
2. Klik 2x Pada strings.xml
3. Ganti Nama Aplikasi

Mengganti Icon Aplikasi

1. Klik Kanan pada Folder app—–>New —–>Image Assets
2. Ganti IconType menjadi Launcher Icons
3. Ganti Path Sesuai dengan alamat Gambar
4. Sesuaikan sesuai keinginan sobat

Oke sampai disini sobat sudah bisa membuat aplikasi Android Webview, keunggulannya kita membuat webview adalah nggak perlu capek capek ngoding andorid kalau udah punya website 😀 cukup buat webview masukin ke playstore atau share ke temen temen beres deh. Mungkin sekian dulu yang bisa saya bagikan semoga bisa bermanfaat untuk rekan – rekan, apabila ada pertanyaan bisa corat – coret pada kolom komentar dan salam Mr. Leong

Bagikan Postingan ini :