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);
}

}

@ThankgodRichard yes, but if i use gif, than have to start a new question - How to set height and width of gif in Glide ? — mukeshsoni, Aug 01 '18 at 12:44
why should you need to use GIF when you are just showing images which .jpeg — Quick learner, Aug 01 '18 at 13:06

score 2 · Accepted Answer · answered Feb 09 '19 at 08:07

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" />

Shubham Vala · Answer 2 · 2018-08-01T13:04:03.140

1

try this way,

in layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<ProgressBar
    android:id="@+id/progrss"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" />

</RelativeLayout>

now where you loading image,

prgress = (ProgressBar)findViewById(R.id.progress);
progress.setVisibility(View.VISIBLE);
Glide.with(mContext)
            .load(imageUrl)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .into(new SimpleTarget<GlideDrawable>() {
                @Override
                public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {

                    progress.setVisibility(View.GONE);    
                    imageViewPriview.setImageDrawable(resource);
                }

                @Override
                public void onLoadFailed(Exception e, Drawable errorDrawable) {
                     progress.setVisibility(View.GONE);
                }
            });

edited Aug 01 '18 at 13:04

answered Aug 01 '18 at 12:48

Shubham Vala

1,024
7
18

Also tried it, but image is not loading, just Progress bar moving. – mukeshsoni Aug 01 '18 at 13:05
you have hiding progress bar in both methods or not? i.e. ready and fail – Shubham Vala Aug 01 '18 at 13:06
hiding progress bar in ResourceReady and Failed. – mukeshsoni Aug 01 '18 at 13:07
This method working in RecycleViewAdapter but not in ViewPagerAdapter – mukeshsoni Aug 01 '18 at 13:08
you just copied my answer and pasted here , Provide different solution , else it will be deleted by moderators soon – Quick learner Aug 01 '18 at 17:09

Quick learner · Answer 3 · 2018-08-01T13:14:00.613

1

Try this Solution

In your xml.file add progress bar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

</RelativeLayout>

Import gradle for Glide

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

Then

 final ProgressBar progressBar = (ProgressBar) 
     findViewById(R.id.progress);
    progressBar.setVisibility(View.VISIBLE);
       Glide.with(contexthere).load(advertiser.getUrl())
                            .diskCacheStrategy(DiskCacheStrategy.ALL)
                            .into(new SimpleTarget<GlideDrawable>() {
                                @Override
                                public void onResourceReady(GlideDrawable glideDrawable, GlideAnimation<? super GlideDrawable> glideAnimation) {
                                   progressBar.setVisibility(View.GONE);
                                    imageViewPreview.setImageDrawable(glideDrawable);
                                }
                            });

Note :- Pass correct context ie Use getActivity() in fragment class and Use ActivityName.this in activity class

edited Aug 01 '18 at 13:14

answered Aug 01 '18 at 13:03

Quick learner

10,632
4
45
55

i'm using it in ViewPagerAdapter. – mukeshsoni Aug 01 '18 at 13:06
then pass the context which you are getting in constructor of pager adapter – Quick learner Aug 01 '18 at 13:07
did you try this solution ? – Quick learner Aug 01 '18 at 13:11
edited my answer , Please check it and Use , Let me know if doesnt work :) – Quick learner Aug 01 '18 at 13:14
Problem is when i use this code. Only spinner shows up not any image. Also tried it in framelayout. But not worked. – mukeshsoni Aug 01 '18 at 13:17
YES. as I told you, i used this code in RecycleViewAdapter. There this code working fine but not here in ViewPager – mukeshsoni Aug 01 '18 at 13:20
will you post your adapter class here quickly? – Quick learner Aug 01 '18 at 17:01
Added the adapter class – mukeshsoni Aug 02 '18 at 03:49
why are using this CircularProgressDrawable circularProgressDrawable = new CircularProgressDrawable(container.getContext()); circularProgressDrawable.start(); ?? Please add progress bar in xml and use it in adapter class and let me know if it works or not – Quick learner Aug 02 '18 at 05:33
@mukeshsoni you should make your imageview visibility visible before you set drawable into it. Otherwise your imageview would never show. – Divya Gupta Dec 25 '22 at 15:07
There is one issue with this solution, if you use Glide inside a Recyclerview, recyclerview scrolling will be very draggy and not smooth. – Divya Gupta Dec 25 '22 at 15:09
@DivyaGupta I quit android development 3 years ago. Now using react-native. – mukeshsoni Dec 27 '22 at 08:25

Circular progress bar as Glide Placeholder

3 Answers3