GridView row height not behaving correctly

Question

I am using a GridView that shows a linearlayout with a background image plus a text, just like this example:

http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/

And just like that very example, I am using that code to make the images have round corners.

The problem is, if I don't use the round corner thingy, all my grid items are the same height, no matter what text they have inside, even though all my images are of the same size.

But if I use it, the items height is wrapped to the content.

I tried defining my linear layout to wrap_content, fill_parent, match_parent and even fixed heights, but the system just ignores me.

This is my grid layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFDDDDDD"
    android:orientation="vertical"
    tools:context=".RouteListActivity" >

    <GridView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/gridview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_margin="20dp"
        android:layout_weight="2"
        android:animateLayoutChanges="false"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:drawSelectorOnTop="true"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="2"
        android:scrollingCache="false"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp" />

</LinearLayout>

And this is my grid item:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearlayoutGridLabel"
    android:layout_width="wrap_content"
    android:layout_height="150dp"
    android:layout_weight="1"
    android:gravity="bottom|left"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/id_ruta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:visibility="gone" />

    <TextView
        android:id="@+id/routenameGridLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="#77000000"
        android:gravity="bottom"
        android:padding="5dp"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Plus my getView in the Adapter:

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

        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.grid_item, null);

        LinearLayout linLayout = (LinearLayout) vi.findViewById(R.id.linearlayoutGridLabel);
        Typeface yanone = Typeface.createFromAsset(mContext.getAssets(), "YanoneKaffeesatz-Regular.ttf");
        TextView id_ruta = (TextView) vi.findViewById(R.id.id_ruta);
        TextView nombre=(TextView)vi.findViewById(R.id.routenameGridLabel);
        nombre.setTypeface(yanone);
        nombre.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 38);
        Ruta current = routeList.get(position);
        try {
//          Drawable d;
//          d = Drawable.createFromStream(mContext.getAssets().open("ruta" + (position+1) + "/title.jpg"), null);
            Bitmap b = BitmapFactory.decodeStream(mContext.getAssets().open("ruta" + (position+1) + "/title.jpg"));
            StreamDrawable d = new StreamDrawable(b, 10, 0);
            linLayout.setBackgroundDrawable(d);
        } catch (IOException e) {
            linLayout.setBackgroundResource(R.drawable.noimage);
        }
        nombre.setText("" + current.getNombre());
        id_ruta.setText(current.getId().toString());

        return vi;
    }

Frankly, I don't understand gridviews behavior. Previously I had different sizes images set as background images, and all elements overlapped each other. I couldn not get to make rows of the same size even when fixing height on the grid item' layout.

Can I get some directions here, please?

Answer 1

I finally solved it, turns out the problem was in that I was using

vi = inflater.inflate(R.layout.grid_item, null);

instead of

vi = inflater.inflate(R.layout.grid_item, parent, false);

so layout parameters were being ignored.

Anyway, getting GridView to evenly distribute space is a pain in the ass. I think I will be switching to TableView.

Answer 2

You can use setLayoutParams for setting the layout height:

vi.setLayoutParams(new GridView.LayoutParams(<width_in_pixels>, <height_in_pixels>));

You need to pass the width and height in pixels. So, you might want to convert 150dp into pixels.