How to get image URL from parameters in api and display it into Imageview

Question

I am working on a Social networking application in which I have to get user's details from the server. I am getting user's Profile image url in parameter but I am having problem in getting image and displaying it, because every time it is showing only image url in Imageview.

this is my api feed:-

{"post_id":"559",
    "userid":"11",
    "content":"\u0908\u092e\u093e\u0928\u0926\u093e\u0930\u0940 \u090f\u0915 \u092c\u094b\u0939\u094b\u0924 \u092e\u0939\u0902\u0917\u0940 \u091a\u0940\u095b \u0939\u0948.... \u0917\u093f\u0930\u0947 \u0939\u0941\u090f \u0932\u094b\u0917\u094b \u0938\u0947 \u0909\u0938\u0915\u0940 \u0909\u092e\u094d\u092e\u0940\u0926 \u0928\u0939\u0940\u0902 \u0915\u0930\u0928\u0940 \u091a\u093e\u0939\u093f\u090f..",
    "favorite_count":"1",
    "reply_count":"2",
    "repost_count":"0",
    "post_location":"",
    "created_date":"2015-05-29 12:04:28",
    "name":"devraj singh","user_image":"http:\/\/sabakuch.com\/public\/images_upload\/avatars\/ozone\/11_30_11149322_10205781000956557_74437511307260696_n.jpg",
    "post_images":null,
    "gender":"1"}

here is my adapter class where I am getting the details.

    public class OzoneAdapter extends BaseAdapter{

    ArrayList<Ozone_Beans> feedList;
    LayoutInflater inflater;
    Activity activity;

    Context context;
    ImageLoader imageloader;



    public OzoneAdapter(ArrayList<Ozone_Beans> feedList, Activity activity) {
        // TODO Auto-generated constructor stub
        super();
        this.feedList = feedList;
        this.activity = activity;
        inflater = (LayoutInflater )activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        imageloader = ImageLoader.getInstance();
        imageloader.init(ImageLoaderConfiguration.createDefault(activity));
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub  
        return feedList.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return feedList.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View vi = convertView;
        ViewHolder holder;

        if(convertView==null)
            //convertView = inflater.inflate(R.layout.ozone_item, null);

            convertView = inflater.inflate(R.layout.ozone_item, null);
        holder = new ViewHolder();

        holder.tvDate = (TextView)convertView.findViewById(R.id.ozone_name);
        holder.tvContent = (TextView)convertView.findViewById(R.id.ozone_content);
        holder.tvUser = (TextView)convertView.findViewById(R.id.ozone_date);
        holder.image_user_image = (ImageView)convertView.findViewById(R.id.ozone_user_image);
        holder.postImage = (ImageView)convertView.findViewById(R.id.ozone_post_image);



        holder.tvUser.setText(feedList.get(position).getName());
        holder.tvDate.setText(feedList.get(position).getCreated_date());
        holder.tvContent.setText(feedList.get(position).getContent());


        //imageloader.displayImage(feedList.get(position).getUser_image(), holder.image_user_image);
        //imageloader.displayImage(feedList.get(position).getUser_image(), holder.image_user_image);
        //holder.image_user_image.setImageURI(feedList.get(position).getUser_image());
    //  imageloader.displayImage(feedList.get(position).getTweet_images(), holder.postImage);

        return convertView;
    }

    public class ViewHolder {
        public ImageView image_user_image;
        public ImageView postImage;
        TextView tvContent , tvUser, tvDate;
    }

}

Answer 1

When it comes to loading images from URL's, a good approach would be to use a Library like Picasso (by square), it handles the downloading and caching pretty well, it's well documented and maintained, and the invocation is pretty easy, so it will save you time and aggro, e.g:

Picasso.with(context).
                    load(url).
                    fit().
                    transform(trans). // if you want any transformations..
                    centerCrop().
                    error(R.drawable.error_avatar). // in case of error
                    into(myImageView);

Another option is Fresco (by a facebook developer), but I have less first hand experience with that one.

Hope this Helps.

Answer 2

You could try using NetworkImageView of Volley library instead of ImageView that allows you to setImageUrl. ImageLoader associated with with it cache images downloaded for any URL and can be reused. Get more info on its image cache. You could find decent tutorial here and here. It should make your ListView images load correctly.

Answer 3

Look at this one try to implement in you code

 class Holder {
    TextView tv1, tv2, tv3;
    ImageView iv1, iv2;

    public Holder(View v) {
        tv1 = (TextView) v.findViewById(R.id.textView);
        tv2 = (TextView) v.findViewById(R.id.textView2);
        tv3 = (TextView)v.findViewById(R.id.tvCouponDeal);
        iv1 = (ImageView)v.findViewById(R.id.imageView3);
        iv2 = (ImageView)v.findViewById(R.id.imageView4);
    }
}

class MyAdapter extends ArrayAdapter<String> {
    Context context;
    private ImageLoadingListener animateFirstListener;

    public MyAdapter(Context context, int resource) {
        super(context, resource);
        this.context = context;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View dataRow = convertView;
        Holder holder = null;
        if (dataRow == null) {
            LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            dataRow = inflater.inflate(R.layout.category_items_cell, parent, false);
            holder = new Holder(dataRow);
            dataRow.setTag(holder);
        } else {
            holder = (Holder) dataRow.getTag();
        }
        holder.tv1.setText(categoryList.get(position).getMerchantName());
        holder.tv2.setText(categoryList.get(position).getVoucherOfferlogo());
        holder.tv3.setText(categoryList.get(position).getOffertype());
        if(categoryList.get(position).getIsexclusive().equals("1"))
            holder.iv2.setImageResource(R.drawable.fav_selected);
        ImageLoader.getInstance().displayImage(categoryList.get(position).getMerchantStanderedimage(), holder.iv1, options, animateFirstListener);
        return dataRow;
    }
}
private static class AnimateFirstDisplayListener extends SimpleImageLoadingListener {

    static final List<String> displayedImages = Collections.synchronizedList(new LinkedList<String>());

    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        if (loadedImage != null) {
            ImageView imageView = (ImageView) view;
            boolean firstDisplay = !displayedImages.contains(imageUri);
            if (firstDisplay) {
displayedImages.add(imageUri);
            }
        }
    }
}