Using Async task for gridview image loading

Question

Ive been searching for a solution for hours now, hoping someone can help?

Ive got a swipe tab pages ui and each page has a gridview that loads images, works as expected but its very slow, even on a high end device. Can i set image resources using Async task? My adapter for my gridview is below:

public class PcAdapter extends BaseAdapter {
    private Context context;
    private Integer[] imageIds = {
            R.drawable.pcserioussam, R.drawable.pc_trinetwo,
            R.drawable.pc_leftfordead, R.drawable.pc_dungeondefenders,
            R.drawable.pc_portaltwo, R.drawable.pc_spaz,
            R.drawable.pc_laracroftattoo, R.drawable.pc_goatsim,
            R.drawable.pc_deadblock
    };

    public PcAdapter(Context c) {
        context = c;
    }

    public int getCount() {
        return imageIds.length;
    }

    public Object getItem(int position) {
        return imageIds[position];
    }

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

    public View getView(int position, View view, ViewGroup parent) {
        ImageView iview;
        if (view == null) {
            iview = new ImageView(context);
            iview.setLayoutParams(new GridView.LayoutParams(230,300));
//            iview.setScaleType(ImageView.ScaleType.FIT_CENTER);
            iview.setPadding(5, 5, 5, 5);
        } else {
            iview = (ImageView) view;
        }
        iview.setImageResource(imageIds[position]);
        return iview;
    }
}

score 2 · Answer 1 · edited May 23 '17 at 11:43

Your problem arises because of these several thing:

you are using async task with asyncTask.execute that is run one async task at a time so I recommend you this link: Running multiple AsyncTasks at the same time -- not possible?
you are using viewpager and if your gridview is inside fragment viewpager when loads your current tab page also loads two tabs beside it to make user experience well when clicking other tabs and not wait to view inflated and so on ... so you must call async task inside tab select not inside page select and cancel it on onTabOnselected (you can not make viewpager to set.limitOffScreenPage(0); that wont work and the 0 is ignored. I highly recommend you use libraries to download images because this task requires lot of tips and tricks to have a smooth user experience and by itself it is an another project(do not reinvent wheel, if others invents for you)
you are decoding images on UI thread and decoding one at a time
your internet connection is slow
your image sizes are large

hope help you !

score 2 · Accepted Answer · answered Aug 04 '14 at 02:00

@mmlooloo's answer is totally relevant and I totally agree with him.

In complement, and to give a pist of solution, I would suggest you to use the library Picasso which is really easy to use and really powerful. In your Adapter you can load your Images into the ImageView like this:

// Trigger the download of the URL asynchronously into the image view.
Picasso.with(context)
.load(url) // url of your image
.placeholder(R.drawable.placeholder) // drawable to display while downloading the image
.error(R.drawable.error) // drawable in case of failure
.into(imageView); // ImageView where you want to load the picture.

Picasso will take care of the caching and memory issues for you. To learn more about Picasso and start using it, take a look here.

Thanks Arnaud! mmlooloos answer was very insightful but Picasso is awesome! Converted my code to use picasso and everything is butter smooth :) thanks again, sorry i didnt have enough rep to vote both answers up. — mikeyy109, Aug 04 '14 at 08:35
for new folks (me), if the following code causes error (like it did for me): 'Picasso.with(context)' it can be replaced by 'Picasso.with(imageView.getContext())' (thank you Arnaud) — tmr, Mar 11 '15 at 00:35

Using Async task for gridview image loading

2 Answers2