Load Image dengan menggunakan Fresco

Hallo teman2, di setiap aplikasi biasanya terdapat fitur yang menampilkan gambar yang berasal dari internet (Dejafu ya tulisanny, haha). Di tulisan sebelumnya kita telah membahas tentang Glide dan Picasso. Untuk talisan kali ini kita akan membahas mengenai Fresco. Fresco sendiri adalah library yang dibuat oleh facebook dan telah digunakan di beberapa aplikasi seperti facebook, Twitter, Wikipedia, 9GAG, dan berbagai aplikasi lainnya.

Langsung aja nih, yuk ngoding 😀

Persiapan

Kita akan menambahkan library Fresco pada build.gradle(:app) seperti di bawah ini:

build.gradle(:app)
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
   ...
}

dependencies {
    ...

    // FRESCO
    implementation 'com.facebook.fresco:fresco:2.1.0'
    // For animated GIF support
    implementation 'com.facebook.fresco:animated-gif:2.1.0'
    // For WebP support, without animations
    implementation 'com.facebook.fresco:webpsupport:2.1.0'
    // For WebP support, including animated WebP
    implementation 'com.facebook.fresco:animated-webp:2.1.0'
}

Untuk menggunakan Fresco buat class MyApp yang akan diextend ke Application() seperti berikut:

package ikhwankoto.com.explore_image_loader

import android.app.Application
import com.facebook.drawee.backends.pipeline.Fresco

class MyApp : Application(){

    override fun onCreate() {
        super.onCreate()
        Fresco.initialize(this)
    }

}

Lalu tambahkan permission internet dan daftarkan class MyApp 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>

Persiapannya udah nih, kita lanjut ke code kotlin dan xmlnya.

Layout

Jika pada postingan Glide dan Picasso kita menggunakan ImageView, kali ini kita akan menggunakan layout yang disediakan oleh Fresco

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_standart"
    android:layout_width="130dp"
    android:layout_height="130dp"
    android:background="@color/colorPrimary" />

Terlihat pada di code diatas, kita menggunakan layout com.facebook.drawee.view.SimpleDraweeView. Beberapa code yang sering kita jumpai di code kotlin/java seperti pengaturan placeholder, pada fresco kita akan melakukannya di layout. Hal ini bisa dilakukan karena kita menggunakan layout yang disediakan oleh fresco (bukan ImageView).

Simple Call

Kita akan menggunakan layout sederhana seperti pada penjelasan Layout sebelumnya. Lalu di activity kita akan menggunakan code seperti berikut:

iv_standart.setImageURI(urlImage)

• iv_standart merupakan Id yang kita gunakan pada com.facebook.drawee.view.SimpleDraweeView
• urlImage merupakan url dari image yang ingin kita tampilkan.

Berikut merupakan hasil dari code sebelumnya

NOTE: Untuk selanjutnya di postingan ini, jika tidak disampaikan code yang digunakan pada activitynya maka bisa menggunakan code yang sama dengan simple call, yaitu cukup dengan setImageURI().

Aspec Ratio

Fresco tidak mensupport penggunaan wrap_content untuk pengaturan tinggi dan lebar tampilan. Kecuali jika kita menggunakan aspec ratio. Berikut code xml yang kita gunakan:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_aspecratio"
    android:layout_width="130dp"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:viewAspectRatio="1.33" />

Berikut hasilnya:

Round / Border

Kita akan menggunakan dua sample untuk penggunaan round. Sample pertama gunakan code berikut ini.

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_rounded_border"
    android:layout_width="130dp"
    android:layout_height="130dp"
    android:background="@color/colorPrimary"
    app:roundBottomEnd="false"
    app:roundedCornerRadius="18dp"
    app:roundingBorderColor="@color/colorAccent"
    app:roundingBorderWidth="12dp" />

• app:roundBottomEnd adalah boolean yang digunakan untuk menerapkan round jika bernilai true pada bagian bawah kanan. Jika false maka round tidak akan diterapkan
• app:roundedCornerRadius adalah radius yang digunakan untuk setiap sudut image
• app:roundingBorderColor digunakan untuk memberikan border atau bingkai dengan warna
• app:roundingBorderWidth digunakan untuk memberikan ketebalan border atau bingkai

Berikut adalah hasil yang didapatkan dengan penggunaan code tersebut:

