title: Recycler view show wrong items in fragment with multiple view holders
body: <p>I have activity that contain view pager with dynamically created fragment and inside the fragment a recycler view with multiple view holders that showing the data. The data at the first time are displayed correctly but when i scroll up down the data displayed in wrong positions . my the items are text and images downloaded and displayed using <code>Glide</code> so i will show some of the adapter main code because it's very long</p>
  
  <p>The <code>onCreateViewHolder</code> method </p>
  
  <pre><code>    @Override
      public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  
          // the current view holder
          RecyclerView.ViewHolder viewHolder;
  
          switch (viewType) {
              case TYPE_HEADER:
                  View headerView = LayoutInflater.from(parent.getContext()).
                          inflate(R.layout.item_article_header, parent, false);
                  viewHolder = new HeaderViewHolder(headerView);
                  break;
              case TYPE_EXTRA_INFORMATION:
                  View extraInformationViewView = LayoutInflater.from(parent.getContext()).
                          inflate(R.layout.item_article_extra_information, parent, false);
                  viewHolder = new ExtraArticleInformationViewHolder(extraInformationViewView);
                  break;
              case TYPE_TEXT:
                  View textView = LayoutInflater.from(parent.getContext()).
                          inflate(R.layout.item_content_text, parent, false);
                  viewHolder = new TextViewHolder(textView);
                  break;
              case TYPE_IMAGE:
                  View imageView = LayoutInflater.from(parent.getContext()).
                          inflate(R.layout.item_content_image, parent, false);
                  viewHolder = new ImageViewHolder(imageView);
                  break;
              case TYPE_TITLE:
                  View titleView = LayoutInflater.from(parent.getContext()).
                          inflate(R.layout.item_content_title, parent, false);
                  viewHolder = new TitleViewHolder(titleView);
                  break;
              default:
                  View emptyView = LayoutInflater.from(parent.getContext()).
                          inflate(R.layout.item_article_empty_view, parent, false);
                  viewHolder = new EmptyViewHolder(emptyView);
          }
          return viewHolder;
      }
  </code></pre>
  
  <p>The <code>onBindViewHolder</code> method and the init methods they for binding the data </p>
  
  <pre><code>@Override
      public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
          String type = "";
          if (position - 1 &gt; 0 &amp;&amp; position &lt; article.getContent().size()) {
              type = article.getContent().get(position - 1).getType();
          }
      switch (holder.getItemViewType()) {
          case TYPE_HEADER:
              initHeaderBindViewHolder((HeaderViewHolder) holder);
              break;
          case TYPE_EXTRA_INFORMATION:
              initExtraInformationBindViewHolder((ExtraArticleInformationViewHolder) holder);
              break;
          case TYPE_TEXT:
              initTextViewHolder((TextViewHolder) holder, position);
              break;
          case TYPE_IMAGE:
              initImageViewHolder((ImageViewHolder) holder, position);
              break;
          case TYPE_TITLE:
              initTitleViewHolder((TitleViewHolder) holder, position);
              break;
          case TYPE_VIDEO:
              initVideoViewHolder((VideoViewHolder) holder, position);
              break;
          default:
              initEmptyViewHolder((EmptyViewHolder) holder, position);
      }
      }
  </code></pre>
  
  <p>The <code>getItemViewType</code> method and the methods in the if a utils methods to determine the correct view holder </p>
  
  <pre><code> @Override
      public int getItemViewType(int position) {
          if (isArticleItemHeader(position)) {
              return TYPE_HEADER;
          } else if (isArticleItemExtraInformation(position, article)) {
              return TYPE_EXTRA_INFORMATION;
          } else if (isArticleItemText(position, article)) {
              return TYPE_TEXT;
          } else if (isArticleItemImage(position, article)) {
              return TYPE_IMAGE;
          } else if (isArticleItemTitle(position, article)) {
              return TYPE_TITLE;
          } else {
              return TYPE_EMPTY;
          }
      }
  </code></pre>
  
  <p>The image view holder  init method </p>
  
  <pre><code>  private void initImageViewHolder(ImageViewHolder holder) {
          //Check separator
          List&lt;Content&gt; contents = article.getContent();
          boolean isUpSeparator = false;
          boolean isDownSeparator = false;
          if (holder.getAdapterPosition() != 1 &amp;&amp; holder.getAdapterPosition() != contents.size()) {
              //Check up separator
              if (holder.getAdapterPosition() - 2 &gt; 0) {
                  if (contents.get(holder.getAdapterPosition() - 2).getType().equals(CONTENT_SEPARATOR)) {
                      ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) holder.contentContainer.getLayoutParams();
                      params.topMargin = (int) dpToPx(context, 4);
                      isUpSeparator = true;
                  }
                  //Check down separator
              } else if (holder.getAdapterPosition() &lt; contents.size()) {
                  if (contents.get(holder.getAdapterPosition()).getType().equals(CONTENT_SEPARATOR)) {
                      isDownSeparator = true;
                  }
              }
          }
  
          Content content = article.getContent().get(holder.getAdapterPosition() - 1);
          if (content != null) {
              if (content.getType().equals(CONTENT_IMAGE)) {
                  if (content.getImage() != null) {
                      if (!content.getImage().trim().isEmpty()) {
                          boolean isImageSmallThanScreen = false;
  
                          //determine if an image is gid or not to change the placeholder
                          if (content.getImage().trim().contains(".gif")) {
                              holder.placeHolderImage.setImageResource(R.drawable.gif_place_holder);
                          }
  
                          //set the total margin in the article width in the current case we take
                          //6 form right and 6 from left
                          float marginDistance = dpToPx(context, 12);
  
                          //get the article width
                          DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
                          float dpWidth = (displayMetrics.widthPixels - marginDistance) / displayMetrics.density;
                          float viewWidth = displayMetrics.widthPixels - marginDistance;
  
                          //check if the image size is bigger than the screen dp
                          if (dpWidth &gt; content.getWidth()) {
                              isImageSmallThanScreen = true;
                              viewWidth = dpToPx(context, content.getWidth());
                          }
  
                          //get the ratio
                          float ratio = (float) content.getWidth() / (float) content.getHeight();
  
                          //set the new view height
                          float viewHeight = viewWidth / ratio;
  
                          //set the image size for the place holder
                          holder.contentImage.getLayoutParams().height = (int) viewHeight;
                          holder.contentImage.getLayoutParams().width = (int) viewWidth;
  
                          //the radius to set to the corner of the view
                          float cornerRadius = dpToPx(context, 12);
  
                          //check the text is first or the last to put separator
                          if (holder.getAdapterPosition() == 1 || isUpSeparator) {
                              holder.contentContainer.setTopRightCornerRadius(cornerRadius);
                              holder.contentContainer.setTopLeftCornerRadius(cornerRadius);
                              holder.contentContainer.setBackgroundResource(R.drawable.up_separator_gray);
                          } else if (holder.getAdapterPosition() == article.getContent().size() || isDownSeparator) {
                              holder.contentContainer.setBottomLeftCornerRadius(cornerRadius);
                              holder.contentContainer.setBottomRightCornerRadius(cornerRadius);
                              holder.contentContainer.setBackgroundResource(R.drawable.down_separator_gray);
                          } else {
                              holder.contentContainer.setBackgroundColor(context.
                                      getResources().getColor(R.color.text_typo_background));
                          }
  
                          //load the article content image
                          boolean finalIsImageSmallThanScreen = isImageSmallThanScreen;
                          boolean finalIsUpSeparator = isUpSeparator;
                          boolean finalIsDownSeparator = isDownSeparator;
                          GlideApp.with(context)
                                  .load(content.getImage().trim())
                                  .transition(DrawableTransitionOptions.withCrossFade())
                                  .diskCacheStrategy(DiskCacheStrategy.ALL)
                                  .listener(new RequestListener&lt;Drawable&gt;() {
                                      @Override
                                      public boolean onLoadFailed(@Nullable GlideException e,
                                                                  Object model, Target&lt;Drawable&gt; target,
                                                                  boolean isFirstResource) {
                                          return false;
                                      }
  
                                      @Override
                                      public boolean onResourceReady(Drawable resource, Object model,
                                                                     Target&lt;Drawable&gt; target,
                                                                     DataSource dataSource,
                                                                     boolean isFirstResource) {
                                          holder.placeHolderImage.setVisibility(View.GONE);
  
                                          //if the image is small than the device width set the background to white
                                          if (finalIsImageSmallThanScreen) {
                                              if (holder.getAdapterPosition() == 1 || finalIsUpSeparator) {
                                                  holder.contentContainer.setBackgroundResource(R.drawable.up_separator);
                                              } else if (holder.getAdapterPosition() == article.getContent().size() || finalIsDownSeparator) {
                                                  holder.contentContainer.setBackgroundResource(R.drawable.down_separator);
                                              } else {
                                                  holder.contentContainer.setBackgroundColor(Color.WHITE);
                                              }
                                          }
                                          return false;
                                      }
                                  })
                                  .into(holder.contentImage);
                      }
                  }
              }
          }
      }
  </code></pre>
  
  <p>Any help will be good...</p>