What is the right coding about Image Loading?

Question

I'm solving my problem about Image Loader and I have some problems..

1. What I want is to show many images (about 400) in GridView(or ListView).
2. I don't want to use the Library like Picasso, Glide like that.

and Here is the problem.

3. When I call the method which convert from url to bitmap?
   3.1. before setAdapter, then pass the bitmap array.
   3.2. while getView.

4. two things are working well. but too much slow... maybe cuz of the times to call URLConnection..

Could anyone help me about these problem? How can I speed up? or are there any other solution without Open Source.

Here is my Source.

Now, 3-1.

ShowImage

private void showImages(ArrayList<String> imgUrls) {
    ArrayList<Bitmap> bitmaps = new ArrayList<>();
    for (int i = 0; i < imgUrls.size(); i++) {
        try {
            String img_path = imgUrls.get(i);
            Bitmap bitmap = new UriToBitmapAsyncTask().execute(img_path).get();
            bitmaps.add(bitmap);
        } catch (Exception e) {
            Toast.makeText(this, e.getMessage(), Toast.LENGTH_SHORT).show();
        }
    }
    CustomAdapter adapter = new CustomAdapter(getApplicationContext(),R.layout.row,bitmaps);

    gridView.setAdapter(adapter);
}

and This is the customAdapter's GetView

 public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder;

    if (convertView == null) {
        convertView = inflator.inflate(rowLayout, parent, false);

        viewHolder = new ViewHolder();
        viewHolder.imageView = (ImageView) convertView.findViewById(R.id.imageView);

        convertView.setTag(viewHolder);
    } else {
        viewHolder = (ViewHolder) convertView.getTag();
    }
    viewHolder.imageView.setImageBitmap(bitmaps.get(position));
    return convertView;
}

Answer 1

You should really take Reinventing the wheel to heart but if you really want to toture yourself an Approach could be:

1. use a ThreadPoolExecutor to fetch more images at once, you should read up how to use them
2. implement a way to cancel threads who load a img for a griditem which isn't displayed anymore
3. use two sets of data a thumbnail which loads faster for the grid view and a real image which gets loaded when the user clicks on the grid
4. dont't forget to use a LRU caching method or your device will run out of memory depending on the images

Answer 2

Don't use ArrayList to store bitmaps. Bitmaps usually take consumes a lot of memory. Try using LRUCache like this way,

public class TCImageLoader implements ComponentCallbacks2 {
private TCLruCache cache;

public TCImageLoader(Context context) {
    ActivityManager am = (ActivityManager) context.getSystemService(
        Context.ACTIVITY_SERVICE);
    int maxKb = am.getMemoryClass() * 1024;
    int limitKb = maxKb / 8; // 1/8th of total ram
    cache = new TCLruCache(limitKb);
}

public void display(String url, ImageView imageview, int defaultresource) {
    imageview.setImageResource(defaultresource);
    Bitmap image = cache.get(url);
    if (image != null) {
        imageview.setImageBitmap(image);
    }
    else {
        new SetImageTask(imageview).execute(url);
    }
}

private class TCLruCache extends LruCache<String, Bitmap> {

    public TCLruCache(int maxSize) {
        super(maxSize);
    }

    @Override
    protected int sizeOf(ImagePoolKey key, Bitmap value) {
        int kbOfBitmap = value.getByteCount() / 1024;
        return kbOfBitmap;
    }
}

private class SetImageTask extends AsyncTask<String, Void, Integer> {
    private ImageView imageview;
    private Bitmap bmp;

    public SetImageTask(ImageView imageview) {
        this.imageview = imageview;
    }

    @Override
    protected Integer doInBackground(String... params) {
        String url = params[0];
        try {
            bmp = getBitmapFromURL(url);
            if (bmp != null) {
                cache.put(url, bmp);
            }
            else {
                return 0;
            }
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
        return 1;
    }

    @Override
    protected void onPostExecute(Integer result) {
        if (result == 1) {
            imageview.setImageBitmap(bmp);
        }
        super.onPostExecute(result);
    }

    private Bitmap getBitmapFromURL(String src) {
        try {
            URL url = new URL(src);
            HttpURLConnection connection
                = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);
            return myBitmap;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }

}

@Override
public void onConfigurationChanged(Configuration newConfig) {
}

@Override
public void onLowMemory() {
}

@Override
public void onTrimMemory(int level) {
    if (level >= TRIM_MEMORY_MODERATE) {
        cache.evictAll();
    }
    else if (level >= TRIM_MEMORY_BACKGROUND) {
        cache.trimToSize(cache.size() / 2);
    }
}
}

get a instance of TCImageLoader and call display method appropriately.