title: How to correctly implement a custom listview with images using Picasso library?
body: <p>I created a custom listview layout with images which are loaded from web like this:</p>
  
  <p><a href="http://i.stack.imgur.com/l8ZOc.png" rel="nofollow">http://i.stack.imgur.com/l8ZOc.png</a></p>
  
  <p>It works fine when scrolling down. However, when you scroll down, the previous items go out of screen then destroyed. When you try to scroll up again, it gets loaded again (from cache, faster but not instant) which causes a delay and it is not fluent as it should be.</p>
  
  <p>1.Is there an example of how to do this properly?<br>
  2.Is there a way to prevent listview items being destroyed when they are out of screen?<br>
  3.If so, will it cause problems to keep too many items?</p>
  
  <p>Bellow is my code:   </p>
  
  <p>MenuAdapter:</p>
  
  <pre><code>public class MenuAdapter extends BaseAdapter{
  
      Context context;
      List&lt;MyMenuItem&gt; menuItems;
  
      MenuAdapter(Context context, List&lt;MyMenuItem&gt; menuItems) {
          this.context = context;
          this.menuItems = menuItems;
      }
  
      @Override
      public int getCount() {
          return menuItems.size();
      }
  
      @Override
      public Object getItem(int position) {
          return menuItems.get(position);
      }
  
      @Override
      public long getItemId(int position) {
          return menuItems.indexOf(getItem(position));
      }
  
      private class ViewHolder {
          ImageView ivMenu;
          TextView tvMenuHeader;
      }
  
  
  
      @Override
      public View getView(int position, View convertView, ViewGroup parent) {
  
          ViewHolder holder = null;
  
          LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
          if (convertView == null) {
              convertView = mInflater.inflate(R.layout.menu_item, null);
              holder = new ViewHolder();
  
              holder.tvMenuHeader = (TextView) convertView.findViewById(R.id.tvMenuHeader);
              holder.ivMenu = (ImageView) convertView.findViewById(R.id.ivMenuItem);
  
              convertView.setTag(holder);
          } else {
              holder = (ViewHolder) convertView.getTag();
          }
  
          MyMenuItem row_pos = menuItems.get(position);
  
          Picasso.with(context)
                  .load(row_pos.getItem_image_url())
                  .into(holder.ivMenu);
  
          holder.tvMenuHeader.setText(row_pos.getItem_header());
  
          Log.e("Test", "headers:" + row_pos.getItem_header());
          return convertView;
      }
  
  }
  </code></pre>
  
  <p>MyMenuItem:  </p>
  
  <pre><code>public class MyMenuItem {
  
      private String item_header;
      private String item_image_url;
  
      public MyMenuItem(String item_header, String item_image_url){
          this.item_header=item_header;
          this.item_image_url=item_image_url;
      }
  
      public String getItem_header(){
          return item_header;
      }
  
      public void setItem_header(String item_header){
          this.item_header=item_header;
      }
  
      public String getItem_image_url(){
          return item_image_url;
      }
  
      public void setItem_image_url(String item_image_url){
          this.item_image_url=item_image_url;
      }
  }
  </code></pre>
  
  <p>MainActivity:  </p>
  
  <pre><code>public class MyActivity extends Activity implements AdapterView.OnItemClickListener {
  
      List&lt;MyMenuItem&gt; menuItems;
      ListView myListView;
      JSONArray jsonArray;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_my);
          Bundle extras = getIntent().getExtras();
  
          if(extras!=null){
              try{
                  jsonArray = new JSONArray(extras.getString("Data"));
              }catch (Exception e){
                  e.printStackTrace();
              }
          }
  
  
          menuItems = new ArrayList&lt;MyMenuItem&gt;();
  
  
          for (int i = 0; i &lt; jsonArray.length(); i++) {
              try {
                  MyMenuItem item = new MyMenuItem(jsonArray.getJSONObject(i).getString("title"), jsonArray.getJSONObject(i).getString("imageURL"));
                  menuItems.add(item);
              }catch (Exception e){
                  e.printStackTrace();
              }
  
          }
  
          myListView = (ListView) findViewById(R.id.list);
          MenuAdapter adapter = new MenuAdapter(this, menuItems);
          myListView.setAdapter(adapter);
          myListView.setOnItemClickListener(this);
      }
  }
  </code></pre>
  
  <p>MenuItem.xml:  </p>
  
  
  
  <pre><code>&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
  
      &lt;ImageView
          android:id="@+id/ivMenuItem"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:scaleType="center"
          android:src="@drawable/em" /&gt;
  
      &lt;TextView
          android:id="@+id/tvMenuHeader"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:background="#55000000"
          android:paddingBottom="15dp"
          android:paddingLeft="10dp"
          android:paddingRight="10dp"
          android:paddingTop="15dp"
          android:textColor="@android:color/white"
          android:layout_gravity="left|top"
          android:layout_alignBottom="@+id/ivMenuItem"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_alignParentRight="true"
          android:layout_alignParentEnd="true" /&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>