Sampai Jadi Buat Aplikasi Android Untuk Web ( WebView ) Fast Loading Di Android Studio

Artikel diperbarui pada 1 Juni 2021
Hai glozovers! Artikel ini merupakan artikel pertama yang mengulas tentang Android Studio di situs tercinta ini. Untuk itu berikan admin semangat untuk membuat artikel serupa dengan cara komentar yang positif dan share artikel ini pada yang lain.

Banyak sekali situs-situs besar menyediakan situsnya dalam sebuah aplikasi baik di android maupun di ios. Aplikasi tersebut dapat diunduh melalui Google Play Store maupun App Store.

Sampai Jadi Buat Aplikasi Android Untuk Web (WebView) Fast Loading Di Android Studio

Dengan memiliki sebuah aplikasi untuk situs maka akses ke situs akan jadi semakin mudah. Buat kamu yang berniat melakukan ini dapat mengikuti langkah-langkah yang akan admin jelaskan ini.


Adapun kelebihan dari aplikasi webview ala Glozaria yang akan dibuat ini adalah :  
  • Loading cepat (fast loading)
  • Menggunakan progress bar
  • Menggunakan Alert Dialog Keluar
Baca juga :

{tocify} $title={Table of Contents}

Langkah-langkah Membuat Aplikasi Android untuk Situs Web ( WebView )

1. Install aplikasi android studio. Jangan lupa koneksikan laptop dengan jaringan internet yang stabil. Jika sudah maka buka aplikasinya.
2. Buat proyek android baru dengan klik Start a new Android Studio project.


3. Pilih template 'Empty Activity' lalu klik Next.


4. Beri nama aplikasi kamu. Tentukan level API minimum yang diinginkan, klik Finish


Di sini admin akan membuat aplikasi dengan nama 'Glozaria'. Untuk nama paket dapat dibiarkan otomatis atau disesuaikan seperti contoh di atas yaitu dengan nama paket 'glozaria.com.app'. Untuk bahasa menggunakan Java. Tunggu sinkronisasi selesai.

5. Pada layar activity_main.xml, ganti semua dengan kode xml berikut.

<?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>
6. Pada layar MainActiviy.java, ganti semua dengan kode java berikut.

package glozaria.com.app;

import android.annotation.SuppressLint;
import android.app.AlertDialog;
import android.content.DialogInterface;
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;


@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
bar=findViewById(R.id.progressBar2);
webView.setWebViewClient(new myWebclient());
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://www.glozaria.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)
{ //jika back key di tekan
if((keyCode == KeyEvent.KEYCODE_BACK)&& webView.canGoBack())
{
webView.goBack();
return true;

}

return super.onKeyDown(keyCode, event);

}

public void onBackPressed() {
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
MainActivity.this);

// set title
alertDialogBuilder.setTitle("Keluar");

// set dialog message
alertDialogBuilder
.setMessage("Apakah Anda ingin keluar?")
.setCancelable(false)
.setPositiveButton("Ya",new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,int id) {
// if this button is clicked, close
// current activity
MainActivity.this.finish();
}
})
.setNegativeButton("Tidak",new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
// if this button is clicked, just close
// the dialog box and do nothing
dialog.cancel();
}
});

// create alert dialog
AlertDialog alertDialog = alertDialogBuilder.create();

// show it
alertDialog.show();
}
}
7. Pada menu sebelah kiri, klik app 👉 manifests. Lalu double klik untuk membuka AndroidManifest.xml. Ganti semua kode xmlnya dengan kode berikut dan jangan lupa ubah glozaria.com.app sesuai nama paket aplikasi kamu.

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

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


    <application
        android:allowBackup="true"
        android:fullBackupContent="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:hardwareAccelerated="true">
        <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>

Pengaturan Aplikasi WebView

Pengaturan Styles XML
Pada menu sebelah kiri, klik res 👉 values. Download file styles.xml ini lalu copy paste/refactor ke dalam direktori tersebut. Kode untuk styles.xml adalah sebagai berikut.

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorAccent</item>
<item name="colorPrimaryDark">@color/colorAccent</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>
Kode ini untuk :
  • Mengatur tampilan Webview menjadi full Screen dengan menyembunyikan Action Bar.
  • Mengatur warna header.
Pengaturan Warna pada Color XML
Pada aplikasi ini ada penambahan warna untuk colorAccent. Tambahkan kode berikut pada color.xml dan ganti #D81B60 dengan warna yang diinginkan.

<color name="colorAccent">#D81B60</color>


Mengganti Icon Aplikasi

Persiapkan gambar untuk icon aplikasi dengan dimensi minimal 512 x 512. Untuk membuatnya menjadi icon aplikasi atau icon launcher dapat lewat github ini.

Setelah mendapatkan file zip icon launchernya, ubah icon launcher di Android Studio melalui menu Image Asset. Gunakan file gambar icon launcher pada folder mipmap-xxxhdpi.

