Loading images in a gridView from server android

Question

I am trying to show a lot of images from my server. There is no conventional link since i am using AMazon s3 services. Here is my code to download the images. Since i need to reduce image size, is this better way of achiving smooth scroll or do i need to do something else

    public class PinsListAdapter extends BaseAdapter
{
    private Activity mContext;
    private ArrayList<PingModel> pings = new ArrayList<PingModel>();
    private LayoutInflater inflater;

    public PinsListAdapter(Activity context, ArrayList<PingModel> pings)
    {
        super();
        this.mContext = context;
        this.pings = pings;
        inflater = (LayoutInflater) this.mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

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

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

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

    private static class ViewHolder
    {
        public ImageView vidImgIndicator;
        public ImageView pinImg;
        public ImageView progress;
    }

    @Override
    public View getView(int position, View convertView, final ViewGroup parent)
    {
        final PingModel ping = pings.get(position);
        ViewHolder holder = null;

        if (convertView == null)
        {
            holder = new ViewHolder();
            convertView = inflater.inflate(R.layout.adapter_pin_row, parent, false);

            holder.pinImg    = (ImageView) convertView.findViewById(R.id.pinImg);
            holder.progress  = (ImageView) convertView.findViewById(R.id.progress);

            holder.vidImgIndicator  = (ImageView) convertView.findViewById(R.id.vidImgIndicator);

            Animation anim = AnimationUtils.loadAnimation(mContext, R.anim.rotating_img);
            holder.progress.setAnimation(anim);

            convertView.setTag(holder);
        }
        else
        {
            holder = (ViewHolder) convertView.getTag();
        }

        final ViewHolder mainHolder = holder;

        holder.vidImgIndicator.setVisibility(View.GONE);

        final String url = ping.getLocalMediaUrl(mContext);
        if (url != null) /* Image is already placed */
        {
            if (ping.mediaAttachmentType == PingModel.PING_MEDIA_ATTACHMENT_TYPE_PHOTO)
            {
                if(ping.thumbnail == null)
                {
                    ping.thumbnail = ImageUtils.getBitmapFromFile(url, 80);
                }
            }
            else if (ping.mediaAttachmentType == PingModel.PING_MEDIA_ATTACHMENT_TYPE_VIDEO)
            {
                if(ping.thumbnail == null)
                {
                    //ping.thumbnail = ThumbnailUtils.createVideoThumbnail(url, MediaStore.Images.Thumbnails.MINI_KIND );
                }
                if (ping.thumbnail != null)
                    mainHolder.vidImgIndicator.setVisibility(View.VISIBLE);
            }

            mainHolder.pinImg.setImageBitmap(ping.thumbnail);
        }
        else
        {
            holder.pinImg.setImageDrawable(null);
            if (ping.isMediaBeingDownloaded == false)
            {
                AppManager.getInstance().executor.execute(new Runnable()
                {
                    public void run()
                    {
                        ping.isMediaBeingDownloaded = true;
                        ApiManager.getInstance().pingManager.downloadMediaOfPingFromServer(ping);
                        ping.isMediaBeingDownloaded = false;
                        if (ping.mediaAttachmentType == PingModel.PING_MEDIA_ATTACHMENT_TYPE_PHOTO)
                        {
                            ping.thumbnail = ImageUtils.getBitmapFromFile(url, 80);
                        }
                        else if (ping.mediaAttachmentType == PingModel.PING_MEDIA_ATTACHMENT_TYPE_VIDEO)
                        {
                            ping.thumbnail = ThumbnailUtils.createVideoThumbnail(url, MediaStore.Images.Thumbnails.MINI_KIND);
                        }

                        mContext.runOnUiThread(new Runnable()
                        {
                            @Override
                            public void run()
                            {
                                notifyDataSetChanged();
                            }
                        });
                    }
                });
            }
        }

        return convertView;
    }
}

Please note the executers. Is this correct and logical way of doing it or am i doing it totally wrong and i need to make any other cache type thing?

Answer 1

You must always load images on a background thread even the thumbnails, unless they are already in memory.

You can use Picasso and implement your own RequestHandler which downloads the image from S3, it will give you more performance and flexibility.

Answer 2

image downloading, caching, storing in a scrolling list is a very very complex situation that I advise nobody to do themselves.

Instead you should do what most apps do, use a 3rd party library specialised for the job I'll point you to 3 of the current "best" ones, pick which ever you prefer.

• Picasso - https://github.com/square/picasso
• Glide - https://github.com/bumptech/glide
• Fresco - https://github.com/facebook/fresco