Showing a Progress bar while loading image using Coil?

Question

How to show a progress bar while fetching image from URL in Coil.?

Answer 1

Use ImageRequest.Listener

Example:

val imageRequest = ImageRequest.Builder(context)
    .data(url)
    .listener(
        onStart = {
            // set your progressbar visible here
        },
        onSuccess = { request, metadata ->
            // set your progressbar invisible here
        }
    )
    .build()

imageLoader.enqueue(request)

Answer 2

I didn't work with Coil, but I suggest you may do the next:

// Before request run on the needed method
yourProgressbar.visibility = View.VISIBLE

val request = ImageRequest.Builder(context)
.data("https://www.example.com/image.jpg")
.target { drawable ->
    yourProgressbar.visibility = View.INVISIBLE
}.build()   

val disposable = imageLoader.enqueue(request)

Here is official doc's example

Answer 3

I tried only in Compose but I think you can use it like Glide

Set the progress bar as placeholder

val circularProgressDrawable = CircularProgressDrawable(this)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

imageView.load("https://www.example.com/image.jpg") {
    crossfade(true)
    placeholder(circularProgressDrawable)
    transformations(CircleCropTransformation())
}

Answer 4

If you are creating app with jetpack compose then you don't need to do manual stuff,

you can use the builtin SubcomposeAsyncImage provided by the library from version 2.0.0-rc01

SubcomposeAsyncImage(
    model = image,
    contentDescription = "",
    loading = { 
        CircularProgressIndicator(color = Color.Black) 
    },
)

Answer 5

Here what i am doing, it is working fine as expected

 binding.circularProgressBar.visibility = View.VISIBLE
 binding.ivTeamPic.load(url) {
      target {
           binding.circularProgressBar.visibility = View.GONE
           binding.ivTeamPic.setImageDrawable(it)
      }
 }