0

I want to display images in my app, I get the urls of this images from a mysql databse. Currently it only displays the urls of the images as text

How can I download the images and display them in the listview?

 /**
 * Retrieves recent post data from the server.
 */
public void updateJSONdata() {

    // Instantiate the arraylist to contain all the JSON data.
    // we are going to use a bunch of key-value pairs, referring
    // to the json element name, and the content, for example,
    // message it the tag, and "I'm awesome" as the content..

    mCommentList = new ArrayList<HashMap<String, String>>();

    // Bro, it's time to power up the J parser
    JSONParser jParser = new JSONParser();
    // Feed the beast our comments url, and it spits us
    //back a JSON object.  Boo-yeah Jerome.
    JSONObject json = jParser.getJSONFromUrl(READ_COMMENTS_URL);

    //when parsing JSON stuff, we should probably
    //try to catch any exceptions:
    try {

        //I know I said we would check if "Posts were Avail." (success==1)
        //before we tried to read the individual posts, but I lied...
        //mComments will tell us how many "posts" or comments are
        //available
        mComments = json.getJSONArray(TAG_POSTS);

        // looping through all posts according to the json object returned
        for (int i = 0; i < mComments.length(); i++) {
            JSONObject c = mComments.getJSONObject(i);

            //gets the content of each tag
            String title = c.getString(TAG_TITLE);
            String content = c.getString(TAG_MESSAGE);
            String username = c.getString(TAG_USERNAME);
            String url = c.getString(TAG_URL);




            // creating new HashMap
            HashMap<String, String> map = new HashMap<String, String>();

            map.put(TAG_TITLE, title);
            map.put(TAG_MESSAGE, content);
            map.put(TAG_USERNAME, username);
            map.put(TAG_URL, url);

            // adding HashList to ArrayList
            mCommentList.add(map);

            //annndddd, our JSON data is up to date same with our array list
        }

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



/**
 * Inserts the parsed data into the listview.
 */
private void updateList() {
    // For a ListActivity we need to set the List Adapter, and in order to do
    //that, we need to create a ListAdapter.  This SimpleAdapter,
    //will utilize our updated Hashmapped ArrayList,
    //use our single_post xml template for each item in our list,
    //and place the appropriate info from the list to the
    //correct GUI id.  Order is important here.
    ListAdapter adapter = new SimpleAdapter(this, mCommentList,
            R.layout.single_post, new String[] { TAG_TITLE, TAG_MESSAGE,
            TAG_USERNAME, TAG_URL }, new int[] { R.id.title, R.id.message,
            R.id.username, R.id.url });

    // I shouldn't have to comment on this one:
    setListAdapter(adapter);

    // Optional: when the user clicks a list item we
    //could do something.  However, we will choose
    //to do nothing...
    ListView lv = getListView();
    lv.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                                int position, long id) {

            // This method is triggered if an item is click within our
            // list. For our example we won't be using this, but
            // it is useful to know in real life applications.

        }
    });

EDIT: JSONParser.java

 package com.test.mysqltest;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.util.List;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.utils.URLEncodedUtils;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONException;
import org.json.JSONObject;

import android.util.Log;

public class JSONParser {

    static InputStream is = null;
    static JSONObject jObj = null;
    static String json = "";

    // constructor
    public JSONParser() {

    }


