Tutorial lengkap android studio webview sederhana

Cara mudah membuat webview di android studio dengan mudah. Portal Engkungs kali ini akan memberikan tutorial lengkap untuk membuat Aplikasi Webview sederhana di android. WebView merupakan tampilan halaman web yang di tampilkan dalam sebuah layout aplikasi dengan alamat url yang telah di sesuaikan.

Bagaimanakah cara membuatnya, di sini kita akan membuat Webview sederhana dengan beberapa fungsi-fungsinya seperti menampilkan gambar memuat atau menambahkan fungsi tombol kembali untuk kembali ke halaman sebelumnya. Mari kita coba untuk membuatnya di bawah ini.

Sebelum kita mulai praktik membuat webview, langka pertama yang harus kita lakukan adalah membuat sebuah proyek baru dengan tools andalan kita masing-masing. Buatlah sebuah proyek aplikasi bari dengan nama “Webview sederhana” dan isi package dengan“com.engkungs.wbv” intuk menyesuaikan pada praktik kali ini.

Tutorial pertama

Membuat Android studio webview

Proyek aplikasi sudah di buat, langkah kedua yang harus kita lakukan yaitu mengatur layout dengan menambahkan kode wenview di dalam sebuah elemen relative. Kenapa harus relative. karena pada nantinya kita akan menambahkan progsesbar untuk memuat halamannya. Buka res/layout/main.xml kemudian isi kode di bawah ini dan perhatikan id webview-nya.

Setelah kita mengatur di layout, langkah selanjutnya kita akan menambahkan aksinya di java. Buka com/engkungs/wbv/MainActivity.java kemudian edit. Buatlah variabel WebView dan WebSettings di dalam method class MainActivity atau di atas method onCreate.

 

Selanjutnya kita mencocokkan id WebView dan mengatur Websettings sekalian memberi url pada halaman yang akan kita muat dan menyetel WebViewClient.

Berikutnya yaitu membuat class WebViewClient yang sudah di setting di variabel tadi. Tambahkan kode di bawah ini dan letakkan di dalam method class MainActivity atau di bawah method onCreate.

Langkah terakhir yaitu menambahakan perizinan akses internet pada android kita agar aplikasi yang kita buat dapat mengakses sebuah data internet. Buka AndroidManifest.xml kemudian tambahkan kode di bawah ini dan letakkan di atas kode <application kemudian jalankan aplikasi yang kita buat tadi.

Tutorial Kedua

Menampilkan progsesbar untuk memuat halaman

 

 

Apasih fungsi progsesbar pada webview, yaitu untuk menampilkan gambar memuat seperti gambar sepinner sebelum halaman yang kita tuju selesai termuat dan apabila halaman yang kita muat sudah termuat, maka gambar spinner tadi akan hilang dengan sendirinya. Bagaimana cara membuatnya, simak di bawah ini.

Buka main.xml kemudian edit kembali. Tambahkan kode di bawah ini dan letakkan di bawah kode <Webview …../> dan perhatikan id dari progsesbar.

Selanjutnya buka MainActivity.java dan edit lagi. tambahkan method di bawah ini dan letakkan tepat di dalam class WebViewClient yang telah kita buat sebelumnya atau di bawah method shouldOverridUrlLoading.

Kemudian jalankan aplikasi kita kembali untuk melihat hasilnya.

Tutorial Ketiga

Memberi fungsi tombol kembali untuk kembali ke halaman sebelumnya

Pada sebuah Webview  pada dasarnya hanya menampilkan halaman yang kita muat saja dan jika kita tekan tombol kembali, maka akan keluar dari aktivitas itu. Sebagai contoh kita memuat-kan halaman beranda facebook, dan kemudian kita menuju ke halaman obrolan. Kemudian kita menekan tombol kembali, maka halaman yang kita muat tidak kembali ke  halaman beranda facebook, melainkan keluar dari aplikasi. Nah bagaimana agar bisa kembali ke halaman beranda facebook atau kembali ke halaman sebelumnya, yaitu kita memberi fungsi onBackPressed. Lalu bagaimana cara membuatnya, simak caranya di bawah ini.

Buka kembali kelas MainActivity.java kemudian edit lagi. Tambahkan method boolean onKeyDown di bwah ini dan letakkan di dalam kelas MainActivity atau di bawah kelas WebViewClient dan perhatikan.

android studio webview
android studio webview screenshoot

Kemudian jalankan aplikasi yang telah kita buat tadi untuk melihat hasilnya dan coba muat halaman berikutnya dan jika sudah termuat halaman berikutnya, kemudian tekan tombol kembali, maka akan kembali ke halaman sebelumnya. dan jika halaman sebelumnya sudah tidak ada lagi maka fungsi tombol kembali akan keluar aplikasi. Perhatikan kode diatas dengan kode finish().

Itulah Tutorial Webview Android Studio Lengkap dan semoga dapat di pahami dan sangat bermanfaat.

6 pemikiran pada “Tutorial lengkap android studio webview sederhana

  1. mau tanya bang,
    bagaimana penerapan bila aplikasi yang didalamnya ada menu activity webview, sementara bila kita tekan back tidak langsung exit tapi kembali ke menu main_menu.xml
    saat ini saya masih kesusahan dalam penerapannya

    terima kasih.

    • Di atas sudah saya jelaskan agan, agan tinggal buat method baru
      @Override
      public boolean onKeyDown(int keyCode, KeyEvent event)
      {
      if(event.getAction()==KeyEvent.ACTION_DOWN){
      switch(keyCode){
      case KeyEvent.KEYCODE_BACK:
      if(web.canGoBack()){
      web.goBack();
      }
      else{
      finish();
      }
      return true;
      }
      }
      return super.onKeyDown(keyCode, event);
      }

      yang sudah saya jelaskan di atas. Semoga bermanfaat

Tinggalkan komentar

+ 28 = 35