Menampilkan Gambar dengan Picasso pada RecyclerView

Menampilkan Gambar Dengan Picasso

Tutorial Menampilkan Gambar dengan Picasso pada RecyclerView di Android Studio

Sebelumnya kita sudah Membuat Aplikasi Resep Sederhana, dan juga sudah berhasil menampilkan Iklan Admob di Aplikasi tersebut. Namun pada aplikasi yang telah kita buat list data hanya menampilkan Judul saja.

Nah, kali ini kita akan mencoba melengkapi aplikasi tersebut dengan menambahkan gambar thumbnail dengan Picasso pada RecyclerView atau di bagian home.

Langsung saja, buka kembali source code sebelumnya kemudian tambahkan script-script berikut ini.

1. Pada build.gradle bagian dependencies tambahkan picasso, kemudian Sync Now.

2. Buka DataModel.java pada String tambahkan variable gambar, kemudian buat Getter Setter.

Klik kanan -> Generate… (atau alt+insert) -> Getter and Setter -> OK

Getter Setter Gambar Menggunakan Picasso

3. Pada res->drawable tambahkan icon.png dan progress_image.png, buat progress_animation.xml di drawable untuk membuat animasi picasso sebelum gambar tampil.

Menambahkan File Xml di Drawable

Lengkapi kode progress_animation.xml sebagai berikut:

* Gambar icon.png ini akan ditampilkan apabila url gambar yang dipanggil error atau not found.

4. Buka res->layout, pada list_item.xml tambahkan ImageView

Sesuaikan desain layout list sesuai selera kamu, dalam hal ini kode full yang saya pakai di list_item.xml untuk tampilan adalah seperti ini:

5. Edit DataAdapter.java tambahkan kode picasso untuk menghandle tampilan gambar.

Pada class ItemHolder tambahkan kode berikut:

Pada onBindViewHolder tambahkan kode Picasso

Kode lengkap dari DataAdapter.java setelah ditambahkan :

6. Buka MainActivity.java, pada fungsi inputData tambahkan variable String gambar dan dataModel.setGambar(gambar);

dan dibagian onCreate pada String inputData, array data yang akan ditampilkan ke dalam list tambahkan url-url gambar,

Kode lengkap dari MainActivity.java

7. 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.

Menampilkan Gambar Dengan Picasso di Android Studio

Dalam contoh ini 2 baris data terakhir url gambar saya input salah, sehingga gambar yang tampil adalah icon.png yang tersimpan di drawable.

Error Image Picasso

Demikian tutorial ringkas bagaimana menampilkan gambar dengan Picasso pada RecyclerView di Android Studio. Mohon maaf banyak kekurangan, untuk download contoh .apk klik disini Picasso_AplikasiResep.apk.

Download Source Code Menampilkan Gambar dengan Picasso

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

Leave a Reply

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