Josephin 22:01 Blog

Halo Pengembang, Dalam tutorial ini, saya akan membuat web menjadi aplikasi android atau yang biasa disebut dengan WebView dengan menggunakan android studio. WebView adalah sebuah class di Android yang dapat menampilkan tampilan peramban web pada aplikasi Android.

Baca Juga

Nantinya, aplikasi yang akan dibuat menghasilkan tampilan seperti kita membuka situs web menggunakan peramban webpage. Ini digunakan di beberapa aplikasi populer seperti aplikasi facebook android yang membuka webpage di browser aplikasi, Kalian juga dapat menggunakan tampilan web android untuk menyampaikan di browser aplikasi di aplikasi android kalian.

Dibawah ini gambaran WebView yang akan kita buat menjadi aplikasi :

Langka-langkah pembuatan aplikasi android WebView :

Silahkan buka Android Studio dan buatlah proyek baru dengan cara memilih File → New → New Project dan masukkan nama aplikasi kalian. Contoh saya beri nama aplikasinya MagicMoney.
Masukkan Company Domain, ini digunakan untuk mengidentifikasi paket aplikasi kalian secara unik di seluruh dunia. Saya mengaturnya seperti ini magic.money.mantap.
Kemudian pilih lokasi penyimpanan data aplikasi yang dibuat, untuk package name biarkan saja seperti itu lalu untuk Include C++ support dan Include Kotlin support biarkan saja tidak usah di centang, langsung saja pilih Next.
Pada bagian penentuan minimum SDK, silahkan pilih sesuai yang diinginkan. khusus untuk tutorial ini pilih saja yang pilih Phone and Tablet, untuk API nya pilih yang API 16:Android 4.1 (Jelly Bean) lanjut klik Next.
Pada pilihan Add an Activity to Mobile, silahkan pilih Empty Activity kemudian pilih Next.
Pada bagian Configure Activity biarkan saja tetap pada deafult nya, untuk menyelesaikan pembuatan aplikasi silahkan tekan tombol Finish.

Setelah menekan tombol finish kalian akan melihat tampilan seperti gambar di atas, (lewati tahap ini jika tidak terjadi error) jika terdapat error seperti gambar di atas (No.1) kalian klik build.gradle (Module: app) (No.2) lalu masukkan script di bawah ini seperti gambar (No.3).

compile 'com.android.support:support-annotations:27.1.1'

Setelah memasukkan tombol di atas klik Sync Now seperti gambar (No.4) disini saya menggunakan android studio v3.0.

Karena Aplikasi WebView ini membutuhkan akses ke internet supaya terhubung ke web, tambahkan akses internet di AndroidManifest.xml, caranya pilih app → manifest → AndroidManifest.xml tambahkan kode di bawah ini.

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

Contoh posisinya seperti di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="mantap.money.magic.magicmoney">
    //Tambahkan Kodenya di sini
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"

Kode akses ke internet telah kita tambahkan, lanjut buka activity_main.xml, caranya pilih app → res → layout → activity_main.xml. Setelah di layar activity_main.xml ganti mode Design ke mode Text posisinya berada di bawah, setelah berada di mode Text perhatikan kode di bawah ini.

<?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="mantap.money.magic.magicmoney.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>

Ganti kode yang saya tandai diatas dengan kode yang saya tandai dibawah ini.

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="mantap.money.magic.magicmoney.MainActivity">

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

</RelativeLayout>

Setelah selesai mengganti kode diatas, lanjut ke MainActivity.java, caranya pilih app → java → MainActivity.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

//*Tambahkan Kode di bawah ini
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

//*Tambahkan Kode di bawah ini
WebView webView;
WebSettings webSettings;

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

//*Tambahkan Kode di bawah ini
webView = (WebView)findViewById(R.id.webview);
webSettings = webView.getSettings();
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("https://magic-moneyy.blogspot.com");

}
}

Silahkan jalankan aplikasi yang sudah dibuat pada emulator Android Studio atau langsung dijalankan pada ponsel Android.