Tutorial Android Menampilkan Gambar Dengan Glide Library

tutorial android using glide library

- Glide merupakan salah satu image library android yang populer cepat dan efisien, selain itu Glide juga mendukung fitur fetching, decoding, dan sanggup menampilkan gambar, video, serta animasi. Sebenarnya untuk menampilkan gambar kau sanggup melakukannya dengan cara konvensional atau bawaan android, namun hal itu kurang disarankan, sehingga image library menyerupai Glide sanggup menjadi solusinya dengan bermacam-macam fitur yang ditawarkannya.

Penggunaan Glide memungkinkan melaksanakan bermacam-macam pengaturan yang sanggup kita lakukan pada gambar yang akan ditampilkan dengan instruksi yang ringkas dan efisien, misalnya untuk resize, rotate, image caching, dan masih banyak lagi.

Pada tutorial ini kita akan mencar ilmu memakai Glide untuk menampilkan gambar secara programmatically dengan bahasa pemrograman Kotlin. Pastikan kau mengikuti langkah-langkahnya hingga selesai.

1. Buat project baru

Langkah awal yang perlu kau lakukan adalah menciptakan project gres memakai Android Studio, jangan lupa untuk menentukan bahasa pemrograman Kotlin. Pastikan tersambung dengan koneksi internet dan tunggu hingga sinkronisasi gradle selesai.

2. Tambahkan dependencies glide

Setelah selesai menciptakan project, buka file build.gradle(Module: app) dan tambahkan instruksi 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 hingga prosesnya selesai.

3. Membuat layout

Buka file activity_main.xml pada folder res > layout, kemudian ubah kodenya menjadi menyerupai 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" kemudian simpan didalam strings.xml, sehingga pada file strings.xml didalam folder res > values menjadi menyerupai berikut :

<resources>     <string name="app_name">GlideLibrary</string>     <string name="img1">Image 1</string> </resources> 

4. Menambahkan permission internet

Supaya kau sanggup mengakses gambar dari internet untuk ditampilkan, kau harus menambahkan permission internet pada file AndroidManifest.xml, tambahkan instruksi berikut diantara tag <manifest></manifest> :

<uses-permission android:name="android.permission.INTERNET"/>

5. Menggunakan library glide

Kemudian, kita akan mencar ilmu menampilkan gambar secara programmatically dengan memakai Glide. Buka file MainActivity.kt pada package java. Tambahkan instruksi berikut didalam method onCreate() sehingga kodenya menjadi menyerupai 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 memakai Glide membutuhkan lifecycle, sehingga perlu memasukan parameter berupa activity atau fragment.

- load : untuk memuat gambar yang akan ditampilkan, sumbernya sanggup dari internet maupun lokal menyerupai drawable.

- placeholder : dipakai untuk menampilkan gambar pengganti saat gambar utama belum selesai diload.

- centerCrop() : method yang dipakai untuk menciptakan gambar dicrop menengah.

- into : untuk komponen tujuan untuk menampilkan gambar, biasanya berupa ImageView.

Sekarang jalankan dengan emulator, akibatnya menyerupai berikut :

Tutorial android glide library with Kotlin

Berikut ada tips-tips yang sanggup kau coba untuk memakai Glide :

Menampilkan gambar dari drawable

Glide.with(this)     .load(R.drawable.ic_launcher_background)     .centerCrop()     .into(img1) 

Hasilnya menyerupai berikut :

glide load image from drawable

Menggunakan placeholder dan error 

Seperti yang sudah dijelaskan sebelumnya, placeholder dipakai untuk menggantikan gambar utama saat belum selesai diload dan error untuk menggantikan gambar yang gagal diload. Berikut teladan 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 dipakai untuk memotong atau melaksanakan filter pada gambar, namun pada Glide juga sanggup dipakai untuk mengubah animasi file GIF.

Beberapa transformations yang sanggup kau lakukan adalah dengan memanggil method berikut :

- .fitCenter()

- .cropCenter()

- . circleCrop()

Contoh penggunaannya menyerupai berikut :

val imgUrl = "https://novemberfive.co/images/blog/kotlin-implementation/img-header.jpg" Glide.with(this)     .load(imgUrl)     .circleCrop()     .into(img1) 

Hasilnya menyerupai berikut :

tutorial glide circle image

Mengganti ukuran gambar

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

- .override(size: Int)

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

Berikut teladan 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 sanggup dipakai untuk mengatur placeholder, transformations, caching, dan pengaturan lainnya menyerupai 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 akibatnya sama saja dengan memakai placeholder, transformations dengan cara sebelumnya.

Demikian tutorial android memakai glide library untuk menampilkan gambar.

Kesimpulan

Kamu sudah mencar ilmu memakai glide untuk menampilkan gambar, selanjutnya kau sanggup mencar ilmu lebih lanjut lagi dokumentasi glide. Setelah praktek dan mengikuti tutorial ini, cobalah menerapkan pada latihan atau project yang kau buat. Semoga bermanfaat ya

Share this post