Listview changing size of (reused) views

Question

I am all for reusing views in listview. I always set visibility, contents, witdth etc. of all controls again in getView Unfortunately it seems ListView fails to recalculate height.

Picture one shows the initial item showed:

Picture two shows how item one is rendered after we scrolled away and back into it

The background linearlayout height (the black area) made me think that in picture two, Android is reusing a view that just showed a much heigher item (e.g. the second item). But why does it not recalibrate/reset/recalclulate itself (it is in "wrap_content" mode in its XML) when reused as view for the first item which content (text + image) is not as heigh?

In truth I am not sure what is happening. The problem only manifests itself if I have image in the view. I have tried organize the bitmap/image loading in different ways (sample code underneath) with different things commented out, but that does not seem to make much difference. I am really at a loss here as to the reason.

override_listitem_news.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip"
 android:background="@android:color/black"        
        >                           
        <TextView
                android:id="@+id/listitem_news_label"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:textSize="22sp"
                android:padding="5dip"
                android:text="@string/newsItemTitle"/>           
        <TextView
                android:id="@+id/listitem_news_date"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textStyle="italic"
                android:textSize="15sp"
                android:padding="5dip"
                android:text="@string/newsItemDate"/>                   
        <TextView
                android:id="@+id/listitem_news_content"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textStyle="normal"
                android:textSize="15sp"
                android:padding="5dip"
                android:autoLink="web"
                android:text="@string/newsItemDesc"                    
android:background="@android:color/darker_gray"                
                />                    
<ImageView
        android:id="@+id/listitem_news_icon"
        android:layout_width="match_parent"                                   
        android:layout_height="wrap_content"                        
    />        
</LinearLayout>

Here is code where I load image in getView

                        ViewTreeObserver vto = image.getViewTreeObserver();
                        vto.addOnGlobalLayoutListener(
                          new OnGlobalLayoutListener() {
                            @Override
                            public void onGlobalLayout() {
                              image.getViewTreeObserver().removeGlobalOnLayoutListener(this);                                                                 
                              image.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                              SharedCode.sharedUtilScaleImage_Width(image);                                      
                            }
                          }                        
                        );                                                                   

                        image.setTag(data.image_file_name + data.image_file_url);
                        Bitmap bit = null;
                        bit = SharedCode.sharedGetFileFromOffline(thisActivityContext, "news", data.image_file_name, MyGetKindOfFile.ImageAsBitmap).bitmap;

                        if (bit != null) {                                                                       
                          image.setImageBitmap(bit);                                                                                                                                                      
                          image.setVisibility(View.VISIBLE);                                  
                        }
                        else {
                          image.setImageBitmap(null);                                  
                          image.setVisibility(View.GONE);
                        }
                       image.setPadding(0, 0, 0, 0);                                                                                                               
                       image.setBackgroundColor(data.backgroundColorInt);                                

Answer 1

For what it is worth, problem appeared to be related to the imageview. Just for reference, I will write here how I solved it.

1. In getView I fixed the imageview width to screen width (instead of "wrap-content" and/or parent view width - earlier code used OnGlobalLayoutListener for parent width)
2. I switched over to using SetDrawable instead of SetImageBitmap. It is odd, but this difference was actual very important in solving the odd space around the imageview after scrolling an item/row in/out of view.

My research did also indicate that others had problems using wrap_content in listview for cases similar to mine, but I was not able to find anyone who had experienced exact same problems as me.