Load Image dan GIF dengan menggunakan Glide

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 😀

Terimakasih 😀

Post Views: 2.450

Load Image dan GIF dengan menggunakan Glide

Persiapan

Layout

Simple Call

Placeholder

Transformations

Thumbnail

Transition

Load GIF

Written by Ikhwan

Tiba-tiba pencarian menggunakan Bing di Google Chrome?

Berkenalan dengan Jetpack DataStore

Layout-layout di Jetpack Compose (Part-2)

Tinggalkan Balasan Batalkan balasan