Image from URL using SimpleAdapter

Question

I am using this code to get data from JSON.

public class ShowContacts extends ListActivity{

    private static String url = "http://192.168.0.103/contacts.json";
    private static final String TAG_CONTACTS = "contacts";
    private static final String TAG_NAME = "name";
    private static final String TAG_IMAGE = "image";

    JSONArray contacts = null;

    int index = 0;

    ArrayList<HashMap<String, String>> contactList;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);     
        setContentView(R.layout.showjson);

        contactList = new ArrayList<HashMap<String, String>>();
        new GetContacts().execute();

    }

    private class GetContacts extends AsyncTask<Void, Void, Void> {

        @Override
        protected Void doInBackground(Void... arg0) {

            ServiceHandler sh = new ServiceHandler();           
            String jsonStr = sh.makeServiceCall(url, ServiceHandler.GET);
            Log.d("Response: ", "> " + jsonStr);

            if (jsonStr != null) {
                try {
                    JSONObject jsonObj = new JSONObject(jsonStr);

                    contacts = jsonObj.getJSONArray(TAG_CONTACTS);

                    for (int i = 0; i < contacts.length(); i++) {

                        JSONObject c = contacts.getJSONObject(i);

                        String name = c.getString(TAG_NAME);
                        String image = c.getString(TAG_IMAGE);

                        HashMap<String, String> contact = new HashMap<String, String>();

                        contact.put(TAG_NAME, name);
                        contact.put(TAG_IMAGE, image);

                        contactList.add(contact);

                    }

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

        @Override
        protected void onPostExecute(Void result) {

            super.onPostExecute(result);

            String[] from = { TAG_NAME, TAG_IMAGE };

            int[] to = { R.id.name, R.id.image };

            ListAdapter adapter = new SimpleAdapter(

                ShowContacts.this, contactList, R.layout.list_item, from , to );        

            setListAdapter(adapter);

        }

    }

}

I want to get the name and image from JSON. I am getting the name and it is displaying on the list, but I can't get the image. This is my JSON:

{
    "contacts": [
        {
            "name": "John Smith",
            "image": "http://192.168.0.103/image1.png"
        },
        {                 
            "name": "John Wayne",
            "image": "http://192.168.0.103/image2.png"
        }    
    ]
}

I think it is not working because the image is online and the it tries to add it as Drawable. I am not sure how to do this. Is there any way?

Answer 1

You are supposed to download the image using the LazyLoading and load that into the ImageView. You can not directly load the image just simply parsing and setting url into ImageView.

Use the Concept of LazyLoading or Universal ImageLoader

Check the simple demostration of Loading Image from URL

Answer 2

1)you can use Universal ImageLoader to download image from specific URL and Disply in to your List.

you do not use direct imageURL to show it in list item

please check this universal image loader reference link

Answer 3

public class ItemImagesAdapter extends BaseAdapter {

private Context context;
private ArrayList<String> contactList;
private ImageLoader iml;

public ItemImagesAdapter(Context ctx, ArrayList<String> image_paths) {
    context = ctx;
    contactList = image_paths;
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(activity).build();
    ImageLoader.getInstance().init(config);
    iml = ImageLoader.getInstance();
}

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

@Override
public Object getItem(int position) {
    return contactList.get(position);
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflater = LayoutInflater.from(context);
    if (convertView == null) {
        convertView = inflater.inflate(R.layout.list_item_image, parent, false);
    }
    String imagepath = contactList.get(position).getImagePaths();
    ImageView image = (ImageView) convertView.findViewById(R.id.image1);
            TextView tv = (TextView) convertView.findViewById(R.id.text1);
            tv.setText(contactlist.get(position).getText);
    iml.displayImage(imagepath, image);
    return convertView;
}

}

inside onPostExecute()

    protected void onPostExecute(Void result) {
        super.onPostExecute(result);
        ItemImagesAdapter adapter = new ItemImagesAdapter(getAppicationContext(), contactlist);
        listViewobj.setAdapter(adapter);
    }

call this from you mainactivity. i hope you know how to set to adapter.. hope this helps you

Answer 4

One and the best method for downloading images from server is Android Query. you can download upto 5k images without any memory error.

Download Android query jar from Here and put in libs folder of your project.

AQuery aq = new AQuery(_scontext); // Android query object
ImageView _imageObject= (ImageView) itemView.findViewById(R.id.product_image); // your imageview onbject

// and using below code you can set the image in imageview.

aq.id(_imageObject).image("image url as string");