title: RecyclerView of RecyclerViews: Image Loading
body: <p>I try to implement a layout that contains a vertical <code>RecyclerView</code> that itself contains multiple horizontal <code>RecyclerViews</code> (imagine a news site, with multiple news sections, where each section contains multiple news stories that can be scrolled horizontally). </p>
  
  <p>The horizontal <code>RecyclerView</code> contains (among other things) an <code>ImageView</code>. I'm looking for the optimal strategy of loading an image from an URL into this <code>ImageView</code>. </p>
  
  <p>Firstly, my code. The Adapter for the outer RecyclerView: </p>
  
  <pre><code>    @Override
      public ItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
          View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.content_preview_list_item, null);
          ItemRowHolder mh = new ItemRowHolder(v);
  
          mh.recycler_view_list.setAdapter(new SectionListDataAdapter(mContext, listener, new ArrayList&lt;ContentPreviewButtonItem&gt;()));
          mh.recycler_view_list.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
          return mh;
      }
  
      @Override
      public void onBindViewHolder(ItemRowHolder itemRowHolder, int i) {
          Log.d("RecyclerViewDataAdapter", "onBindViewHolder");
          final String sectionName = dataList.get(i).getTitle();
  
          ArrayList singleSectionItems = dataList.get(i).getItems();
  
          itemRowHolder.itemTitle.setText(sectionName);
           ((SectionListDataAdapter)itemRowHolder.recycler_view_list.getAdapter()).setItemList(singleSectionItems);
          itemRowHolder.recycler_view_list.getAdapter().notifyDataSetChanged();
  
          itemRowHolder.recycler_view_list.setHasFixedSize(true);
      }
  </code></pre>
  
  <p>And for the inner RecyclerView that contains the images: </p>
  
  <pre><code>    @Override
      public SingleItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
          Log.d("SectionListDataAdapter", "onCreateViewHolder");
          View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.content_preview_item, null);
          SingleItemRowHolder mh = new SingleItemRowHolder(v);
          return mh;
      }
  
      @Override
      public void onBindViewHolder(SingleItemRowHolder holder, int i) {
  
          Log.d("SectionListDataAdapter", "onBindViewHolder");
          ContentPreviewButtonItem singleItem = itemsList.get(i);
  
          Uri imageUri = Uri.parse(singleItem.getImageUrl());
          holder.itemImage.setImageURI(imageUri); //itemImage is a SimpleDraweeView
  
      }
  </code></pre>
  
  <p>While this code works great on mobile, there's a noticeable lag on tablet when multiple inner <code>RecyclerViews</code> and images are loaded at once. Right now I use Facebook's Fresco library to load the image into a <code>SimpleDraweeView</code>. I also tried Picasso but that yield an <code>OutOfMemoryException</code> when multiple images had to be loaded at once. 
  I improved the performance by moving the adapter creation of the inner <code>RecyclerViews</code> into the <code>onCreateViewHolder</code> instead of the <code>onBindViewHolder</code>, but the lag is still noticeable. </p>
  
  <p>What's the best strategy or library to load images in this scenario.
  Thanks </p>