android gridview with contents inflated from xml has each row taking entire screen

Question

I have a Gridview in Android where each element is inflated from xml and contains a LinearLayout holding an ImageView and a TextView. The GridView uses a custom Adapter which extends BaseAdapter. What I see is that each row rather than being just high enough to hold the largest element, is as tall as the screen.

Here is the relevant code:

The gridview's xml:

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/ConSoul"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:numColumns="auto_fit"
  android:columnWidth="160dp"
  android:horizontalSpacing="20dp"
  android:verticalSpacing="0dp"
  android:gravity="center"
  android:stretchMode="columnWidth" />

The element's xml (thumbnail.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="120dp"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <ImageView
    android:id="@+id/screen"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:scaleType="fitEnd"/>
  <TextView
    android:id="@+id/name"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:textSize="20dp"
    android:textColor="@color/theme"
    android:gravity="center_horizontal"/>
</LinearLayout>

The adapter getView method (mContext is an instance variable the adapter is created from, screens is a Bitmap[] and names is a String[]):

public View getView(int position, View convertView, ViewGroup parent) {
    View thumbView;
    if (convertView == null) {  // if it's not recycled, initialize some attributes
        thumbView = LayoutInflater.from(mContext).inflate(R.layout.thumbnail, null);
    } else {
        thumbView = convertView;
    }
    ((ImageView)thumbView.findViewById(R.id.screen)).setImageBitmap(screens[position]);
    ((TextView)thumbView.findViewById(R.id.name)).setText(names[position]);
    return thumbView;
}

score 0 · Accepted Answer · answered Apr 01 '13 at 00:16

0

The layout height of "wrap_content" travels through your LinearLayout and your ImageView. The ImageView ScaleType is set to "fitEnd" which causes alignment to the right and bottom edges of dst.

This bottom alignment is causing your Grid item layout to take up as much room as possible; the entire screen height. Change to one of the other ScaleType values such as "fitStart" or "fitCenter" and your GridView should be ok.

answered Apr 01 '13 at 00:16

David Manpearl

12,362
8
55
72

Interesting. The reason I chose the fitEnd was because I want the text to be immediately below the images, and the images are wider than they are tall and if they are centered there tends to be a gap before the text. – user1203021 Apr 01 '13 at 00:18
If you want to use "fitEnd", you may have to specify height as well as width (i.e. "120dp"). – David Manpearl Apr 01 '13 at 00:23
I tried setting the linearlayout to 120dp by 80dp but it looked the same, still each row is 1 screen height high :-( – user1203021 Apr 01 '13 at 00:28
I had to set an explicit width on the linearlayout, imageview, textview, all equal to the gridview column width, as well as an explicit height for the imageview and the linearlayout, then it works. You answer pointed me in the right direction so I've marked it as correct. – user1203021 Apr 01 '13 at 10:00

android gridview with contents inflated from xml has each row taking entire screen

1 Answers1