Thumbnail does not fill_parent as expected

Question

I'm attempting to get my thumbnail (userVideoThumbImageView) to extend to the edge of the screen but it does not seem to do so. I have the width set to fill_parent so I'm not sure why it isn't doing so:

Screenshot:

http://www.flickr.com/photos/110503723@N07/11207214295

list_item_user_video.xml:

   <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_vertical"
    android:orientation="vertical" >

    <com.blundell.tut.ui.widget.UrlImageView
        android:id="@+id/userVideoThumbImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:contentDescription="YouTube video thumbnail"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/userVideoTitleTextView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:text="Video Title Not Found" />

</LinearLayout>

activity_main.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="fill_parent"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <com.blundell.tut.ui.widget.VideosListView
        android:id="@+id/videosListView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="70dip"
        android:layout_alignParentBottom="true" >

        <HorizontalScrollView
            android:id="@+id/groupScrollView"
            android:layout_width="fill_parent"
            android:layout_height="match_parent" >
        </HorizontalScrollView>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:src="@drawable/scroll_lt_arrow" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@drawable/scroll_rt_arrow" />

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RelativeLayout>

</RelativeLayout>

JAVA:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // If convertView wasn't null it means we have already set it to our list_item_user_video so no need to do it again
    if(convertView == null){
        // This is the layout we are using for each row in our list
        // anything you declare in this layout can then be referenced below
           convertView = mInflater.inflate(R.layout.list_item_user_video, parent, false); resolved the issue! 
    }
    // We are using a custom imageview so that we can load images using urls
    // For further explanation see: http://blog.blundell-apps.com/imageview-with-loading-spinner/
    UrlImageView thumb = (UrlImageView) convertView.findViewById(R.id.userVideoThumbImageView);

    TextView title = (TextView) convertView.findViewById(R.id.userVideoTitleTextView); 
    // Get a single video from our list
    final Video video = videos.get(position);
    // Set the image for the list item
    thumb.setImageDrawable(video.getThumbUrl());
    // Set the title for the list item
    title.setText(video.getTitle());

    return convertView;
}

Answer 1

I think the image is now displayed at 100%. If you want to stretch it to the full width, add the following line to the urlImageView xml:

android:scaleType="fitCenter"

CenterInside does the following: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

Check the documentation for more info on scaling.

Answer 2

In your getView method, you either need to manually apply LayoutParams to the inflated view, or else use inflate(myResource, parent, false) instead of inflate(myResource, null) to prevent your xml layout params from being overwritten. In your case, myResource is R.layout.list_item_user_video.

Then you can use

if (convertView==null)
    convertView = 
        mInflater.inflate(R.layout.list_item_user_video, parent, false);

EDIT:

OK, it looks like ImageViews cannot in XML be automatically scaled to fit a certain width without distortion: https://stackoverflow.com/a/13925725/506796

Therefore, you must scale them after inflating the view. First you need to know the aspect ratio of the image (width/height). Since you seem to have a constant aspect ratio, you could just make this a static final float variable which will be much easier.

Then you need to know how wide the listview is in pixels. Again, you're in luck since your listview fills the width of the screen. (This is easier, because it would be tricky to measure the listview's width--you would have to do it after layout completes its first pass.) You can get the screen width in the adapter constructor with

screenWidth = ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getWidth()

You can also create a single set of layout params to apply to all of your image views. In your adapter constructor:

LinearLayout.LayoutParams imageParams = new LayoutParams(screenWidth, (int)(screenWidth/aspectRaio));

You can apply these params to the image view in getView.