Cannot display image correctly using custom item layout in ListView

Question

Hi

I am using a ListView to display my custom item layout, which may contain some TextViews and an ImageView.

This is the item layout I made (post_item.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="60dip"
    android:padding="5dip"
    >

    <TextView android:id="@+id/listItem_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_weight="1"
        />
    <FrameLayout android:id="@+id/listItem_frameContent"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/userStream_listItem_title"
        android:layout_weight="1"
        >
    </FrameLayout>

</RelativeLayout>

I don't put the ImageView initially in the xml layout, but I will insert it when I need to the FrameLayout programmatically (I also put another views in it when needed). So, there will be some items which has ImageView in it and which don't.

I get the image to fill the ImageView from the Internet (through URL), decode it as Bitmap, and keep it as a Bitmap variable in a class represents the custom item layout (class PostItem).

When the activity shows for the first time it looks fine, but as I scrolled through the items then a problem showed up, the items which shouldn't show any image show the image from the other item which should, although they don't have any ImageView (because I didn't insert it).

I am using SDK 1.6 and the emulator. Haven't tried it in real device because I don't have it.

Here is my code for the Adapter:

private class PostItemAdapter extends ArrayAdapter<PostItem> {
        private List<PostItem> mPostItems;

        public PostItemAdapter(Context context, int textViewResourceId, List<PostItem> postItems) {
            super(context, textViewResourceId, postItems);

            mPostItems = postItems;
        }

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

            if (view == null) {
                LayoutInflater layoutInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
                view = layoutInflater.inflate(R.layout.post_item, null);
            }

            PostItem postItem = mPostItems.get(position);
            if (postItem != null) {
                final FrameLayout contentFrame = (FrameLayout) view.findViewById(R.id.listItem_frameContent);
                final TextView titleTextView = (TextView) view.findViewById(R.id.listItem_title);

                if (titleTextView != null) {
                    titleTextView.setText(postItem.getTitle());
                }
                if (contentFrame != null) {
                    if (postItem.hasImagePreview()) {
                        final ImageView previewImageView = new ImageView(getApplicationContext());
                        previewImageView.setId(LIST_ITEM_IMAGEVIEW_ID);
                        previewImageView.setAdjustViewBounds(true);
                        previewImageView.setMaxHeight(75);
                        previewImageView.setMaxWidth(75);
                        previewImageView.setImageBitmap(postItem.getImagePreview());
                        final RelativeLayout.LayoutParams layoutParams = 
                            new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 
                                    RelativeLayout.LayoutParams.WRAP_CONTENT);
                        layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
                        layoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
                        contentFrame.addView(previewImageView, layoutParams);
                    }
                    if (postItem.hasContent()) {
                        final TextView contentTextView = new TextView(getApplicationContext());
                        contentTextView.setText(postItem.getContent());
                        final RelativeLayout.LayoutParams layoutParams = 
                            new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, 
                                    RelativeLayout.LayoutParams.WRAP_CONTENT);
                        layoutParams.addRule(RelativeLayout.BELOW, LIST_ITEM_IMAGEVIEW_ID);
                        layoutParams.addRule(RelativeLayout.ALIGN_LEFT, LIST_ITEM_IMAGEVIEW_ID);
                        layoutParams.alignWithParent = true;
                        contentFrame.addView(contentTextView, layoutParams);
                    }
                }               
            }

            return view;
        }
    }

And this is the code to prepare the items:

/* inside a method to prepare the items */
mPostItems = new ArrayList<PostItem>();
for (int i=0; i<total); i++) {
    /* operation to generate titleToDisplay and contentToDisplay */
    /* contentToDisplay might be null */
    mPostItems.add(new PostItem(
            titleToDisplay,
            contentToDisplay,
            generateImagePreview()));

}

/* another method */
private Bitmap generateImagePreview(ActivityObject object) {
        Bitmap imagePreview = null;

        if (/*some condition*/) {
                try {
                    InputStream inStream = (InputStream) (new URL("http://a1.typepad.com/6a010535617444970b0133ecc20b29970b-120si")).getContent();
                    imagePreview = Drawable.createFromStream(inStream, "linkHref");
                }
                catch (MalformedURLException ex) {
                    Log.e("INSIDE generateImagePreview()", ex.getMessage());
                }
                catch (IOException ex) {
                    Log.e("INSIDE generateImagePreview()", ex.getMessage());
                }
                catch (Exception ex) {
                    Log.e("INSIDE generateImagePreview()", ex.getMessage());
                }
        }

        return imagePreview;
}

Is this the bug in the emulator or there is some mistake in my code (probably memory problem for the Bitmap)? Please help me, I'm really stuck in this. Any help or advice will be very appreciated. Thanks in advance :)

Answer 1

Cells get reused by lists and it looks like you are only altering your contentframe image if there is an image associated with the item. This means when there is no image and you are reusing a cell, it will just show whatever was passed in in the convert view. If there is no image then you should remove all children views of contentframe.

That said, you will likely get better responses in the future by being more concise. Putting up a bunch of code and taking a while to get to the issue makes it more of a chore to read and so fewer people will.