How to use picasso or universal image loader and listview

Question

Load from the internet text data and link to image. I can't understand how to load image in listview. Read, it needs to use picasso or universal image loader, but did not understand how. Correct my code, please

    public class JsonReadTask extends AsyncTask<String, Void, String> {

      @Override
      protected String doInBackground(String... params) {
       HttpClient httpclient = new DefaultHttpClient();
       HttpPost httppost = new HttpPost(params[0]);
       try {
        HttpResponse response = httpclient.execute(httppost);
        jsonResult = inputStreamToString(
          response.getEntity().getContent()).toString();
       }

       catch (ClientProtocolException e) {
        e.printStackTrace();
       } catch (IOException e) {
        e.printStackTrace();
       }
       return null;
      }

      private StringBuilder inputStreamToString(InputStream is) {
       String rLine = "";
       StringBuilder answer = new StringBuilder();
       BufferedReader rd = new BufferedReader(new InputStreamReader(is));

       try {
        while ((rLine = rd.readLine()) != null) {
         answer.append(rLine);
        }
       }

       catch (IOException e) {
        // e.printStackTrace();
        Toast.makeText(getActivity(),
          "Error..." + e.toString(), Toast.LENGTH_LONG).show();
       }
       return answer;
      }

      @Override
      protected void onPostExecute(String result) {
       ListDrwaer();
      }
     }// end async task

     public void accessWebService() {
      JsonReadTask task = new JsonReadTask();
      // passes values for the urls string array
      task.execute(new String[] { url });
     }
     private final String ATTRIBUTE1 = "header"; 
     private final String ATTRIBUTE2 = "short_text";
     private final String ATTRIBUTE3 = "team";
     private final String ATTRIBUTE4 = "datatime";
     private final String ATTRIBUTE5 = "photo_url";
     Drawable drawable;
     // build hash set for list view
     public void ListDrwaer() {          
        // упаковываем данные в понятную для адаптера структуру
            ArrayList<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
                    Map<String, Object> m;

            // массив имен атрибутов, из которых будут читаться данные
            String[] from = {ATTRIBUTE1, ATTRIBUTE2, ATTRIBUTE3, ATTRIBUTE4, ATTRIBUTE5};

            // массив ID View-компонентов, в которые будут вставлять данные
            int[] to = { R.id.header, R.id.short_text,  R.id.team, R.id.datatime, R.id.img_news};

      try {
       JSONObject jsonResponse = new JSONObject(jsonResult);
       JSONArray jsonMainNode = jsonResponse.optJSONArray("news");
       for (int i = 0; i < jsonMainNode.length(); i++) {
        JSONObject jsonChildNode = jsonMainNode.getJSONObject(i);
        String header = jsonChildNode.optString("header");
        String short_text = jsonChildNode.optString("short_text");
        String team = jsonChildNode.optString("team");
        String datatime = jsonChildNode.optString("datatime");
        String photo_url = jsonChildNode.optString("photo_url");    


        // создаем новый Map
        m = new HashMap<String, Object>();
        m.put(ATTRIBUTE1, header);
        m.put(ATTRIBUTE2, short_text);
        m.put(ATTRIBUTE3, team);
        m.put(ATTRIBUTE4, datatime);
     //   m.put(ATTRIBUTE5, url_photo);
        // добавляем его в коллекцию
        data.add(m);
       }
      } catch (JSONException e) {
       Toast.makeText(getActivity(), "Error" + e.toString(),
         Toast.LENGTH_SHORT).show();
      }

      SimpleAdapter simpleAdapter = new SimpleAdapter(getActivity(), data,
        R.layout.news_details,
        from, to);        
      Parcelable state = listView.onSaveInstanceState();
      listView.setAdapter(simpleAdapter);
      listView.onRestoreInstanceState(state);
     }

}

Answer 1

Create your own adapter which extends from ArrayAdapter. There are a lot of examples:

• Vogella tutorial
• another one

then in your getView method call (something similar depends on your implementation):

Picasso.with(context).load(getItem(position).get(ATTRIBUTE5)).into(holder.imageView);

For more info refer to Picasso documentation.