Alex Rivera | Logout

Lazy Load images on Listview in android(Beginner Level)?

Asked 2010-05-26T10:26:09.707
55

Possible Duplicate:
Android - How do I do a lazy load of images in ListView

I am working on the listview with the custom adapter. I want to load the images and text view on it. The images are load from the internet urls. I just want to show the images which are visible list item to hte user. I refered the Shelves opensource project example from romainguy, but its to complicated to understand the code. For a beginner level, I just want to know how to handle the tag between the adapter and activity. From the commonsware example I can set the tag on adapter, but can't show the corresponding image at the idle state of the listview. Please help me with your ideas. Sample codes are more understandable.

Thanks.

EDIT:

The combination of Efficient and Slow Adapter in ApiDemos is more helpful to understand.

changes done on efficient adapter example like this:

public class List14 extends ListActivity implements ListView.OnScrollListener {
// private TextView mStatus;

private static boolean mBusy = false;
static ViewHolder holder;

public static class EfficientAdapter extends BaseAdapter {
    private LayoutInflater mInflater;
    private Bitmap mIcon1;
    priva
android listview android-lazyadapter android-lazyloading
Edit
Report

2 Answers

11

Praveen -

As you already found my blog post on this, I just wanted to push it back to Stackoverflow so that others can use it.

Here's the basic discussion: http://ballardhack.wordpress.com/2010/04/05/loading-remote-images-in-a-listview-on-android/

And there's a class I documented later that uses a thread and a callback to load the images:

http://ballardhack.wordpress.com/2010/04/10/loading-images-over-http-on-a-separate-thread-on-android/

Update: To address your specific exception, I think that view returned in the list from getChildAt is not an ImageView -- it's whatever layout view you are using to hold the image and text.

Update to include relevant code: (Per @george-stocker's recommendation)

Here is the adapter I was using:

public class MediaItemAdapter extends ArrayAdapter<MediaItem> {
  private final static String TAG = "MediaItemAdapter";
  private int resourceId = 0;
  private LayoutInflater inflater;
  private Context context;

  private ImageThreadLoader imageLoader = new ImageThreadLoader();

  public MediaItemAdapter(Context context, int resourceId, List<MediaItem> mediaItems) {
    super(context, 0, mediaItems);
    this.resourceId = resourceId;
    inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    this.context = context;
  }

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

    View view;
    TextView textTitle;
    TextView textTimer;
    final ImageView image;

    view = inflater.inflate(resourceId, parent, false);

    try {
      textTitle = (TextView)view.findViewById(R.id
answered 2010-05-27T17:04:29.677
8

As far as I understand you need to update your list after scrolling is finished. That's easy. Here's the fixed code for you:

EfficientAdapter adapter;

@Override
public void onCreate(Bundle savedInstanceState) {
    mIcon1 = BitmapFactory.decodeResource(this.getResources(),
            R.drawable.icon48x48_1);
    mIcon2 = BitmapFactory.decodeResource(this.getResources(),
            R.drawable.icon48x48_2);
    super.onCreate(savedInstanceState);
    adapter=new EfficientAdapter(this);
    setListAdapter(adapter);
    getListView().setOnScrollListener(this);
}

public void onScroll(AbsListView view, int firstVisibleItem,
    int visibleItemCount, int totalItemCount) {
}

public void onScrollStateChanged(AbsListView view, int scrollState) {
    switch (scrollState) {
    case OnScrollListener.SCROLL_STATE_IDLE:
        mBusy = false;
        adapter.notifyDataSetChanged() 
        break;
    case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
        mBusy = true;
        // mStatus.setText("Touch scroll");
        break;
    case OnScrollListener.SCROLL_STATE_FLING:
        mBusy = true;
        // mStatus.setText("Fling");
        break;
    }
}

notifyDataSetChanged will tell the adapter to re-display all visible items, so they'll be displayed with image2.

answered 2010-05-31T15:57:04.320

Your Answer