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

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.

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

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 layar AndroidManifest.xml. Pada layar ini ganti semua kode xmlnya dengan kode berikut.

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

Sampai di sini sebenarnya aplikasi sudah dapat dijalankan/dibuat. Namun kali ini admin akan menambahkan sedikit pengaturan.

Pengaturan Tambahan Aplikasi WebView

Pada menu sebelah kiri, klik res 👉 values. Lalu double klik pada styles.xml untuk membukanya. Pada layar ini, ganti semua kode dengan kode 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.

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

Android StudioAplikasiWebview