title: Viewpager inside recyclerview adapter
body: <p>I am working on an app where there is a list of item and each item consist of a viewpager and below the viewpager you have other widgets (text, button....etc). I have to load url of images from the server and show the images inside my viewpager</p>
  
  <p>Here is my Viewpager adapter:</p>
  
  <pre><code>public class ImageAdapter extends PagerAdapter {
  
  private Context mContext;
  private ArrayList&lt;String&gt; imagePaths;
  private static final String TAG = ImageAdapter.class.getName();
  // constructor
  public FullScreenImageAdapter(Context context, ArrayList&lt;String&gt; imagePaths){
      this.mContext = context;
      this.imagePaths = imagePaths;
  }
  
  @Override
  public int getCount() {
      return null == imagePaths ? 0 : this.imagePaths.size();
  }
  
  @Override
  public Object instantiateItem(final ViewGroup container, final int position) {
  
      final LayoutInflater inflater = LayoutInflater.from(mContext);
      final View viewLayout = inflater.inflate(R.layout.full_screen_image, container, false);
  
      final ImageView image = (ImageView) viewLayout.findViewById(R.id.image);
      final ProgressBar progressBar = (ProgressBar)viewLayout.findViewById(R.id.pBar);
  
      String url = BuildConfig.URL_API_IMAGES;
      final SparseArray&lt;Object&gt; mBitmapMap = new SparseArray&lt;&gt;();
  
      Glide.with(mContext)
           .load(url + imagePaths.get(position)).asBitmap()
           .placeholder(R.drawable.car)
           .dontAnimate()
           .into(new BitmapImageViewTarget(image){
               @Override
               public void onLoadStarted(Drawable placeholder){
                   super.onLoadStarted(placeholder);
                   image.setImageDrawable(placeholder);
               }
  
               @Override
               public void onResourceReady(Bitmap resource,
                       GlideAnimation&lt;? super Bitmap&gt; glideAnimation){
                   super.onResourceReady(resource, glideAnimation);
                   mBitmapMap.put(position, resource);
                   progressBar.setVisibility(View.INVISIBLE);
                   image.setImageBitmap(resource);
               }
  
               @Override
               public void onLoadFailed(Exception e, Drawable errorDrawable){
                   super.onLoadFailed(e, errorDrawable);
                   progressBar.setVisibility(View.INVISIBLE);
               }
           });
  
      container.addView(viewLayout);
      return viewLayout;
  }
  
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
      try{
          container.removeView((RelativeLayout) object);
          Glide.clear(((View) object).findViewById(R.id.image));
          unbindDrawables((View) object);
          object = null;
      }catch (Exception e) {
          Log.w(TAG, "destroyItem: failed to destroy item and clear it's used resources", e);
      }
  }
  
  protected void unbindDrawables(View view) {
      if (view.getBackground() != null) {
          view.getBackground().setCallback(null);
      }
      if (view instanceof ViewGroup) {
          for (int i = 0; i &lt; ((ViewGroup) view).getChildCount(); i++) {
              unbindDrawables(((ViewGroup) view).getChildAt(i));
          }
          ((ViewGroup) view).removeAllViews();
      }
  }
  
  @Override
  public boolean isViewFromObject(View view, Object object){
      return view == ((RelativeLayout) object);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Here is a portion of my recycler view item:</p>
  
  <pre><code>&lt;RelativeLayout
      android:id="@+id/rl_pictureLayout"
      android:layout_width="match_parent"
      android:layout_marginLeft="@dimen/dimen_5"
      android:layout_marginRight="@dimen/dimen_5"
      android:layout_marginTop="@dimen/dimen_5"
      android:layout_height="@dimen/sliderLayoutHeight"&gt;
  
      &lt;ViewPager
          android:id="@+id/vp_photos"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          /&gt;
  
      &lt;me.relex.circleindicator.CircleIndicator
          android:id="@+id/indicator"
          android:layout_width="match_parent"
          android:layout_marginBottom="50dp"
          android:layout_height="40dp"
          android:layout_alignParentBottom="true"
          /&gt;
  
      &lt;ImageButton
          android:id="@+id/ib_bookmark"
          android:background="@color/transparent"
          android:layout_alignParentRight="true"
          android:layout_alignParentEnd="true"
          android:layout_marginTop="@dimen/dimen_16"
          android:layout_marginRight="@dimen/dimen_16"
          android:layout_marginEnd="@dimen/dimen_16"
          android:src="@drawable/ic_bookmark_border_white_24dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          /&gt;
  
      &lt;TextView
          android:id="@+id/tv_picture_counter"
          android:textColor="@color/white"
          android:textAllCaps="true"
          android:fontFamily="sans-serif"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_marginLeft="@dimen/dimen_16"
          android:layout_marginStart="@dimen/dimen_16"
          android:layout_marginBottom="@dimen/dimen_24"
          /&gt;
  
      &lt;TextView
          android:id="@+id/tv_damagedPhotos"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textColor="@color/white"
          android:fontFamily="sans-serif"
          android:layout_alignParentBottom="true"
          android:layout_alignParentEnd="true"
          android:layout_alignParentRight="true"
          android:layout_marginEnd="@dimen/dimen_16"
          android:layout_marginRight="@dimen/dimen_16"
          android:layout_marginBottom="@dimen/dimen_24"
          android:background="@color/transparent"
          android:drawableRight="@drawable/ic_photo_camera_red_24dp"
          android:drawableEnd="@drawable/ic_photo_camera_red_24dp"
          android:drawablePadding="@dimen/dimen_5"
          /&gt;
  &lt;/RelativeLayout&gt;
  
  &lt;RelativeLayout
      android:id="@+id/rl_timerLayout"
      android:layout_below="@id/rl_pictureLayout"
      android:layout_marginTop="@dimen/dimen_5"
      android:layout_alignLeft="@id/rl_pictureLayout"
      android:layout_alignStart="@id/rl_pictureLayout"
      android:layout_alignRight="@id/rl_pictureLayout"
      android:layout_alignEnd="@id/rl_pictureLayout"
      android:layout_marginBottom="@dimen/dimen_10"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"&gt;
  
      &lt;TextView
          android:id="@+id/tv_timer"
          style="@style/text_item"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentStart="true"
          android:layout_centerVertical="true"
          android:layout_alignParentLeft="true"
          android:textColor="@color/ColorBlack"
          android:textStyle="bold"
          /&gt;
  
      &lt;TextView
          android:id="@+id/tv_highest_bid"
          style="@style/text_item"
          android:layout_centerInParent="true"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textStyle="bold"
          /&gt;
  
      &lt;Button
          android:id="@+id/btn_bid"
          style="@style/button"
          android:layout_width="60dp"
          android:layout_height="30dp"
          android:textAllCaps="false"
          android:background="@drawable/curved_border_bgd_red"
          android:layout_alignParentRight="true"
          android:layout_alignParentEnd="true"
          android:stateListAnimator="@null"
          android:text="@string/btn_text_bid"
          /&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>Here is my (partial) viewholder class inside the recyclerview adapter</p>
  
  <pre><code>static class ViewHolder extends RecyclerView.ViewHolder
  {
      @BindView(R.id.indicator)
      CircularIndicator mCircleIndicator;
      @BindView(R.id.vp_photos)
      ViewPager mViewPagerPhotoView;
  
      public ViewHolder(View itemView)
      {
          super(itemView);
          ButterKnife.bind(this, itemView);
      }
  }
  </code></pre>
  
  <p>In onBindViewHolder this is what i've got (as far as the viewpager is concerned):</p>
  
  <pre><code>Item item = mDataSet.get(position);
  mImageAdapter = new ImageAdapter(mContext, item.getUrlPhotos());
  holder.mViewPagerPhotoView.setAdapter(mImageAdapter);
  holder.mViewPagerPhotoView.setOffscreenPageLimit(mImageAdapter.getCount() - 1);
  holder.mCircleIndicator.setViewPager(holder.mViewPagerPhotoView);
  </code></pre>
  
  <p>Right now my reclerview has 10 items that I load from the server. Thing is, I noticed that when I scroll down say to the 7th item of my list, everything seems fine but when I scroll up back to see say the 1st item of my recycler list, the images found in viewpager of the 1st item tend to disappear and are (temporarily) replaced by the placeholder image i.e the viewpager is completely emptied and I temporarily have the placeholder; if the item is still visible on my screen the images for the viewpager a loaded again from the server.. I picked Glide because it's well known for it's caching capabilities. Moreover, a viewpager can have upto 20 IMAGES 
  !!... </p>
  
  <p>Does anyone have an idea on how to solve this ?? 
  Am I doing anything wrong ?? 
  Any help will be appreciated.....</p>