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.

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.

Baca juga : Cara Menggunakan Toast dan Styleable Toast Pada Aplikasi Di Android Studio

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 :

Jarang Diketahui ! Cara Hapus Aplikasi Berbahaya di HP Lewat Play Store

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

Aplikasi Android WebView Glozaria (.apk)

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