    public JSONObject getJSONFromUrl(final String url) {

        // Making HTTP request
        try {
            // Construct the client and the HTTP request.
            DefaultHttpClient httpClient = new DefaultHttpClient();
            HttpPost httpPost = new HttpPost(url);

            // Execute the POST request and store the response locally.
            HttpResponse httpResponse = httpClient.execute(httpPost);
            // Extract data from the response.
            HttpEntity httpEntity = httpResponse.getEntity();
            // Open an inputStream with the data content.
            is = httpEntity.getContent();

        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        try {
            // Create a BufferedReader to parse through the inputStream.
            BufferedReader reader = new BufferedReader(new InputStreamReader(
                    is, "iso-8859-1"), 8);
            // Declare a string builder to help with the parsing.
            StringBuilder sb = new StringBuilder();
            // Declare a string to store the JSON object data in string form.
            String line = null;

            // Build the string until null.
            while ((line = reader.readLine()) != null) {
                sb.append(line + "\n");
            }

            // Close the input stream.
            is.close();
            // Convert the string builder data to an actual string.
            json = sb.toString();
        } catch (Exception e) {
            Log.e("Buffer Error", "Error converting result " + e.toString());
        }

        // Try to parse the string to a JSON object
        try {
            jObj = new JSONObject(json);
        } catch (JSONException e) {
            Log.e("JSON Parser", "Error parsing data " + e.toString());
        }

        // Return the JSON Object.
        return jObj;

    }


    // function get json from url
    // by making HTTP POST or GET mehtod
    public JSONObject makeHttpRequest(String url, String method,
                                      List<NameValuePair> params) {

        // Making HTTP request
        try {

            // check for request method
            if(method == "POST"){
                // request method is POST
                // defaultHttpClient
                DefaultHttpClient httpClient = new DefaultHttpClient();
                HttpPost httpPost = new HttpPost(url);
                httpPost.setEntity(new UrlEncodedFormEntity(params));

                HttpResponse httpResponse = httpClient.execute(httpPost);
                HttpEntity httpEntity = httpResponse.getEntity();
                is = httpEntity.getContent();

            }else if(method == "GET"){
                // request method is GET
                DefaultHttpClient httpClient = new DefaultHttpClient();
                String paramString = URLEncodedUtils.format(params, "utf-8");
                url += "?" + paramString;
                HttpGet httpGet = new HttpGet(url);

                HttpResponse httpResponse = httpClient.execute(httpGet);
                HttpEntity httpEntity = httpResponse.getEntity();
                is = httpEntity.getContent();
            }

        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        try {
            BufferedReader reader = new BufferedReader(new InputStreamReader(
                    is, "iso-8859-1"), 8);
            StringBuilder sb = new StringBuilder();
            String line = null;
            while ((line = reader.readLine()) != null) {
                sb.append(line + "\n");
            }
            is.close();
            json = sb.toString();
        } catch (Exception e) {
            Log.e("Buffer Error", "Error converting result " + e.toString());
        }

        // try parse the string to a JSON object
        try {
            jObj = new JSONObject(json);
        } catch (JSONException e) {
            Log.e("JSON Parser", "Error parsing data " + e.toString());
        }

        // return JSON String
        return jObj;

    }
}
Hendrik04
  • 67
  • 2
  • 3
  • 9
  • You are using SimpleAdapter for your ListView to show your data. This Adapter does not handle images. You will need to create a custom adapter to parse your data, display it in a View, and also load your images. Look for tutorials explaining how to use a custom Adapter to load and show images in a listview, there are plenty to be found. – Sander van't Veer Oct 13 '15 at 09:28

3 Answers3

1

Look at this article http://www.androidhive.info/2014/07/android-custom-listview-with-image-and-text-using-volley/

The is an example of fetching and displaying of images using Volley library.

Well the problem is in your ListAdapter. SimpleAdapter just show fields as strings.

Implement your own Adapter with custom view.

Alex Klimashevsky
  • 2,457
  • 3
  • 26
  • 58
  • I dont know how to add the images to the post, this is how the text is added: // creating new HashMap HashMap map = new HashMap(); map.put(TAG_TITLE, title); map.put(TAG_MESSAGE, content); map.put(TAG_USERNAME, username); map.put(TAG_URL, url); <- Image Url // adding HashList to ArrayList mCommentList.add(map); – Hendrik04 Mar 23 '15 at 16:21
0

For simplicity you can do this: As you are getting the url of a image. Just take a imageView. For example:

ImageView logo = (ImageView) rootView.findViewById(R.id.logo);

and this chunks of code may work:

   try {
            // Bitmap bitmap = BitmapFactory.decodeStream((InputStream) new URL(" http://corporate2.bdjobs.com/21329.jpg").getContent());
            Bitmap bitmap = BitmapFactory.decodeStream((InputStream) new URL(m.getLogo()).getContent());
            //  http://corporate2.bdjobs.com/21329.jpg
            logo.setImageBitmap(bitmap);
            //convertView.setBackgroundResource(R.drawable.cardlayout);

        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

If you want more depth and make you app perform better with queue management then you can try this tutorial.

Mohammad Arman
  • 7,020
  • 2
  • 36
  • 50
  • I dont know how to add the images to the post, this is how the text is added: // creating new HashMap HashMap map = new HashMap(); map.put(TAG_TITLE, title); map.put(TAG_MESSAGE, content); map.put(TAG_USERNAME, username); map.put(TAG_URL, url); <- Image Url // adding HashList to ArrayList mCommentList.add(map); – Hendrik04 Mar 23 '15 at 16:20
  • Actually the purpose of HashMap is to format the informations and pass it to your adapter class. And your code is doing it perfectly. What you have to do next is to embed the given code in your adapter. If you can update your question with the adapter class as well, then it will be easier to help you. – Mohammad Arman Mar 23 '15 at 16:32
  • I added the JSONParser.java – Hendrik04 Mar 23 '15 at 16:55
0

This is the difficult part where the content of the posts is added to the listview:

            //gets the content of each tag
            String title = c.getString(TAG_TITLE);
            String content = c.getString(TAG_MESSAGE);
            String username = c.getString(TAG_USERNAME);
            String url = c.getString(TAG_URL);  // <- Gets Image Url





            // creating new HashMap
            HashMap<String, String> map = new HashMap<String, String>();

            map.put(TAG_TITLE, title);
            map.put(TAG_MESSAGE, content);
            map.put(TAG_USERNAME, username);
            map.put(TAG_URL, url);         //<- Adds Image Url as text to post

            // adding HashList to ArrayList
            mCommentList.add(map);

Output: Screenshot

Hendrik04
  • 67
  • 2
  • 3
  • 9