Cara Membuat Aplikasi Android WebView Menggunakan Android Studio

Ngulik Kode - Hallo kali ini saya ingin membagikan cara membuat project WebView dengan menggunakan Android Studio, WebView adalah sebuah class pada android yang menampilkan dan menjalankan aplikasi mobile yang berbasis web. Sederhananya, WebView itu seperti android browser, tetapi tidak mempunyai address bar untuk memasukkan URL, karena URL sudah kita didefinisikan dalam aplikasi android tersebut.

Membuat WebView Dengan Android Studio
1. Pertama harus membuat project baru android studio anda. lakukan seperti biasa.
2. Kemudian konfigurasi penamaan aplikasi dan package.
3. Pada bagian penentuan build target, SDK minimum yang anda inginkan.
4. Pada saat pemilihan Add an activity to mobile,pilih blank activity.
5. Pada choose optional for your new file, klik Finish.

Jika anda masih kesulitan untuk membuat project baru yang sudah saya tunjukan di atas, akan saya berikan petunjuk yang lebih lengkap membuat project baru android studio dibawah ini.

Membuat Project Baru dan Menjalankan Project di Android Studio

6. Jika Android Studionya sudah kebuka seperti gambar dibawah, lalu pilih mode design, pilih WebView pada Palette.


Klik dan tarik dari ujung kiri atas ke ujung kanan bawah hingga satu layar penuh.

7. Untuk membuat aplikasi android kita dapat mengakses internet dengan menambahkan permission internet sebagai berikut.
<uses-permission android:name="android.permission.INTERNET" />
Pasang kode diatas kedalam file AndroidManifest.xml


8. Lalu buka file MainActivity.java, letakan kode berikut tepat dibawah kode 
setContentView(R.layout.activity_main);
String url = "http://ngulikode.blogspot.com/"; //Pendefinisian URL WebView view = (WebView) this.findViewById(R.id.webView); //sinkronisasi object berdasarkan id view.getSettings().setJavaScriptEnabled(true); //untuk mengaktifkan javascript view.loadUrl(url); //agar URL terload saat dibuka aplikasi
Jangan lupa mengimport class webview agar webview terdefinisikan.


9.  Aplikasi WebView kita sudah siap, sekarang tinggal mencoba menjalankan aplikasi yang sudah kita buat, klik RUN 'app'


10. Saya menjalankan project langsung menggunakan HP Android saya tanpa menggunakan emulator. Baca Artikel : Menjalankan Project Android Studio Langsung Dari Ponsel Android Tanpa Emulator


Jika aplikasi berhasil dan tidak ada error akan tampak seperti gambar dibawah ini.


Informasi Tambahan

Untuk membuat aplikasi webview fullscreen , hapus kode berikut dari activity_main.xml

android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"

Untuk membuat aplikasi webview tidak redirect ke web browser saat di klik link , kita perlu menambah class WebViewClient dan override method tersebut. Letak kode berikut di MainActivity.java
import android.webkit.WebView; //import WebView classimport android.webkit.WebViewClient; //import WebViewClient class
public class MainActivity extends ActionBarActivity {

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

        WebView view = (WebView) this.findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.setWebViewClient(new MyBrowser());
        view.loadUrl("http://ngulikode.blogspot.com");
    }

    private class MyBrowser extends WebViewClient {
        @Override        public  boolean shouldOverrideUrlLoading(WebView view, String url ){
            view.loadUrl(url);
            return true;
        }
    }
Sekian Tutorial dari saya jika masih ada yang kurang jelas bisa anda komentar di kolam komentar dibawah ini. Terimakasih

Aplikasi Ngulik Kode yang sudah jadi berbentuk APK bisa kalian Unduh link dibawah ini :)
Download
click to begin
2,4 MB .APK

9 komentar

  1. Malam Min atau Kontributor atau siapapun yang Master, mohon pencerahannya dong, bagaimana jika didalam Web kita ada menu untuk Upload File? dimana sekenario-nya adalah apabila kita menekan tombol Upload maka otomatis Device kita akan membuka aplikasi kamera, jadi bukan dari File Manager atau Galeri tempat dimana File diambil, tapi langsung dari jepretan Kamera Device kita... Saya harap bantuannya dong Min, dimana saya harus meletakan kode tersebut dan apa yang harus saya masukan kodenya?

    Sebelumnya terimakasih ya bagi yang menjawab... :)

    BalasHapus
    Balasan
    1. Saya coba bantu jawab ya, untuk mengakses perangkat camera pada android haruslah memerlukan izin pada file manifest yg ada pada project android kita. Akan tetapi pada kasus ini project yang kita buat hanya murni menggunakan webview saja alias menampilkan konten apa adanya dari web yg kita definisikan urlnya pada method webview tersebut. Alhasil jikalau ada button upload pada web yang diload oleh method webview ditekan maka hanya akan menampilkan return dari fungsi button yg kita buat pada web tersebut bukan dari project android kita, tentu saja hal tersebut tidak akan memberikan hak akses kamera kepada aplikasi kita.

      Hmm jadi panjang ya jawabannya hehe tp sy penasaran juga gimana caranya ya...
      Kalau saya sih ada sedikit ide atau solusi untuk pemecahan masalah ini. Solusi pertyama, mungkin kita bisa mengakalinya dengan menambahkan button tersendiri pada aplikasi android untuk memanggil akses kamera tersebut. Solusi kedua, bisa dengan mendefinisikan button baru pada web kita dengan method passing untuk memanggil akses perangkat kamera pada ponsel android tersebut.

      Ya kalau hanya sekedar komentar mungkin sulit juga dipahami lebih baik solusi ini dicoba kebenarannya dulu dengan membuat sebuah contoh project. Mungkin admin blog bisa membantu memecahkan masalah ini :)

      Salam,

      Hapus
  2. terima kasih, sangat membantu saya.
    bermanfaat ilmunya mas admin.

    (Y)

    BalasHapus
    Balasan
    1. terima kasih juga, sudah berkunjung ke blog saya :-D

      Hapus
  3. Gan kalo cara menambahkan loading dulu sebelum masuk ke halaman web nya gimana yah?

    BalasHapus
    Balasan
    1. agan bisa cek di postingan ini http://www.ngulikode.com/2015/10/membuat-splashscreen-loading-layar.html

      Hapus
  4. ask, klo misalkan kita klik menu about di webkita tapi gak lari kebrowser itu gimana ya gan? cara diatas jika klik link malah lari kebrowser

    BalasHapus
    Balasan
    1. Agar link tidak rederect ke browser diperlukannya Penambahan kode berikut view.setWebViewClient(new MyBrowser()); dan membuat class baru dengan nama MyBrowser. Perhatikan lagi pada kode yang saya berikan diatas. Terimakasih :-D

      Hapus
  5. saya coba untuk browse file (upload) dan print (download pdf) ngak jalan solusinya seperti apa ? mohon pencerahan ..

    BalasHapus


EmoticonEmoticon