Issue on ViewPager by usng Picasso

Question

I have a code where images will show on ViewPager and the images will come from server. I am using Picasso library but when I am using Picasso the images is not coming on ViewPager. Array IMAGES have the image's URL which I add on load method, please check my code and suggest me the problem. Below is the XML and java code

<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))
            .error(R.drawable.girl)
            .placeholder(R.drawable.loader_image)
            .fit()
            .centerCrop()
            .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;
   }
  }   

Answer 1

try this. add view.addView(item_view); line into your code

@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))
            .error(R.drawable.girl)
            .placeholder(R.drawable.loader_image)
            .fit()
            .centerCrop()
            .into(imageView);

    //you need to add this line
    view.addView(item_view);

    return item_view;
}

to show progressBar use below code and compile this

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

into app gradle file

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


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

    ProgressBar spinner = (ProgressBar) item_view.findViewById(R.id.progressBar);

    //This will help to load image and show progressBar
    imageLoader = new ImageLoader(imageView, spinner, IMAGES.get(position));

    //you need to add this line
    view.addView(item_view);

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



    public class ImageLoader{

        public ImageLoader(ImageView imageView, final ProgressBar progressBar, String imagePath){

            Glide.with(context).load(imagePath).listener(new RequestListener<String, GlideDrawable>() {

                @Override
                public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                    //handle error
                    return false;
                }

                @Override
                public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                    progressBar.setVisibility(View.GONE);
                    return false;
                }
            }).into(imageView);
        }
    }

}

and xml file code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:padding="1dip" >

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:max="100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

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

</RelativeLayout>