How to show progressbar in place of placeholder in android using picasso and glide library

manish choudhary

15 October 2017

For Picasso:

Add dependency for Picasso in your build.gradle file.

compile 'com.squareup.picasso:picasso:2.5.2'

1	compile 'com.squareup.picasso:picasso:2.5.2'

We use placeholder by default that seems static which often irritating so using Picasso library we can use progressbar in place of placeholder or we can create custom progressbar in which we can use animation.

In your XML file use Framelayout or Relative layout in which we can define imageview and progressbar (OR make your own custom progress bar).

<FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/productImage"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="10dp" />

                <ProgressBar
                    android:id="@+id/homeprogress"
                    android:layout_width="match_parent"
                    android:layout_gravity="center"
                    android:background="@color/light_gray_color1"
                    android:layout_height="match_parent" />
            </FrameLayout>

<FrameLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<ImageView

android:id="@+id/productImage"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="10dp" />

<ProgressBar

android:id="@+id/homeprogress"

android:layout_width="match_parent"

android:layout_gravity="center"

android:background="@color/light_gray_color1"

android:layout_height="match_parent" />

</FrameLayout>

In Picasso, there is into(View, Callback) method in which we can pass two parameter View and Callback. In Callback there is two methods onSuccess() and onError().

on Success() method call when image loaded successfully .

on Error() method call if there any network issue.

Until server response, we can use custom progress bar in place of placeholder and setVisibility(View.Gone) onSuccess() method.

Picasso.with(context)
                .load(ImageUrl)
                .into(ImageView, new Callback() {
                    @Override
                    public void onSuccess() {
                        holder.progressBar.setVisibility(View.GONE);
                    }

                    @Override
                    public void onError() {

                    }
                });

Picasso.with(context)

.load(ImageUrl)

.into(ImageView, new Callback() {

@Override

public void onSuccess() {

holder.progressBar.setVisibility(View.GONE);

}

@Override

public void onError() {

}

});

For Glide:

Add dependency for Picasso in your build.gradle file.

   compile 'com.github.bumptech.glide:glide:3.7.0'

1	compile 'com.github.bumptech.glide:glide:3.7.0'

In Glide there is RequestListener until your imageView update we can show any custom progressBar over imageView.

In RequestListener there are two methods onException and onResourceReady.

onException() method call if there any exception thrown.

onResurceReady() method call when image loaded successfully

When Image successfully loaded we can dismiss progressBar in onResourceReady method.

Glide.with(view.getContext())
        .load(imageUrl).placeholder(R.drawable.placeholder)
        .diskCacheStrategy(DiskCacheStrategy.NONE)
        .override(200,200)
        .dontAnimate()
        .listener(new RequestListener<String, GlideDrawable>() {
            @Override
            public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, 
           boolean isFromMemoryCache, boolean isFirstResource) {
             YourProgressBar.dismiss();              
             return false;
            }
        })
        .into(view);

Glide.with(view.getContext())

.load(imageUrl).placeholder(R.drawable.placeholder)

.diskCacheStrategy(DiskCacheStrategy.NONE)

.override(200,200)

.dontAnimate()

.listener(new RequestListener<String, GlideDrawable>() {

@Override

public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {

return false;

}

@Override

public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target,

boolean isFromMemoryCache, boolean isFirstResource) {

YourProgressBar.dismiss();

return false;

}

})

.into(view);