Buat Aplikasi Android Menggunakan WebView di Android Studio

Langkah-langkah untuk Membuat Aplikasi Android untuk Situs Web atau Blog menggunakan WebView:

1. Buat proyek android baru dan beri nama apa saja terserah. Disini sebagai contoh Saya buat aplikasi android untuk blog ini, ekarzaen.blogspot.com. Jadi saya menamainya sebagai Ekarzaen Blog.

2. Sekarang pilih SDK minimum. Saya memilih SDK minimum sebagai API 10. Pilih Blank Activity> Next> Finish. Saya menggunakan nama activity dan file xml sesuai nama default. Sampai tahap ini kita selesai membuat Proyek Android.

3. Sebagai tambahan kita juga dapat membuat Splashscreen seperti yang telah dibahas dalam post sebelumnya tentang cara membuat splashscreen di android studio.

4. Sekarang buka Main Activity.java di Nama Projek> app> src> main> java> MainActivity
Sekarang ketikkan kode berikut:

package com.ekarzaen.ekarzaenblog;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;


public class MainActivity extends Activity {

 private WebView mWebView;
 ProgressBar progressBar;


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

 mWebView = (WebView) findViewById(R.id.activity_main_webview);

 progressBar = (ProgressBar) findViewById(R.id.progressBar1);

 WebSettings webSettings = mWebView.getSettings();
 webSettings.setJavaScriptEnabled(true);
 mWebView.loadUrl("http://www.ekarzaen.blogspot.com");
 
 }
}

Di sini Anda perlu menentukan url mana yang akan dimuat di loadUrl WebView. Cukup ketikkan alamat web Anda di sana. Di sini saya menggunakan url situs web saya: http://www.ekarzaen.blogspot.com yang ingin saya desain aplikasinya.

Selanjutnya edit activity_main.xml dengan mengklik tab teks dan paste kode berikut untuk menampilkan progressbar dan menampilkan situs web Anda:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ProgressBar
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:id="@+id/progressBar1"/>

    <TextView
        android:layout_below="@+id/progressBar1"
        android:layout_height="wrap_content"
        android:id="@+id/LoadingText"
        android:layout_width="fill_parent"
        android:text="Loading, Please Wait.."
        android:textSize="20sp"
        android:gravity="center_horizontal">
    </TextView>

    <WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

Pastikan Anda menambahkan izin Internet dalam file manifest:

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

Sekarang coba jalankan aplikasi di emulator atau menggunakan real device. Sampai tahap ini aplikasi sudah bisa me-load blog atau situs web. Tetapi ada satu permasalahan yaitu ketika kita mengklik tautan apa pun di situs web, aksi tersebut akan membuka peramban seluler Anda alih-alih membuka secara langsung tautan itu di dalam aplikasi. Kita perlu memastikan bahwa tautan apa pun terbuka di aplikasi itu sendiri.

Untuk membuat tautan apa pun berfungsi di aplikasi itu sendiri, ganti kode dengan yang berikut di MainActivity.java:

package com.ekarzaen.ekarzaenblog;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;


public class MainActivity extends Activity {

    private WebView mWebView;
    ProgressBar progressBar;


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

        mWebView = (WebView) findViewById(R.id.activity_main_webview);

        progressBar = (ProgressBar) findViewById(R.id.progressBar1);

        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.loadUrl("http://www.ekarzaen.blogspot.com");
        mWebView.setWebViewClient(new HelloWebViewClient());


    }

    private class HelloWebViewClient extends WebViewClient{

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            // TODO Auto-generated method stub
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView webView, String url)
        {
            webView.loadUrl(url);
            return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            // TODO Auto-generated method stub
            super.onPageFinished(view, url);

            progressBar.setVisibility(view.GONE);
        }

    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    { //jika back key di tekan
        if((keyCode == KeyEvent.KEYCODE_BACK)&& mWebView.canGoBack())
        {
            mWebView.goBack();
            return true;

        }

        return super.onKeyDown(keyCode, event);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    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();
    }
}

Di sini saya juga menyiapkan WebViewClient untuk menampilkan tautan apa pun di aplikasi itu sendiri dan juga mengganti method onKeyDown untuk mengeksekusi method goBack WebView. Saya juga menggunakan Method BackPressed untuk menampilkan dialog Keluar jika pengguna menekan tombol kembali.

Sebagai tambahan Kita dapat mengubah ikon launcher dengan mengganti ikon di folder mipmap yang umumnya berlokasi di:

C:\Users\username\ AndroidStudioProjects\Nama_proyek\app\src\main\res

Untuk meng-generate paket ikon Anda dapat menggunakan tool ini. Nah sekarang aplikasi seluler basic untuk Situs Web Anda sudah siap untuk dicoba.