Untuk sample kedua gunakan code berikut ini

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_rounded_border2"
    android:layout_width="130dp"
    android:layout_height="130dp"
    android:background="@color/colorPrimary"
    app:roundAsCircle="true"
    app:roundingBorderColor="@color/colorAccent"
    app:roundingBorderWidth="12dp" />

• app:roundAsCircle digunakan untuk menerapkan circle pada image

Berikut adalah hasil yang didapatkan dengan penggunaan code tersebut:

Placeholder

Seperti pada libary image holder lainnya kita juga bisa menggunakan placeholder di library Fresco. Di fresco kita akan menambahkan beberapa baris code di xmlnya seperti berikut:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_placeholder"
    android:layout_width="130dp"
    android:layout_height="130dp"
    android:background="@color/colorPrimary"
    app:placeholderImage="@drawable/ic_loading"
    app:placeholderImageScaleType="centerCrop" 
    app:failureImage="@drawable/ic_error"
    app:failureImageScaleType="centerCrop"/>

• app:placeholderImage. Jika pada library yang lainnya, placeholder digunakan ketika sedang memuat image, di fresco drawable ini juga digunakan bahkan sebelum image mulai dimuat
• app:failureImage digunakan untuk mengatur drawable yang akan ditampilkan jika image gagal dimuat
• app:placeholderImageScaleType dan app:failureImageScaleType digunakan untuk melakukan transformasi pada drawable placeHolderImage dan failureImage seperti centerCrop.

Call with Progress

Fresco juga bisa menampilkan loading ketika image masih dalam proses pemuatan dari internet. Untuk case ini, di layout kita tidak menambahkan properti unik seperti part lainnya. Kita cukup mengatur lebar dan tinggi yang digunakan. Setelah itu gunakan code berikut ini di activity

var progrssDrawable = ProgressBarDrawable()
progrssDrawable.color = resources.getColor(R.color.colorBlue)
progrssDrawable.backgroundColor = 
     resources.getColor(R.color.colorAccent)
progrssDrawable.radius = 12

iv_progress.hierarchy.setProgressBarImage(progrssDrawable)
iv_progress.hierarchy.setFailureImage(
      resources.getDrawable(R.drawable.ic_error),
            ScalingUtils.ScaleType.CENTER_INSIDE
      )

iv_progress.setImageURI(urlImage)

Hasil code tersebut bisa dilihat di link berikut: Result

Transformasi

Untuk menggunakan tranformasi kita bisa menambahkan code actualImageScaleType pada SimpleDraweeView seperti berikut:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_scaletype"
    android:layout_width="130dp"
    android:layout_height="130dp"
    android:layout_marginTop="36dp"
    android:background="@color/colorPrimary"
    app:actualImageScaleType="yourScaleType" />

Ganti yourScaleType pada code diatas dengan beberapa scaleType yang telah disediakan oleh fresco. Berikut scaleType yang tersedia beserta hasilnya:

Untuk penggunaan focusCrop kita harus mengatur titik focusnya di activitynya. Berikut contohnya:

val focusPoint = PointF(20f, 10f)
iv_scaletype8.hierarchy.setActualImageFocusPoint(focusPoint)
iv_scaletype8.setImageURI(urlImage)

Rotate

Kita juga bisa melakukan rotate pada image yang kita muat dari internet. Untuk melakukannya gunakan code berikut

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_standart"
    android:layout_width="130dp"
    android:layout_height="130dp"
    android:rotation="90"
    android:background="@color/colorPrimary"/>

EXTRA NOTE

Pernah mengalami rotate yang tidak diinginkan? Hal tersebut dikarenakan terkadang file JPEG menyimpan meta data untuk orientasinya. Gunakan code berikut untuk melakukan auto rotate ketika menemukan image yang seperti itu.

val imageRequest = ImageRequestBuilder
                    .newBuilderWithSource(Uri.parse(urlImage))
                    .setRotationOptions(RotationOptions.autoRotate())
                    .build()
iv_rotate_auto.setImageRequest(imageRequest)

Yup kita telah melakukan cukup banyak hal dengan Fresco. Fresco memiliki lebih banyak operator atau fungsi yang bisa melakukan perubahan terhadap image yang ingin kita muat. Hal ini juga disebabkan oleh pemakaian custom view. Library ini bisa menjadi salah satu opsi terbaik jika aplikasi kita memiliki banyak custom pada image yang ingin ditampilkan.

Sekian penjelasan terkait Fresco. Terimakasih 😀