ListView that fetches images from URL for fragments

Question

I have looked for this everywhere and all possible sources but none seems to work. I found many tutorials that showed fetching and displaying image from URL in ListView but they just don't work for fragments.

Here is my code which I'm using to fetch title and links from url but images just dont come

public class FindPeopleFragment extends ListFragment {  

 TextView txtdesc;
 TextView txtdesc2;
 TextView txtdesc3;

    String flags=Integer.toString(R.drawable.logo);

    String posts;

 @Override
  public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);        

   new Description().execute();   

  }

class Description extends AsyncTask<Void, Void, Void> {

    String title;
    String link;
    Bitmap bitmap = null;
    int i=0;
    List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();

    protected void onPreExecute()    {  }

    protected Void doInBackground(Void... params) {


           try {
            Document document = Jsoup.connect("http://www.marineinsight.com/shipping-news").get();

         Elements links = document.select("article a");
        //  posts = links.text();


            for(Element l : links)
            {
                Elements img = document.select("article a img[src]");
                String imgSrc = img.attr("src");
                URL newurl = new URL(imgSrc); 

                title=l.attr("title");
                if(title==""){ continue; }     
                link=l.attr("href");
                HashMap<String, String> hm = new HashMap<String,String>();
                 hm.put("txt", title);
                 hm.put("cur",link);
                 hm.put("flag",imgSrc);
                 aList.add(hm); 
                 i++;
                    }

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

    }

    protected void onPostExecute(Void result) {

         // Keys used in Hashmap
         String[] from = { "flag","txt","cur" };

         // Ids of views in listview_layout
         int[] to = { R.id.thumb,R.id.title,R.id.date};

         // Instantiating an adapter to store each items
         // R.layout.listview_layout defines the layout of each item
         SimpleAdapter adapter = new SimpleAdapter(getActivity().getBaseContext(), aList, R.layout.list_item, from, to);

      setListAdapter(adapter);      
        }      
}

}

I know that hashmap<string,string> will not be able to display images but I have also tried hashmap<string,object>but it doesn't work as well.

Also I want to implement this through fragments because this list should be a part of side navigation drawer.

Answer 1

if get image in String then first convert that imageSting to bitmap. try below code

public static Bitmap StringToBitMap(String encodedString) {
        try {
            byte[] encodeByte = Base64.decode(encodedString, Base64.DEFAULT);
            Bitmap bitmap = BitmapFactory.decodeByteArray(encodeByte, 0,
                    encodeByte.length);
            return bitmap;
        } catch (Exception e) {
            e.getMessage();
            return null;
        }

and now you can use HashMap<String,Object>

Answer 2

repo1.maven.org/maven2/com/squareup/picasso/picasso/2.3.4/picasso-2.3.4.jar Download this jar file and add it into libs folder of your project.

Add ImageLoaderAdapter within your FindPeopleFragment

class ImageLoaderAdapter extends BaseAdapter {

            private List<HashMap<String, String>> dataList;

            public ImageLoaderAdapter(List<HashMap<String, String>> list) {
                this.dataList = list;
            }

            @Override
            public int getCount() {
                return dataList.size();
            }

            @Override
            public Object getItem(int arg0) {
                return null;
            }

            @Override
            public long getItemId(int position) {
                return 0;
            }

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                if (convertView == null) {
                    LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(
                            Context.LAYOUT_INFLATER_SERVICE);
                    convertView = inflater.inflate(R.layout.list_item, null);
                }
                HashMap<String, String> map = dataList.get(position);
                ((TextView) convertView.findViewById(R.id.title)).setText(map.get("txt"));
                ((TextView) convertView.findViewById(R.id.date)).setText(map.get("cur"));
                Picasso.with(getActivity()).load(map.get("flag"))
                        .into(((ImageView) convertView.findViewById(R.id.thumb)));
                return convertView;
            }

        }

update Description's onPostExecute as below,

    protected void onPostExecute(Void result) {

        /*
         * // Keys used in Hashmap String[] from = { "flag","txt","cur"
         * }; // Ids of views in listview_layout int[] to = {
         * R.id.thumb,R.id.title,R.id.date}; // Instantiating an adapter
         * to store each items // R.layout.listview_layout defines the
         * layout of each item SimpleAdapter adapter = new
         * SimpleAdapter(getActivity().getBaseContext(), aList,
         * R.layout.list_item, from, to);
         */
        if (aList != null) {
            ImageLoaderAdapter adapter = new ImageLoaderAdapter(aList);
            setListAdapter(adapter);
        }else{
                Toast.makeText(getActivity(), "Data list being empty", 

Toast.LENGTH_LONG).show();
            }
}

Change for loop with in doInBackground as below

                   for(Element l : links)
                   {
                        Elements img = l.select("img[src]");//This line changed
                        String imgSrc = img.attr("src");//This line changed
                      // URL newurl = new URL(imgSrc); 

                       title=l.attr("title");
                       if(title==""){ continue; }     
                       link=l.attr("href");
                       HashMap<String, String> hm = new HashMap<String,String>();
                        hm.put("txt", title);
                        hm.put("cur",link);
                        hm.put("flag",imgSrc);
                        aList.add(hm); 
                        i++;
                   }

To know more about library check it