Nah, pengaturan yang admin butuhkan sudah selesai dan saatnya menjalankan aplikasi dan menginstallnya di HP.

Install Aplikasi Di HP

Untuk mempersingkat tutorialnya, admin langsung saja jelaskan caranya ya.
1. Aktifkan fitur pengembang (developer) di HP.
2. Buka menu pengembang, carilah usb debugging lalu aktifkan.
3. Masih di menu pengembang, carilah ijin install aplikasi via usb, lalu aktifkan.
4. Sambungkan HP dengan laptop menggunakan kabel USB. Tunggu hingga penyiapan kabel selesai (ready).
5. Cek pada daftar emulator bahwa merk dan type HP yang digunakan sudah ada.
6. Klik ikon Run untuk menjalankan proses gradle dan menginstallnya di HP. Setelah gradle berhasil dijalankan akan dilanjutkan dengan proses install di HP. Selama proses ini jangan biarkan layar HP redup atau terkunci. Ini dapat menyebabkan kegagalan instalasi.
7. Tunggu pemberitahuan instal selesai dan sukses.
Aplikasi akan otomatis terbuka. Pastikan jaringan internet tersedia supaya dapat terbuka dengan baik.

Selamat aplikasi berhasil dibuat.

Download Aplikasi WebView Glozaria (Demo)


Demikian Cara Membuat Aplikasi Android Untuk Web Fast Loading Dengan Android Studio Sampai Jadi.
Saria Bakti

Seorang Blogger sejak 2015. Senang berbagi informasi yang dapat meningkatkan Imunitas Tubuh.

28 Komentar

  1. cara menambahkan url nya dmn ya ka ?

    BalasHapus
    Balasan
    1. Pada langkah ke - 6 di MainActivity. Cari kode berikut dan ganti dengan url webnya :

      webView.loadUrl("https://www.glozaria.com");

      Hapus
    2. ka, untuk back ke halaman sebelumnya bisa, tetapi kalau back untuk keluar aplikasi yang menampilkan dialog "Apakah Anda ingin keluar?" tidak bisa.
      kenapa ya ka ?

      Hapus
    3. Sudah diperbaiki kodenya, harusnya kode alertDialog.show(); di bawah // show it seperti kode yang sudah diperbaiki di atas.

      Hapus
  2. Apakah aplikasi webview ini bisa dimasukkan iklan? Terima kasih

    BalasHapus
    Balasan
    1. Untuk kodingan ini tidak bisa menempatkan iklan.

      Hapus
  3. Gambar sejumlah artikel di home tidak muncul. Ada solusinya?

    BalasHapus
    Balasan
    1. Mungkin masalah koneksi saja. Perkecil ukuran gambar atau konversi gambar ke format lain seperti Webp supaya loading blog lebih cepat..

      Hapus
  4. sama seperti aisya nih, back bisa tapi gak bisa exit, butuh bantuan

    BalasHapus
    Balasan
    1. Sudah diperbaiki kodenya, harusnya kode alertDialog.show(); di bawah // show it seperti kode yang sudah diperbaiki di atas.

      Hapus
    2. Revisi kodenya di MainActivity

      Hapus
  5. Mas Tombol keluar aplikasinya ga bisa ya mohon petunjuk

    BalasHapus
  6. AndoridManifest.xml g bisa d tampilkan ya kodenya?

    BalasHapus
  7. Hallo, saya punya masalah mengenai icon, kenapa icon-icon gak muncul ya di webview ?

    BalasHapus
    Balasan
    1. Tulis alamat webnya mas biar bisa di cek, tulis pakai koma ya, jangan pakai titik.

      Hapus
  8. Saya mau tanya.. kalau blog kita ada adsensenya lalu di buat webview dan di upload di playstore..

    Itu akan menimbulkan masalah nggk ya di adsensenya.. secara kan utk aplikasi iklan yg di pakai admob..

    Thanks

    BalasHapus
    Balasan
    1. Belum pernah coba. Namun kurang aman untuk adsense mas, sebaiknya dipisah. Gunakan admob mas untuk aplikasi.

      Kalau sudah punya adsense, gampang daftar admob kog. Namun sebaiknya akun admob dan adsense pakai email berbeda karena admob rawan pembatasan iklan.

      Hapus
  9. Balasan
    1. Tidak familiar dengan web GIS mas. Namun harusnya bisa, kan hanya perlu alamat URL-nya saja. Kalau Web GIS punya desain responsif jauh lebih baik lagi.

      Hanya saja, kodingan di atas tidak akan cukup untuk menangani fitur-fitur tertentu di web GIS bila tidak ditambahkan kodingan lagi.

      Hapus
  10. gan gagal di manifest

    BalasHapus
  11. Kalau mau gak full screen dan bisa menampilkan toolbar utk about dan exit gimana ya? file mana yg harus diubah gan?

    BalasHapus
  12. Untuk video kok gak bisa fullscreen ya gan? Alias tidak ada icon kotak full screen dibawah kanan video

    BalasHapus
Lebih baru Lebih lama