Circular progress bar as Glide Placeholder

Question

I am showing images from server with glide. I want to show a circular progress bar as placeholder. I tried this method from progress-bar-while-loading-image-using-glide But it is not working. What am I missing ?

I am showing a recyclerview in activity. When user click onItem, image open in a fragment that contains Viewpager. I'm loading images in viewpager with glide.

Adapter Class -

public class MyViewPagerAdapter extends PagerAdapter {
private ArrayList<Object> imagesList = new ArrayList<>();
public MyViewPagerAdapter(ArrayList<Object> images) {
    this.imagesList = images;
}

@NonNull
@SuppressLint("ClickableViewAccessibility")
@Override
public Object instantiateItem(@NonNull final ViewGroup container, int position) {
    Object recyclerViewItem = imagesList.get(position);
    final View view = LayoutInflater.from(container.getContext()).inflate(R.layout.util_image_fullscreen_preview, container, false);
    final TouchImageView imageViewPreview = view.findViewById(R.id.image_preview);
   CircularProgressDrawable circularProgressDrawable = 
                new CircularProgressDrawable(container.getContext());
circularProgressDrawable.start();

        Photos image = (Photos) imagesList.get(position);
        GlideApp
            .with(container.getContext())
            .asBitmap()
            .load(advertiser.getUrl())
            .placeholder(circularProgressDrawable)
            .fitCenter().diskCacheStrategy(DiskCacheStrategy.ALL)
            .into(imageViewPreview);


    container.addView(view);
    return view;

}

@Override
public int getCount() {
    return imagesList.size();

}


@Override
public boolean isViewFromObject(View view, Object obj) {
    return view.equals(obj);
}


@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((View) object);
}

}

Answer 1

In view pager you can use the following method inside instantiate method. The first method is for loading gif images and the second method is for simple image loading with progress bar.

////  for loading gif images 
RequestOptions requestOptions = new RequestOptions();
        requestOptions.diskCacheStrategy(DiskCacheStrategy.ALL);
        requestOptions.placeholder(R.drawable.itemes_bg);
        requestOptions.error(R.drawable.itemes_bg);


 Glide.with(context).applyDefaultRequestOptions(requestOptions).asGif().load(gifList.get(position)).listener(new RequestListener<GifDrawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<GifDrawable> target, boolean isFirstResource) {
                     
                        Toast.makeText(context, "No Internet Connection...", Toast.LENGTH_SHORT).show();
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(GifDrawable resource, Object model, Target<GifDrawable> target, DataSource dataSource, boolean isFirstResource) {

                        return false;
                    }
                }).into(holder.imageView);

////  for loading simple images

	RequestOptions requestOptions = new RequestOptions();
        requestOptions.diskCacheStrategy(DiskCacheStrategy.ALL);
        requestOptions.placeholder(R.drawable.progress);

        Glide.with(activity).applyDefaultRequestOptions(requestOptions).load(imageList.get(position).getImgUrl().trim()).listener(new RequestListener<Drawable>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                progressBar.setVisibility(View.GONE);
                Toast.makeText(activity, "No Internet Connection", Toast.LENGTH_SHORT).show();
                return false;
            }

            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                progressBar.setVisibility(View.GONE);
                return false;
            }
        }).into(imageView);

keep in mind you must to add the following code in your xml

<ProgressBar
        android:id="@+id/progBar"
        android:padding="150dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />