GridView - sometimes rows are top-aligned, sometimes they're bottom-aligned!

Question

I am using a GridView. Four items in a column. Each element is composed of the following layout:

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

  <ImageView
    android:layout_width="32dip"
    android:layout_height="32dip"/>

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="11dip"
    android:paddingTop="2dip" />
</LinearLayout>

So each element is a small image with a bit of text below it. The layout works great on the first pass. However, if an item's text is long, it wraps to two lines. This works ok, until you scroll it in and out of view. By default, all the images in a row are top-aligned. When you scroll a row off-screen, then back on screen, you'll see that the row somehow gets bottom-aligned. It looks like:

First layout:

[image]   [image]   [image]  
[text]    [text]    [text
                     wrap]

so even though the third element has 2 lines of text, the tops are aligned which is perfect. If I scroll this row off screen, then back on, it looks like this:

                    [image]
[image]   [image]   [text
[text]    [text]     wrap]

so the row gets bottom-aligned here. I'm not sure if this is a bug in GridView, or if there's some way to control the layout to always top-align rows. I've tried setting the gravity of the element layout to "top", no good. There also doesn't appear to be any setting unique to GridView to control this. Any ideas?

Thanks

Answer 1

The height of the items in the GridView must be the same. You have 2 or 3 options.

1. Give a height to the TextView
2. Make the TextView single line with android:singleLine="true"
3. If you must have 2 lines in some of the items, make all the items have 2 lines. You can do that android:minLines="2"

Answer 2

Some devices doesnt work good with style.

    grid.setColumnWidth(90);
    grid.setNumColumns(GridView.AUTO_FIT);
    grid.setVerticalSpacing(10);
    grid.setHorizontalSpacing(10);
    grid.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
    grid.setGravity(Gravity.CENTER);
    grid.setOnItemClickListener(this);

<style name="GridViewStyle" parent="@android:style/Widget.GridView">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:columnWidth">90dp</item>
        <item name="android:numColumns">auto_fit</item>
        <item name="android:verticalSpacing">10dp</item>
        <item name="android:horizontalSpacing">10dp</item>
        <item name="android:stretchMode">columnWidth</item>
        <item name="android:gravity">center</item>
    </style>

// look how my adapter return textview
// I have som troubles with order you just have to refresh adapter (onResume or orientation change)

public View getView(final int position, View convertView, ViewGroup parent) {
        if (convertView!=null) return convertView;

        Intent intent = (Intent) getItem(position);
        TextView tv = new TextView(mContext);
        tv.setGravity(Gravity.CENTER_HORIZONTAL);
        tv.setText(intent.getStringExtra("text"));

        try {
            tv.setCompoundDrawablesWithIntrinsicBounds(null, mContext.getPackageManager().getActivityIcon(intent), null, null);
        } catch (NameNotFoundException e) {
            tv.setCompoundDrawablesWithIntrinsicBounds(0, android.R.drawable.ic_secure, 0, 0);
        }

        return tv;
    }

Answer 3

If you are using a getview method, you can set its height/width dynamically, you do not need to take all the elements of same size. It will automatically crop the image from its center dynamically.

 @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); //it will crop the image from center
        imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
        return imageView;
    }

Also set the number of colums you want in your xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="2"          // set the number of coloums
    android:columnWidth="90dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center"
    android:stretchMode="columnWidth" >  
</GridView>

Answer 4

Try android:layout_gravity="top" in your LinearLayout.

Also, if you are manually inflating your layouts for the cells, be sure to use the inflate() version that takes the GridView as the 2nd parameter and use false for the third parameter.