Hallo teman2, sering kali kita menemui gambar pada aplikasi android ( emang ada yang gak pake gambar yak? :v ), baik itu di halaman awal, list product dan sebagainya. Jadi gimana sih caranya agar aplikasi kita bisa menampilkan gambar yang berasal dari internet?
Kali ini kita akan menggunakan Glide untuk melakukan hal tersebut. Langsung aja nih, yuk ngoding 😀
Persiapan
Tentunya kita akan menambahkan librarynya terlebih dahulu di gradle. Ubah build.gradle di app level menjadi seperti ini:
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
compileSdkVersion 29
buildToolsVersion "29.0.2"
defaultConfig {
applicationId "ikhwankoto.com.explore_image_loader"
minSdkVersion 17
targetSdkVersion 29
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.core:core-ktx:1.0.2'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
// UNTUK MENGGUNAKAN GLIDE
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
}
Nah, setelah itu kita juga perlu menambahkan beberapa baris di build.gradle di project level.
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.1'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
// UNTUK MENGGUNAKAN GLIDE
mavenCentral()
google()
jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
Dan jangan lupa tambahkan pemerssion internet di AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="ikhwankoto.com.explore_image_loader">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MyApp"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
...
</application>
</manifest>
Persiapan udah nih, lanjut ke code kotlin dan xmlnya.
Layout
Untuk layout kita akan menggunakan ImageView sederhana.

<ImageView
android:id="@+id/iv_standart"
android:layout_width="172dp"
android:layout_height="172dp"
android:layout_marginStart="12dp"
android:layout_marginTop="18dp"
android:layout_marginEnd="12dp"
android:background="@color/colorPrimary"/>
Note: Glide juga bisa menampilkan image dari internet dan menghasilkan drawable / bitmap hingga bisa diproses lagi sebelum ditampilkan ke image view.
Simple Call
Pertama mari kita coba menampilkan image secara sederhana

Glide.with(this)
.load(urlImage)
.into(iv_standart)
- this = context
- urlImage = url gambar yang ingin ditampilkan
- iv_standart = Id dari ImageView di layout
Clear Call
Glide.with(this).clear(iv_standart)
- this = context
- iv_standart = Id dari ImageView di layout
Placeholder
1. Placeholder
Placeholder yang pertama adalah drawable yang akan ditampilkan ketika gambar yang mau di tampilkan di internet masih belum selesai diproses.
Glide.with(this)
.load(urlImage)
.placeholder(R.drawable.ic_loading)
.into(iv_placeholder)
Kita juga bisa menggunakan warna sebagai placeholder.
Glide.with(this)
.load(urlImage)
.placeholder(ColorDrawable(Color.BLACK))
.into(iv_placeholder_color)
2. Error
Placeholder yang berikutnya adalah untuk mengatasi error, jika gambar yang kita coba tampilkan dari internet ternyata gagal.
Glide.with(this)
.load("https://bla.bla.bla/bla.pjg")
.error(R.drawable.ic_error)
.into(iv_error)
3. Fallback
Placeholder ini hampir sama dengan placeholder error. Placeholder ini akan dieksekusi ketika url yang kita gunakan ternyata bernilai null. Salah satu penerapan placeholder ini adalah untuk mengambil photo profil.
Glide.with(this)
.load(urlImageNull)
.fallback(R.drawable.ic_default)
.into(iv_fallback)
Note: Ketiga placeholder tersebut tentu bisa digunakan secara bersamaan
Extra: Kita juga bisa menggunakan placeholder yang berasal dari internet.
Glide.with(this)
.load(urlImageForFailure)
.error(
Glide.with(this)
.load(urlImageError)
)
.into(iv_newrequest_onfailure)
Transformations
Kita dapat melakukan beberapa perubahan setelah image berhasil diakses dari internet. Berikut beberapa transformations yang telah disediakan oleh Glide

//CenterCrop
Glide.with(this).load(urlImage).centerCrop().into(iv_centercrop)
//FitCenter
Glide.with(this).load(urlImage).fitCenter().into(iv_fitcenter)
//CircleCrop
Glide.with(this).load(urlImage).circleCrop().into(iv_circlecrop)
Thumbnail
Thumbnail adalah sebuah gambar dengan resolusi lebih kecil dibandingkan gambar aslinya. Jadi thumbnail akan ditampilkan selama proses untuk mengakses image asli berlangsung
1. Thumbnail dengan image yang sama tapi dengan resolusi yang lebih rendah

Glide.with(this)
.load(urlImage)
.thumbnail(0.25f)
.into(iv_thumbnail)
2. Thumbnail dengan menggunakan image yang berbeda dengan url
Glide.with(this)
.load(urlImage)
.thumbnail(
Glide.with(this)
.load(urlImageThumbnail)
)
.into(iv_thumbnail_different_image)
Transition
Ini adalah animasi yang berjalan ketika placeholder digantikan oleh image yang telah selesai dimuat dari internet
val factory = DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build()
Glide.with(this)
.asBitmap()
.load(urlImage)
.placeholder(R.drawable.ic_loading)
.transition(withCrossFade(factory))
.into(iv_transition)
Factory digunakan untuk menghindari issue dengan transparent image
Performance tips: Jangan gunakan transition pada layout yang akan digunakan untuk RecyclerView.
Load GIF
Gunakan code berikut untuk memuat GIF
Glide.with(this)
.asGif()
.load(urlGif)
.into(iv_gif)
Sekian postingan kali ini, semoga membantu ya. Kunjungi repo glide di github untuk melihat versi terbaru dari Glide ya 😀
Dan ada topik menarik lainnya juga loh 😀
- Tingkatkan peforma dengan request option di Glide
- Ngoding lebih cepat di Android Studio dengan Templates – Part 1
Terimakasih 😀