Remove excess whitespace at bottom of ListView item

Question

I've been having some troubles with excess whitespace at the bottom of ListView items. Example with white/negative space marked with red arrows at https://i.sstatic.net/wpm7a.png

Here's my layout XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.thereversecookbook.ResultsList" >

    <ListView
        android:id="@+id/results_list_lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >
    </ListView>

</RelativeLayout>

And my list item XML:

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

    <!-- cooking time -->

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:clickable="false"
        android:longClickable="false"
        android:paddingBottom="50dp"
        android:textColor="#CC0033"
        android:textSize="16sp" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_centerVertical="true"
        android:clickable="false"
        android:longClickable="false"
        android:maxHeight="50dp"
        android:maxWidth="50dp"
        android:src="@drawable/ic_clock" />

    <TextView
        android:id="@+id/desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:layout_centerVertical="true"
        android:clickable="false"
        android:longClickable="false"
        android:textColor="#3399FF"
        android:textSize="14sp" />

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:clickable="false"
        android:isIndicator="true"
        android:longClickable="false" 
        android:scaleX="0.5"
        android:scaleY="0.5"/>

</RelativeLayout>

And CustomListAdapter:

public class CustomListViewAdapter extends ArrayAdapter<RowItem> {

    Context context;

    public CustomListViewAdapter(Context context, int resourceId, List<RowItem> items) {
        super(context, resourceId, items);
        this.context = context;
    }

    /*private view holder class*/
    private class ViewHolder {
        ImageView imageView;
        TextView txtTitle;
        TextView txtCookingTime;
        RatingBar ratingBar;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        RowItem rowItem = getItem(position);

        LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.list_item, null);
            holder = new ViewHolder();
            holder.txtCookingTime = (TextView) convertView.findViewById(R.id.desc);
            holder.txtTitle = (TextView) convertView.findViewById(R.id.title);
            holder.imageView = (ImageView) convertView.findViewById(R.id.icon);
            holder.ratingBar = (RatingBar) convertView.findViewById(R.id.ratingBar1);
            convertView.setTag(holder);
        } else 
            holder = (ViewHolder) convertView.getTag();

        holder.txtCookingTime.setText(rowItem.getCookingTime());
        holder.txtTitle.setText(rowItem.getTitle());
        //holder.imageView.setImageResource(rowItem.getImageId());
        holder.ratingBar.setRating(rowItem.getRating());
        holder.ratingBar.setStepSize((float)0.5);

        return convertView;
    }
}

Anyone have any ideas what could be causing this? Many thanks!

Answer 1

convertView = mInflater.inflate(R.layout.list_item, null);

Bzzzt. Don't use that inflate() method. You want to use the three-parameter version, passing in your convertView ("the inflated widgets will eventually be a child of this...") and false ("...but don't make them be children of it right away"):

convertView = mInflater.inflate(R.layout.list_item, parent, false);

That's particularly important in your case, as RelativeLayout gets weird if it's the root container of your layout file and you don't use this version of the inflate() method.

You can read more about this in Dave Smith's "Layout Inflation as Intended" blog post.