Set image url into listadapter to show images using Picasso

Question

I have a simple list adapter in which I want to display food images with some text info. Till now I have known that I can do it with libraries like AQuery or Picasso, but I can't figure it out how to implement it after reading a lot of tutorials.

I have added Picasso library in my dependencies. Suppose my Image view id is ImgViewFood

activity

JSONArray jsonArr = jsonObj.getJSONArray("foodnames");
                for (int i = 0; i < jsonArr.length(); i++) {
                    HashMap<String, String> food = new HashMap<>();
                    JSONObject jsonObj = jsonArr.getJSONObject(i);

                    String name = jsonObj.getString("food_name");
                    String url = jsonObj.getString("img_url");

                    food.put("foodname", name);
                    foodList.add(food);
                }
                ListAdapter adapter = new SimpleAdapter(
                        FoodListActivity.this, foodList,
                        R.layout.list_food_detail, new String[]{"foodname"}, new int[]{R.id.view_food_name});

                listviewFood.setAdapter(adapter);

[How to use Picasso with listview?](https://stackoverflow.com/questions/38169605/how-to-use-picasso-with-listview) — ADM, Apr 26 '19 at 04:00
checkout the official picasso website. https://square.github.io/picasso/ — Viswas Kg, Apr 26 '19 at 04:21
i am able to display image using picasso, that is not a problem, problem is how can i implement it with listadapter. — user3099225, Apr 26 '19 at 05:07
need complete code to take a look. where is your ListAdapter class? — Sajith, Apr 26 '19 at 05:28

score 1 · Answer 1 · answered Apr 26 '19 at 05:52

Complete Solution

List adapter

JSONArray jsonArr = jsonObj.getJSONArray("foodnames");
                for (int i = 0; i < jsonArr.length(); i++) {
                    HashMap<String, String> food = new HashMap<>();
                    JSONObject jsonObj1 = jsonArr.getJSONObject(i);
                    String url = "www.nomadicbong.com/images/";
                    food.put("foodname", jsonObj1.getString("foodname"));
                    food.put("foodid", jsonObj1.getString("foodid"));
                    food.put("imgname",url.concat(jsonObj1.getString("imagename")));
                    foodList.add(food);
                }

               ListAdapter adapter = new CustomImageAdapter(

                        FoodListActivity.this, foodList,
                        R.layout.list_food_detail, new String[]{"foodid", "foodname"}, new int[]{R.id.view_food_id,R.id.view_food_name});

                listviewFood.setAdapter(adapter);

CustomImageAdapter

import com.squareup.picasso.*;

/**
 * Created by nomadicbong on 4/25/2019.
 */

public class CustomImageAdapter extends SimpleAdapter{

    public CustomImageAdapter(Context context, List<? extends Map<String, ?>> foodList, int resource, String[] from, int[] to){
        super(context, foodList, resource, from, to);
    }
    public View getView(int position, View convertView, ViewGroup parent){

        View v = super.getView(position, convertView, parent);

        ImageView imgvw = (ImageView) v.getTag();
        if(imgvw == null){
            imgvw = (ImageView) v.findViewById(R.id.imgFood1);
            v.setTag(imgvw);
        }
        // get the url from the data in the `Map`
        String url = ((Map)getItem(position)).get("imgname").toString();
        Picasso.with(v.getContext()).load(url).into(imgvw);
        return v;
    }
}

If this is the answer, you can click the tick/check mark to the left of it, in order to mark the question as solved. It will turn green to acknowledge the solved status. — halfer, Apr 28 '19 at 22:02

Set image url into listadapter to show images using Picasso

1 Answers1

Linked