farizdotid Buruh ketik yang ingin bermanfaat bagi semua orang. | Android Developer, Freelance, Seo Analyst.

Cara Membuat ImageView Bulat menggunakan Glide Kotlin

1 min read

Cara Membuat ImageView Bulat menggunakan Glide Kotlin – Hi gaes, Kali ini saya ada kesempatan untuk membuat tutorial android sederhana yaitu bagaimana cara membuat imageview atau gambar kamu bulat menggunakan bantuan library Glide. Biasanya case untuk membuat gambar bulat seperti ini ketika di page Profile ataupun ketika ada desain untuk avatar setiap user. Pada tutorial android kali ini juga kita tidak hanya belajar membuat imageview bulat saja, tapi kita akan belajar membuat border pada bulatan imageview. Karena pengalaman saya terkadang suka menemukan desain image bulat + bordernya.

Buat Project

Buka android studio lalu buat project dengan nama Sample Glide

Empty Activity

Pilih empty activity saja terlebih dahulu

Konfigurasi ViewBinding

Buka build.gradle(:app) lalu tambahan kode berikut didalam tag android {

Menambahkan library Glide

Buka build.gradle(:app) lalu tambahkan library Glide seperti ini :

Untuk referensi dokumentasi Library Glide. Kalian bisa langsung menuju link berikut :

https://github.com/bumptech/glide

Jadi, full code pada build.gradle(:app) jadi begini :

Android Manifest

Karena kebutuhan kita untuk memuat/meng-load gambar dari sebuah URL. Maka kita wajib menambahkan uses-permission Internet terlebih dahulu. Untuk kodenya seperti ini :

Maka code full pada Android Manifest akan sepertii ini :

Layouting

Untuk tampilan kita disini akan memakai 2 textview dan 2 imageview. 1 imageview untuk bulat saja, dan 1 imageview untuk yang ada border atau stroke pada lingkaran luarnya. Untuk tampilannya seperti ini :

Cara Membuat ImageView Bulat menggunakan Glide Kotlin

Untuk kode xmlnya seperti ini :

Inisialisasi ViewBinding

Pada MainActivity jangan lupa untuk inisialisasi ViewBinding pada Activity / Fragment kalian. Inisialisasi kode seperti berikut :

Lalu pada onCreate ubah menjadi berikut :

Buat fungsi loadImage()

Kita bikin 1 fungsi bernama loadImage(). Fungsi ini untuk mengatur library Glide untuk melakukan proses dari sebuah URL ke imageview.

Bikin File GlideExt

Nah, GlideExt ini nantinya akan kita isi dengan sebuah extension fungsi untuk membuat imageview kita menjadi ada border atau lingkaran luarnya. Untuk kodenya seperti berikut :

Referensi code saya dapat dari sini : https://stackoverflow.com/a/53606048

MainActivity

Sekarang balik ke MainActivity lagi, lalu didalam fungsi loadImage() tambahkan variable urlImage. Kodenya seperti ini :

Lalu masukan kode berikut :

Untuk Full source code pada MainActivity jadi seperti ini :

Jalankan Aplikasi~

Cara Membuat ImageView Bulat menggunakan Glide Kotlin

 

Nah sekian tutorial android sederhana mengenai Cara Membuat ImageView Bulat menggunakan Glide Kotlin. Semoga bermanfaat dan jika ada yang ingin ditanyakan boleh langsung berkomentar di halaman post ini ya. Terimakasih

farizdotid Buruh ketik yang ingin bermanfaat bagi semua orang. | Android Developer, Freelance, Seo Analyst.

Leave a Reply

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