Cara Membuat Aplikasi Android dari Website dengan Android Studio

Pengen punya aplikasi android tapi bingung cara bikinnya ?. Tenang aja, ada solusi mudah buat bikin aplikasi android, bahkan cuma butuh beberapa menit untuk bikinnya. Yang kita butuhkan hanya link/url website dan android studio.

Apa itu Webview ?

Di android studio ada nama webview, apa itu webview ? webview itu adalah class di android studio untuk menampilkan halaman web pada aplikasi android. Jadi kalo teman-teman sekalian punya blog atau website yang rame kunjungannya dan pengen punya aplikasi android tapi gak ribet bikinnya, fitur webview yang ada di android ini bisa dicoba.

Cara Bikin Aplikasi Android Dengan Webview

Pada tutorial kali ini saya asumsikan teman-teman sekalian sudah install android studio di kompinya masing-masing.

• 1. Buka android studionya masing-masing, lalu buat project baru, klik menu file > New > New Project. Disini saya beri nama proyeknya ApkWebview. Untuk nama company domain dan letak project bisa teman-teman sesuaikan sendiri atau sesuaikan dengain nama defaultnya saja.

Membuat project baru di android studio

• 2. Klik next lalu pilih Android SDK, pilih sesuai dengan keinginan masing-masing, atau biarkan default sesuai dengan pilihan android studio teman masing-masing.
• 3. Klik next lalu pilih empty activity, klik next lagi lalu finish. Maka akan tampil halama kerja seperti di bawah ini.

Halaman kerja pertama android studio

• 4. Pertama biar gak kelupaan buka file AndroidManifest.xml. filenya bisa anda cari di direktori app > manifest > AndroidManifest.xml. Lalu tambahkan script di bawah ini di atas tag <application>.

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

• 5. Lalu buka activity_main.xml ganti semua script di  dalamnya dengan script di bawah ini.

<?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:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

• 6. Buka tab design maka tampilannya akan berubah seperti gambar di bawah ini

Tampilan Web View

• 7. Lalu buka file MainActivity.java tambahkan script di bawah ini di bawah script public class MainActivity extends AppCompatActivity {

    WebView mWebView;

    String URL = "http://www.detik.com/";

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


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

        //menghidupkan javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(URL);
        mWebView.setWebViewClient(new MyWebViewClient());
    }

    //method ini perlu ditambahkan agar saat halaman web diload tetap diload di aplikasi, tidak diload di webbrowseer
    private class MyWebViewClient extends WebViewClient {


        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            view.loadUrl(url);
            return true;
        }
    }

    //tambahkan method ini agar saat tombol back ditekan, tidak keluar dari aplikasi tapi kembali ke halaman sebelumnya
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()){
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

Jika muncul banyak error, klik pada tulisan yang error lalu tekan alt+enter untuk mengimport class.

• 8. Jika sudah, coba running aplikasi, hasilnya akan tampil seperti gambar di bawah ini

Contoh tampilan aplikasi

Tips & Trick

aplikasi android yang diconvert dari halaman web sebenarnya bisa tampil bagus asalkan website yang kita buat sudah mendukung teknologi responsive. website yang telah responsive akan menyesuaikan tampilan sesuai dengan device yang digunakkan. Sehingga aplikasi yang dibangun dengan webview + website kita akan lebih tampak profesional.

Sekian tutorial membuat aplikasi android dengan webview, mudah-mudahan artikel singkat ini membantu teman-teman sekalian. Ada pertanyaan atau saran, kirim komentar kalian di bawah ini. Happy coding!!!