Monday, October 16, 2017

Menampilkan Gambar dari Internet di Android Studio dengan Glide Library Part 1

Pada kesempatan kali kita akan mencoba menampilkan gambar dari internet di Android Studio menggunakan Glide Library.Tutorial dibawah ini tidak sekedar menampilkan gambar utama dari internet tapi juga bisa menampilkan gambar loading / placeholder sebelum gambar berhasil dimuat penuh selain itu ada gambar saat terjadi kegagalan loading dari internet. 

Apakah Glide itu ? Glide merupakan salah satu library yang berfungsi membantu menampilkan gambar dari internet maupun dari lokal sehingga mempermudah kita untuk memasukkan gambar di konten aplikasi android yang kita buat.

image androidhive


Beragam cara untuk menampilkan gambar dari internet namun setelah admin mencobanya sendiri Glide relatif lebih mudah dan simpel daripada menggunakan asyntask yang terkadang tidak support saat dicompile tentu saja muncul banyak sekali eror pada syntak yang sangat menjenuhkan.


Mengapa menggunakan Glide ?


Sebenarnya ada banyak library yang sama namun disini kita akan coba menggunakan Glide karena ada banyak fiturnya antara lain =
  • Dapat menampilkan gambar dari URL dengan mudah
  • Support gambar berformat GIF
  • Support library Volley
  • Banyak pilihan animasi dari gambar seperti efek slideshow pada PowerPoint
  • dan masih banyak lagi

Hasil Akhir Aplikasi



Gambar placeholder saat menunggu gambar utama dimuat


Gambar saat berhasil memuat dari internet


Gambar saat tidak ada jaringan / tidak berhasil memuat dari internet


Apa yang Dibutuhkan ?


  1. Koneksi internet 
  2. Gambar pendukung , disini admin menggunakan gambar png, taruh di folder drawable dengan nama iki.png dan salah.png ( bisa disesuaikan )
  3. 1 Form Java dan 1 Form Layout
  4. URL contoh gambar yang akan dimuat misal = https://www.kucinglucu.net/wp-content/uploads/2015/05/petua-bela-kucing.jpg


Langkah Pembuatan


1. Pastikan kamu terhubung dengan koneksi internet 
2. Buka Android Studio buat projek baru -- beri nama terserah kamu -- pilih template apa saja, disini admin menggunakan blank activity -- biarkan Main Activity dengan nama default

3. Pergi ke Graddle Script - Build.graddle tambahkan dependensi berikut kemudian synkronkan lalu tunggu sampai berhasil

compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:support-v4:25.2.0'




4. Buka AndroidManifest.xml tambahkan permission internet








5. Buka Res - layout - pilih Layout utamanya , disini punya admin layoutnya bernama content_main.xml . Ubah saja sesuai keinginan, namun karena disini kita hanya belajar ingin menampilkan gambar secara dasar maka cukup tambahkan kode seperti ini

content_main.xml







6. Buka MainActivity.java tambahkan syntax untuk memasukkan library Glide sesuai gambar

MainActivity.java







7. Coba Build dan Jalankan di smartphone kamu , hasilnya kurang lebih seperti hasil di awal postingan


PENJELASAN


  • Kode urlGambar bisa diubah sesuai gambar yang ingin ditampilkan
  • Ganti .placeholder(R.drawable.iki) dengan  .placeholder(urlPlaceholder) jika mau menampilkan gambar placeholder secara online, tapi disini admin sengaja menggunakan gambar dari drawable untuk dapat membedakan online dan offline.
  • R.id.contoh adalah nama ID ImageView di content_main.xml ( lihat kode diatas )
  • R.drawable.iki dan R.drawable.salah adalah nama dari gambar yang tersimpan secara lokal di folder drawable ( iki.png dan salah.png


Sekian tutorial untuk menampilkan gambar dari internet di Android Studio menggunakan Glide Library Part 1 lalu Untuk menampilkan gambar dengan format GIF akan saya lanjutkan di tutorial berikutnya .

Jika tidak jelas silakan komentar ya

Terima kasih atas kunjungan Anda.
Emoticon Emoticon