Load Image with Glide (Bitmap)

Berikut code untuk menampilkan gambar dengan beberapa mode.

Mode Normal

Glide.with(context).load(StringUrl).into(ImageView)

Agar supaya aman, mungkin teman-teman bisa membuat sebuah class yang umum misalnya (GlideUtils.kt) dan memberi penjagaan seperti ini :

fun loadImageUrl(context: Context, imageUrl: String?, iv: ImageView) {
        if (!imageUrl.isNullOrBlank()) {
            Glide.with(context).load(imageUrl).into(iv)
        } else {
            Glide.with(context).load(imageUrl).into(iv)
        }
    }

Sehingga ketika harus menampilkan gambar, teman-teman tinggal memanggilnya dengan singkat seperti ini :

GlideUtil.loadImageUrl(root.context, bank.logo, ivSearchBank)

Sangat mudah bukan, inilah pengertian dari code tadi :

• GlideUtils adalah nama kelas
• loadImageUrl adalah nama fungsi dengan parameter Context, url dan imageview

Selanjutnya mungkin Code yang kamu butuhkan adalah menampilkan gambar dengan mode corner radius setiap sudutnya :

fun loadImageUrlCorner(context: Context, imageUrl: String, iv: ImageView, round: Int, placeHolder: Int = R.drawable.ic_placeholder_car) {
        var requestOptions = RequestOptions()
        requestOptions = requestOptions
            .transforms(CenterCrop(), RoundedCorners(round))
            .placeholder(placeHolder)
        Glide.with(context)
            .load(imageUrl)
            .apply(requestOptions)
            .into(iv)
    }

Dari code sebelumnya, jika bisa melihat bahwa ada penambahan 2 parameter disini yaitu round dan placeholder. Round adalah besaran ukuran dari radius setiap sudut yang akan digunakan, sedangkan PlaceHolder adalah gambar default apabila imageurl wrong value atau failed.

Apakah Glide bisa membuat gambar lingkaran seperti di kebanyakan apps profile? tentu saja bisa, berikut adalah code yang bisa kamu gunakan :

fun loadImageUrlCircle(context: Context, imageUrl: String?, iv: ImageView, placeHolder: Int) {
        if (!imageUrl.isNullOrBlank()) {
            Glide.with(context).load(imageUrl)
                .apply(
                    RequestOptions()
                        .placeholder(placeHolder)
                        .circleCrop()
                )
                .into(iv)
        } else {
            Glide.with(context).load(placeHolder)
                .apply(
                    RequestOptions()
                        .circleCrop()
                )
                .into(iv)
        }
    }

Pada code diatas, kamu bisa melihat bahwa ada perbedaan pengecekan url isNullOrBlank, hal ini digunakan untuk menampilkan gambar placeholder dengan cara lain.

Selanjutnya mungkin kamu akan bertanya, jika tadi semua gambar load dari bitmap (png, jpg dll) bagaimana dengan format vektor (svg) ? apakah glide bisa? jawabannya bisa namun kita akan membahas hal itu pada next post karena caranya tidak semudah yang sekarang, dan tentu akan sangat panjang dan melelahakan hihi.

Semoga bermanfaat.