Tutorial Android Menampilkan Gambar dengan Glide Library

tutorial android using glide library
tutorial android using glide library
Codingtive.com - Glide merupakan salah satu image library android yang terkenal cepat dan efisien, selain itu Glide juga mendukung fitur fetching, decoding, dan dapat menampilkan gambar, video, serta animasi. Sebenarnya untuk menampilkan gambar kamu dapat melakukannya dengan cara konvensional atau bawaan android, namun hal itu kurang disarankan, sehingga image library seperti Glide dapat menjadi solusinya dengan beragam fitur yang ditawarkannya.

Penggunaan Glide memungkinkan melakukan beragam pengaturan yang dapat kita lakukan pada gambar yang akan ditampilkan dengan kode yang ringkas dan efisien, contohnya untuk resize, rotate, image caching, dan masih banyak lagi.

Pada tutorial ini kita akan belajar menggunakan Glide untuk menampilkan gambar secara programmatically dengan bahasa pemrograman Kotlin. Pastikan kamu mengikuti langkah-langkahnya sampai selesai.

1. Buat project baru

Langkah awal yang perlu kamu lakukan yaitu membuat project baru menggunakan Android Studio, jangan lupa untuk memilih bahasa pemrograman Kotlin. Pastikan tersambung dengan koneksi internet dan tunggu sampai sinkronisasi gradle selesai.

2. Tambahkan dependencies glide

Setelah selesai membuat project, buka file build.gradle(Module: app) dan tambahkan kode berikut didalam dependencies :
implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
Kemudian lakukan sinkronisasi build.gradle dan tunggu sampai prosesnya selesai.

3. Membuat layout

Buka file activity_main.xml pada folder res > layout, kemudian ubah kodenya menjadi seperti berikut untuk menampilkan gambar :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        tools:context=".kotlin.glide.MainActivity">

    <ImageView
            android:id="@+id/img1"
            android:layout_width="300dp"
            android:layout_height="200dp"
            tools:background="@color/colorPrimary"
            android:contentDescription="@string/img1"/>

</LinearLayout>
Untuk contentDescription isi dengan deskripsi gambar "Image 1" lalu simpan didalam strings.xml, sehingga pada file strings.xml didalam folder res > values menjadi seperti berikut :
<resources>
    <string name="app_name">GlideLibrary</string>
    <string name="img1">Image 1</string>
</resources>

4. Menambahkan permission internet

Supaya kamu dapat mengakses gambar dari internet untuk ditampilkan, kamu harus menambahkan permission internet pada file AndroidManifest.xml, tambahkan kode berikut diantara tag <manifest></manifest> :
<uses-permission android:name="android.permission.INTERNET"/>

5. Menggunakan library glide

Kemudian, kita akan belajar menampilkan gambar secara programmatically dengan menggunakan Glide. Buka file MainActivity.kt pada package java. Tambahkan kode berikut didalam method onCreate() sehingga kodenya menjadi seperti berikut :
package com.codingtive.androidtutorial.kotlin.glide

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import com.bumptech.glide.Glide
import com.codingtive.androidtutorial.R
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val imgUrl = "https://novemberfive.co/images/blog/kotlin-implementation/img-header.jpg"

        Glide.with(this)
            .load(imgUrl)
            .placeholder(R.drawable.ic_launcher_background)
            .centerCrop()
            .into(img1)
    }
}
Berikut untuk penjelasannya :

- with : untuk memulai menggunakan Glide membutuhkan lifecycle, sehingga perlu memasukan parameter berupa activity atau fragment.
- load : untuk memuat gambar yang akan ditampilkan, sumbernya dapat dari internet maupun lokal seperti drawable.
- placeholder : digunakan untuk menampilkan gambar pengganti ketika gambar utama belum selesai diload.
- centerCrop() : method yang digunakan untuk membuat gambar dicrop menengah.
- into : untuk komponen tujuan untuk menampilkan gambar, biasanya berupa ImageView.

Sekarang jalankan dengan emulator, hasilnya seperti berikut :
Tutorial android glide library with Kotlin
Tutorial android glide library with Kotlin
Berikut ada tips-tips yang dapat kamu coba untuk menggunakan Glide :

Menampilkan gambar dari drawable

Glide.with(this)
    .load(R.drawable.ic_launcher_background)
    .centerCrop()
    .into(img1)
Hasilnya seperti berikut :
glide load image from drawable
glide load image from drawable

Menggunakan placeholder dan error 

Seperti yang sudah dijelaskan sebelumnya, placeholder digunakan untuk menggantikan gambar utama ketika belum selesai diload dan error untuk menggantikan gambar yang gagal diload. Berikut contoh kodenya :
val imgUrl = "https://novemberfive.co/images/blog/kotlin-implementation/img-headee.jpg"
Glide.with(this)
    .load(imgUrl)
    .placeholder(R.drawable.ic_launcher_background)
    .error(R.drawable.ic_launcher_background)
    .centerCrop()
    .into(img1)

Menggunakan transformations

Transformations biasanya digunakan untuk memotong atau melakukan filter pada gambar, namun pada Glide juga dapat digunakan untuk mengubah animasi file GIF.

Beberapa transformations yang dapat kamu lakukan yaitu dengan memanggil method berikut :

- .fitCenter()
- .cropCenter()
- . circleCrop()

Contoh penggunaannya seperti berikut :
val imgUrl = "https://novemberfive.co/images/blog/kotlin-implementation/img-header.jpg"
Glide.with(this)
    .load(imgUrl)
    .circleCrop()
    .into(img1)
Hasilnya seperti berikut :
tutorial glide circle image
tutorial glide circle image

Mengganti ukuran gambar

Untuk mengganti ukuran gambar menggunakan glide, ada beberapa cara berikut :

- .override(size: Int)
- .override(width: Int, height: Int)

Berikut contoh menggunakannya :
val imgUrl = "https://novemberfive.co/images/blog/kotlin-implementation/img-header.jpg"
Glide.with(this)
    .load(imgUrl)
    .override(200, 50)
    .into(img1)

Menggunakan options

RequestBuilder options pada Glide dapat digunakan untuk mengatur placeholder, transformations, caching, dan pengaturan lainnya seperti encode, decode.
val imgUrl = "https://novemberfive.co/images/blog/kotlin-implementation/img-header.jpg"
Glide.with(this)
    .load(imgUrl)
    .apply(RequestOptions()
        .circleCrop()
        .placeholder(R.drawable.ic_launcher_background)
        .override(20)
    ).into(img1)
Maka hasilnya sama saja dengan menggunakan placeholder, transformations dengan cara sebelumnya.

Demikian tutorial android menggunakan glide library untuk menampilkan gambar.

Kesimpulan

Kamu sudah belajar menggunakan glide untuk menampilkan gambar, selanjutnya kamu dapat belajar lebih lanjut lagi dokumentasi glide. Setelah praktek dan mengikuti tutorial ini, cobalah menerapkan pada latihan atau project yang kamu buat. Semoga bermanfaat ya

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Android Menampilkan Gambar dengan Glide Library"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel