How to load images into GridView within ListView?

Question

In the ListView adapter:

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

        final ViewHolder holder;
        final DataEntity data = dataList.get(position);

        if (convertView == null) {
            holder = new ViewHolder();
            convertView = inflater.inflate(R.layout.item_list_asset_receivable, null);
            holder.amountTV = (TextView) convertView.findViewById(R.id.tv_asset_liability_fill_accounts_receivable_amount);
            holder.gridView = (CustomGridView) convertView.findViewById(R.id.cgv_images);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.amountTV.setText(String.valueOf(data.getAmount()));

        final String id = data.getPicGroupId();

        OkHttpUtilsHelper.getImagesByGroupId(data.getPicGroupId(), TAG)
                .execute(new ImageGroup.MyCallback() {
                    @Override
                    public void onResult(List<String> images) {
                        CustomGridViewAdapter adapter = new CustomGridViewAdapter(context, images);
                        holder.gridView.setAdapter(adapter);
                    }
                });

        return convertView;
    }
}

In the GridView Adapter, I use glide to load internet images to ImageView:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder;
    if (convertView == null) {
        viewHolder = new ViewHolder();
        convertView = inflater.inflate(R.layout.item_gridview_pics, null);
        viewHolder.imageView = (ImageView) convertView.findViewById(R.id.iv_pic);
        convertView.setTag(viewHolder);
    } else {
        viewHolder = (ViewHolder) convertView.getTag();
    }

    String imgPath = (String) dataList.get(position);
    if (imgPath.startsWith("http")) {
        Glide.with(context)
                    .load(imgPath)
                    .centerCrop()
                    .placeholder(R.mipmap.ic_launcher)
                    .crossFade()
                    .into(viewHolder.imageView);
    } else {
        viewHolder.imageView.setImageBitmap(BitmapFactory.decodeFile(imgPath));
    }

    return convertView;
}

I've solved the problem that ListView with GridView issue like: Add a GridView to a ListView in Android

While according to the log, it seems the gridview adapter's getView() would trigger the listview adapter's getView() backwards, then calls gridview adapter's getview again, a deed loop!

Any suggestions are welcome!

Thanks, but I have already used glide, it's not a how to load images asynchronously problem, we should focus on how to use gridview within listview rightly. — Jiezhi.G, Jul 13 '16 at 11:19

score 0 · Answer 1 · answered Jul 13 '16 at 08:00

You can use Picasso Library

Sample Code:

Picasso.with(mContext) //
            .load(TextUtils.isEmpty(mList.get(position).getImage_url()) ? null : mList.get(position).getImage_url())
            //.load("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRp81DX-2x8DAJCmMCQKdYX3Hs1F-OGqhX_eYQnkbxtaX1dMrMNo8QMCY0")
            .tag(mContext) //
            .into(holder.imageViewDocumentIcon);

score 0 · Answer 2 · answered Jul 13 '16 at 08:03

0

You can Use following Libraries,

this may helps you.

answered Jul 13 '16 at 08:03

Sathish Kumar J

4,280
1
20
48

score 0 · Answer 3 · answered Jul 13 '16 at 08:50

0

Better use Aquery

aq.id(R.id.simpleLoadImg).image("http://programmerguru.com/android-tutorial/wp-content/uploads/2014/01/asynctask_thumb.png",false,false);

answered Jul 13 '16 at 08:50

Aditya Vyas-Lakhan

13,409
16
61
96

score 0 · Answer 4 · answered Jul 13 '16 at 11:13

This question didn't mean to get the solution of how to load images asynchronously, the key point is when the listview inner view--gridview loaded images from internet the view changed and the listview would call getView() method again which would be a dead loop.

I found that you can't do asynchronous job in getView() method, this method can't load the callback result or the result would trigger getView() again.

So, I moved this asynchronous job outside of getView():

  OkHttpUtilsHelper.getImagesByGroupId(data.getPicGroupId(), TAG)
            .execute(new ImageGroup.MyCallback() { 
                @Override 
                public void onResult(List<String> images) {
                    CustomGridViewAdapter adapter = new CustomGridViewAdapter(context, images);
                    holder.gridView.setAdapter(adapter);
                } 
            });

I just got the result and passed it to the listview adapter, and the problem solved!

How to load images into GridView within ListView?

4 Answers4