Android SimpleAdapter image and text list

Question

I currently trying to developp an app on Android, which allow users to list their own objet in a listView.

I'm facing a problem to convert the url string of the objet image, into an imageview.

I already succeed to retrieve the object url from JSON, but once i got it , i dont know how to put it in my imageView.

This is my code :

@Override
    protected String doInBackground(String... arg0) {
        try {

            JSONParser jParser = new JSONParser();
            JSONObject json = jParser.getJSONFromUrl(yourJsonStringUrl);
            dataJsonArr = json.getJSONArray("objects");

            //Création de la ArrayList qui nous permettra de remplire la listView
            listItem = new ArrayList<HashMap<String, String>>();

            // On parcour le JSON
            for (int i = 0; i < dataJsonArr.length(); i++) {
                JSONObject c = dataJsonArr.getJSONObject(i);

                // Formation des items de notre ListView
                map = new HashMap<String, String>();
                map.put("titre", c.getString("title"));
                map.put("price", c.getString("price"));
                map.put("addedDate", c.getString("addedDate"));
                map.put("img", c.getString("picture_url"));
                listItem.add(map);
            }

        } catch (JSONException e) {
            e.printStackTrace();
        }
        return null;
    }

    protected void onPostExecute(String message) {

        Bitmap bmap = getBitmapFromURL(listItem.get(0).get("img").toString());
        image.setImageBitmap(bmap);

        //Création d'un SimpleAdapter qui se chargera de mettre les items présent dans notre list (listItem) dans la vue fragment_add_objet
        mSchedule = new SimpleAdapter (getActivity(), listItem, R.layout.layout_user_objects,
                new String[] {"img", "titre", "price", "addedDate"}, new int[] {R.id.img, R.id.titre, R.id.price, R.id.addedDate});

        //On attribut à notre listView l'adapter que l'on vient de créer
        maListViewPerso.setAdapter(mSchedule);
    }


}

Answer 1

You should use a library like Picasso or Glide to load an image from a url. Have in mind that you have to download it first to be able to display it in an ImageView. This makes your life easier, but you can always download it without using a library though I don't find a reason.

Here you have an example code using Picasso:

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

You can check it here: http://square.github.io/picasso/

Glide is also a good option and really similar in terms of usage.

https://github.com/bumptech/glide

There are more, but I just mentioned the ones I liked the most.

Also, if this is a list of items, you should be doing this inside your Adapter, in the getView() method.

Answer 2

You should create your own custom adapter for the ListView. It is pretty simple.

For fetching images from the URL you may want to use Picasso library. Using this library in your getView of your adapter you could add this line to setting the image.

Picasso.with(getContext())
       .load(mYourItems[position].getURL())
       .into(imageView);

mYourItems is the collection of items this adapter is iterating through. position is also index to the current row.

Answer 3

I think you should create your own implementation of BaseAdapter, because SimpleAdapter is not enough flexible for your goals. And you can use some third-party libraries to load image from URL asynchronously and insert it into the view. For example you can use Picasso or UIL