How to add progress bar on ViewPager for every pager

Question

I want to implement one code where I need to add progress bar on ViewPager, for every pager progress bar will show until image will not load. for more details you can check this link Link There is a ViewPager where images is coming from server side which takes time to load I want to add progress bar until image will not load

This is layout file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="1dip" >

<ImageView
    android:id="@+id/image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:adjustViewBounds="true"
    android:layout_gravity="right|top" />

<ProgressBar android:id="@+id/progressBar"
    android:progressDrawable="@drawable/loader_image"
    android:layout_width="fill_parent" android:layout_height="8dip"
    style="?android:attr/progressBarStyleHorizontal"
    android:indeterminateOnly="false"
    android:max="100">
</ProgressBar>

public class SlidingImage_Adapter extends PagerAdapter {
private ArrayList<String> IMAGES;
private LayoutInflater layoutInflater;
private Context context;
ProgressBar progressBar;
private ImageLoader imageLoader;

public SlidingImage_Adapter(Context context, ArrayList<String> IMAGES) {
    this.context = context;
    this.IMAGES=IMAGES;
    for(int i=0;i<IMAGES.size();i++)
        layoutInflater = LayoutInflater.from(context);
}


@Override
public Object instantiateItem(ViewGroup view, int position) {
  //  ImageView imageLayout = (ImageView) inflater.inflate(R.layout.screen_slide_fragment, view, false);
    layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View item_view = layoutInflater.inflate(R.layout.screen_slide_fragment, view, false);
    ImageView imageView = (ImageView) item_view.findViewById(R.id.image);
    Log.e("instantiateItem: ",IMAGES.get(position) );
    Picasso.with(context)
            .load(IMAGES.get(position))
            .placeholder(R.drawable.loader_image)
            .into(imageView);

    return item_view;
}

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

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


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

}

@Override
public void restoreState(Parcelable state, ClassLoader loader) {
}

@Override
public Parcelable saveState(){
    return null;
   }
 }

thank you

In ViewPager by default besides page load at same time so when you swipe to next you would not able to see progress bar — Rajesh, Sep 28 '17 at 05:40

Samuel Robert · Answer 1 · 2017-09-28T09:10:53.610

1

Use Picasso to load the image that comes with loader settings

Picasso.with(context)
        .load(imageUrl)
        .fit()
        .error(R.drawable.error_drawable)
        .placeholder(R.drawable.loader_image)
        .into(imageView);

screen_slide_fragment.xml should contain only ImageView as the rootView. This is how your method would look like

@Override
public Object instantiateItem(ViewGroup view, int position) {
    ImageView imageLayout = (ImageView) inflater.inflate(R.layout.screen_slide_fragment, view, false);

    Picasso.with(context)
        .load(IMAGES.get(position))
        .placeholder(R.drawable.loader_image)
        .into(imageLayout);

    return imageLayout;
}

Add this in your app's gradle file

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

edited Sep 28 '17 at 09:10

answered Sep 28 '17 at 05:36

Samuel Robert

10,106
7
39
60

It is compulsory to use Picasso – Vikas Godiyal Sep 28 '17 at 05:40
There is another alternative which is Glide – Samuel Robert Sep 28 '17 at 05:40
What should I have to use in place of network ImageView – Vikas Godiyal Sep 28 '17 at 05:43
@Vikas Godiyal Use normal image view – Samuel Robert Sep 28 '17 at 05:44
Okey I have changed Network Image View to simple ImageView but there is one error on imageView.setImageUrl(IMAGES.get(position), imageLoader); (Can't resolve method) – Vikas Godiyal Sep 28 '17 at 05:48
Use the `load(imageUrl)` to set the image URL – Samuel Robert Sep 28 '17 at 05:49
Where will I put the load function? – Vikas Godiyal Sep 28 '17 at 05:54
That's your loader drawable... Check out this answer https://stackoverflow.com/a/4454450/4620609 for that – Samuel Robert Sep 28 '17 at 06:08
java.lang.ClassCastException: android.widget.RelativeLayout cannot be cast to android.widget.ImageView error – Vikas Godiyal Sep 28 '17 at 06:26
I should used Network Image View because the images will come from server – Vikas Godiyal Sep 28 '17 at 06:50
Picasso will take care of the network image that's why you're specifying the url in load method. In your screen_slide_fragment.xml just push the image view as the root view delete everything else.... that should solve the classcast exception problem – Samuel Robert Sep 28 '17 at 06:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155482/discussion-between-vikas-godiyal-and-samuel-robert). – Vikas Godiyal Sep 28 '17 at 07:07
Please check the edited code where images is not coming – Vikas Godiyal Sep 28 '17 at 07:55
I have posted layout file please check it. – Vikas Godiyal Sep 28 '17 at 09:09
Add fit() method to the picasso – Samuel Robert Sep 28 '17 at 09:11
placeholder method is not working while I put another image on it it's working properly – Vikas Godiyal Sep 28 '17 at 13:15

How to add progress bar on ViewPager for every pager

1 Answers1