Banyak pengguna smartphone dengan android sebagai sistem operasinya. Sistem operasi android merupakan sistem operasi yang paling banyak digunakan saat ini. Maka dari itu dengan berkembangnya sistem operasi android maka banyak pula developer aplikasi android yang mulai menekuni bidang ini.
Dan pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Aplikasi Web View Dengan Progress Bar Menggunakan Android Studio. Sebelum kita masuk ke dalam tutorial pembuatan aplikasi web view, saya akan menjelaskan secara singkat apa itu web view dan juga fungsinya.
Web View merupakan salah satu widget yang berfungsi menampilkan halaman website di dalam aplikasi android. Jadi aplikasi Web View yang kita buat dapat menjadi aplikasi penampil halaman website otomatis tanpa harus membuka aplikasi browser.
Sebagai contoh www.goindoti.my.id hanya bisa diakses melalui aplikasi browser. Maka dengan Web View kita dapat membuat aplikasi androidnya dalam bentuk apk dan tentunya dapat diinstall pada smartphone android sehingga ketika kita ingin mengakses www.goindoti.my.id hanya perlu menyentuh icon goindoti yang sudah terinstall dismartphone android.
Tujuan saya membuat aplikasi web view ini untuk mempermudah saya dalam melihat postingan blog yang sudah di publikasi Khususnya dalam tampilan versi smartphone apakah sudah rapih atau perlu di edit kembali. Jadi saya tidak perlu ribet buka lewat aplikasi browser hanya tinggal di satu kali tap pada icon aplikasi web view bisa langsung ke akses ke halaman goindoti.
Jadi balik lagi kepembahasan kita di awal saya kan memberikan tutorial bagaimana Cara Mudah Membuat Aplikasi Web View Dengan Progress Bar Menggunakan Android Studio, berikut ulasannya.
Cara Mudah Membuat Aplikasi Web View Menggunakan Android Studio
1. Create New Project
Choose Your Project
Open Android Studio > File > New Project > Empty Activity > Next
Configure Your Project
Name (Nama Project Kamu) > Package Name (Default) > Save Location (Default) > Language (Java) > Minimum API Level (Saya Pilih API 21) > Finish
2. Buat Layout WebView pada Activity_Main.xml
Desain Actvity_Main.xml
Open App > Res > Layout > Activity_main.xml > Design > Palette > Widgets > WebView (Kamu tarik lalu letakan ke dalam layout Activity_main.xml)
Tambahkan Script Ke Text Actvity_Main.xml
Script WebView pada xml ditambahkan agar progress bar melakukan proses load website lalu menampilkan icon loading.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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: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"
/>
</androidx.constraintlayout.widget.ConstraintLayout>3. Edit MainActivity.java
Open MainActivity.java
Open App > Java > Com.example > MainActivity.java
Tambahkan Script Ke Text MainActivity.java
Tambahkan script untuk memanggil url website, object class Webview, dan proses progress bar pada MainActivity.java. Note: webView.loadUrl("https://Ganti-Nama-Web-Kamu.com");
package com.example.goindotiweb;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
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;
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://Nama-Web-Kamu.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);
}
}Note “Script dibawah digunakan untuk back ke halaman sebelumnya ketika kita sudah membuka konten yang terdapat pada website jadi tidak langsung terclose”.
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
webView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}4. Edit Style.xml
Open Style.xml
Open App > Res > Values > > Style.xml
Tambahkan Script Ke Text Style.xml
Tambahkan script dibawah ini agar UI terlihat lebih baik dengan menghilangkan actionbar webview
<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>5. Edit AndroidManifest.xml
Open AndroidManifest.xml
Open App > Manifests > AndroidManifest.xml
Tambahkan Script Ke Text AndroidManifest.xml
Tambahkan script user permission internet pada AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.goindotiweb">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/logoindoti"
android:label="@string/app_name"
android:roundIcon="@mipmap/logoindoti"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>6. Running Project
Silahkan running project melalui emulator android virtual device atau running project android studio langsung menggunakan smartphone yang kamu miliki. Kebetulan saya langsung menggunakan smartphone untuk merunning project dan janggan lupa aktifkan internet sobat maka hasilnya akan seperti gambar berikut ini.
Setelah berhasil merunning aplikasi web view tersebut di smartphone saya tidak menemukan ada nya masalah dalam tampilan website yang di tampilkan. Iklan adsense saya tetap tampil dan koding atau script juga berfungsi sebagai mana mestinya seperti layaknya menggunakan aplikasi browser. Mungkin setelahnya saya akan memberikan tutorial bagaimana Cara Mengganti Icon Launcher pada aplikasi di Android Studio.
Demikian tutorial bagaimana Cara Mudah Membuat Aplikasi Web View Menggunakan Android Studio. Semoga informasinya bermanfaat dan selmat mencoba.