Android Fresco ProgressBar (Image Loading Indicator)

July 11, 2019

Solution 1: ProgressBar

draweeView.hierarchy.setProgressBarImage(ProgressBarDrawable())

You can customized the progressbar

val progressBarDrawable = ProgressBarDrawable()
progressBarDrawable.color = ContextCompat.getColor(context, R.color.colorPrimary)
progressBarDrawable.backgroundColor = ContextCompat.getColor(context, android.R.color.darker_gray)
progressBarDrawable.radius = 32.dpToPx(resources.displayMetrics)
progressBarDrawable.barWidth= 16.dpToPx(resources.displayMetrics)

draweeView.hierarchy.setProgressBarImage(progressBarDrawable)

NOTE: dpToPx.

NOTE: CircleProgressBarDrawable (I didn’t try this)

Solution 2: Rotating Drawable

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/draweeView"
    android:layout_width="300dp"
    android:layout_height="300dp"
    fresco:progressBarImage="@drawable/far_spinner_48dp"
    fresco:progressBarAutoRotateInterval="1000"
    />

NOTE: Font Awesome Spinner Icons

Set progressBarImage and progressBarAutoRotateInterval programatically.

val icon = ContextCompat.getDrawable(context, R.drawable.far_spinner_48dp)
if (icon != null) {
    // optional change tint color
    DrawableCompat.setTint(icon, ContextCompat.getColor(context, R.color.colorPrimary))
    draweeView.hierarchy.setProgressBarImage(AutoRotateDrawable(icon, 1000))
}

Testing

You might want to disable cache during development to test the progressbar.

val uri = Uri.parse("https://images.unsplash.com/photo-1492571350019-22de08371fd3?ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1549&q=80")

if (BuildConfig.DEBUG) {
    val request = ImageRequestBuilder
        .newBuilderWithSource(uri)
        .disableDiskCache()
        .build()
    draweeView.setImageRequest(request)
}
else {
    draweeView.setImageURI(uri)
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.