Membuat Aplikasi Resep Sederhana + Source Code

Aplikasi Android WebView

Membuat Aplikasi Resep Sederhana dengan Android Studio, implementasi WebView dalam membuat aplikasi Android dilengkapi dengan source code.

Berikut ini tutorial membuat aplikasi android sederhana yaitu Aplikasi Resep berbasis WebView, dimana data diambil dari file html yang disimpan di dalam folder assets sehingga memungkinkan bisa berjalan secara offline.

Aplikasi ini hanya terdiri dari 2 bagian yaitu Home yang berisi daftar isi dan detail artikel. Menggunakan recyclerView untuk menampilkan list data di home, serta menggunakan Intent untuk perpindahan dari MainActivity ke DetailActivity.

Beberapa hal tambahan yang perlu dipersiapkan, antara lain gambar .png untuk header, kemudian file-file html yang nantinya akan ditamplikan.

Membuat Aplikasi Resep Sederhana

1. Buat Project dengan Start a new Android Studio Project

Android Studio 3

2. Kemudian Configure your new project, isikan Application Name dengan Aplikasi Resep dan Company domain sesuai dengan nama yang kamu inginkan, kemudian Klik Next dan pilih Empty Activity.

Membuat Aplikasi Resep

Lanjutkan hingga Finish. Biarkan gradle menggenerate project kita.

3. Buka AndroidManifest.xml tambahkan permission, meskipun bisa berjalan offline mungkin saja kamu ingin menampilkan gambar yang tersimpan online maka hal ini diperlukan.

4. Pada build.gradle bagian dependencies tambahkan recyclerview dan cardview, sesuaikan versinya, kemudian Sync Now.

5. Buka res->values->strings.xml lengkapi kode sebagai berikut.

6. Buka layout activity_main.xml tambahkan recylerView, lengkapi code seperti berikut ini

7. Membuat layout baru untuk tampilan dalam RecylerView. Pada bagian ini akan kita bagi menjadi 3 type tampilan, yaity viewType 1 untuk menampilkan data judul , viewType 2 untuk menampilkan Header, viewType 3 untuk menampilkan Footer.

New Layout Membuat Aplikasi Android

list_item.xml untuk menampilkan data judul

list_header.xml, untuk menampilkan header, untuk android:background, jangan lupa tambahkan bg_header.png di folder res/drawable

list_footer.xml, untuk menampilkan footer

8. Membuat java class baru dengan nama DataModel.java, dan buat Getter dan Setter

Membuat Aplikasi Android New Java Class

tambahkan  implements Serializable pada class DataModel, deklarasikan Integer viewType; String judul, konten; kemudian generate Getter and Setter sehingga otomatis tergenerate.

Aplikasi Resep Generate Getter Setter

kode lengkapnya akan seperti berikut ini:

9. Membuat java class baru dengan nama DataAdapter.java, lengkapi kode seperti berikut ini

10. Pada MainActivity.java deklarasikan variabel berikut,

Disini kita membuat fungsi bernama inputData dan dibagian onCreate membuat list data berupa judul dan nama file html yang akan ditampilkan dalam listview.

Kode lengkap pada  MainActivity.java

Jangan lupa tambahkan folder assets untuk menyimpan file-file html yang akan ditampilkan di activity detail nanti, copy kan file html ke folder assets.

Aplikasi Resep Android Assets Folder

Aplikasi Resep Android webview

11. Membuat activity_detail untuk menampilkan detail data dari file html dengan webview

Membuat activity baru untuk detail

edit activity_detail.xml, sesuaikan code nya

edit  DetailActivity.java lengkapi kode sebagai berikut

edit AndroidManifest.xml tambahkan :

android:parentActivityName=”.MainActivity”, kode lengkap manifest :

12. Silakan jalankan dengan tombol Run ke emulator atau device atau export ke apk untuk instal secara manual di device.

Tampilan hasil apps adalah sebagai berikut.

Membuat Aplikasi Resep Sederhana

Demikian tutorial ringkas bagaimana membuat aplikasi android sederhana di Android Studio. Download contoh .apk klik disini resep aplikasi.

Untuk tutorial memasang iklan di Aplikasi tersebut, menambahkan gambar thumbnail serta membuat alert dialog jika user menekan tombol onbackpress bisa di baca di tutorial selanjutnya berikut ini.

Download Source Code Membuat Aplikasi Resep Sederhana

Share to Unlockimage/svg+xml
Share tulisan ini ke Facebook / Twitter kamu untuk mendapatkan Link download.

22 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *