Android - How can diplay pictures in a simpleApapter list view

Question

I'm trying to display te pictures in a SimpleAdapter listview. I included Picasso in my project but i don't know how to use Picasso with a SimpleAdapter.

List<HashMap<String, String>> featured = new ArrayList<HashMap<String, String>>();

            for (int i=0;i<ids.length;i++){
                HashMap<String, String> hm = new HashMap<String, String>();
                hm.put("productname", names[i]);
                hm.put("productprice", prices[i]);
                hm.put("productimage", images[i]);
                featured.add(hm);
            }

            String[] from = {"productname", "productprice", "productimage"};
            int[] to = {R.id.tv_ProductName, R.id.tv_ProductPrice, R.id.icon};

            SimpleAdapter adapter = new SimpleAdapter(MainActivity.this, featured, R.layout.listitem_featured, from, to);
            HorizontalListView featuredList = (HorizontalListView) findViewById(R.id.lv_Featured);
            featuredList.setAdapter(adapter);

The productname and price are displayed correctly. The product image isn't displayed at all. The images are urls, for example:

http://thingd-media-ec1.thefancy.com/default/171510088920465761_1686d73fc160.jpeg

What has to be done to display the images correctly?

Answer 1

you can't "pass Picasso" to the adapter. You have to create your own custom adapter, it's not as daunting as it sounds. It may even be based on the SimpleAdapter. Like this:

public class MyAdapter extends SimpleAdapter{

  public MyAdapter(Context context, List<? extends Map<String, ?>> data, int     resource, String[] from, int[] to){
  super(context, data, resource, from, to);
  }

   public View getView(int position, View convertView, ViewGroup parent){
  // here you let SimpleAdapter built the view normally.
  View v = super.getView(position, convertView, parent);

   // Then we get reference for Picasso
  ImageView img = (ImageView) v.getTag();
  if(img == null){
     img = (ImageView) v.findViewById(R.id.imageOrders);
     v.setTag(img); // <<< THIS LINE !!!!
  }
  // get the url from the data you passed to the `Map`
  String url = ((Map)getItem(position)).get(TAG_IMAGE);
  // do Picasso
  // maybe you could do that by using many ways to start

    Picasso.with(context).load(url)
            .resize(imageWidth, imageWidth).into(img);

  // return the view
  return v;
   }
}

BTW on Custom Adapter you can use it BY:

Picasso.with(context).load(yoururl)
            .resize(imageWidth, imageWidth).into(holder.imageItem);

Then you can just use this class without the image on the parameters (but it must still exist inside orderList).

ListView list= (ListView) getActivity().findViewById(R.id.list);
ListAdapter adapter = 
   new MyAdapter(
            getActivity(),
            orderList,
            R.layout.order_usa_row,
            new String[]{TAG_PRICE,TAG_TITLE,TAG_PSTATUS,TAG_PRICESYMBOL},
            new int[]{R.id.price,R.id.title,R.id.pstatus,R.id.symbol});
 list.setAdapter(adapter);

For image size I think you need to re-size it !! as in example above .resize(imageWidth, imageWidth) hope this help!!