Search code examples
androidandroid-gridview

Set Fixed GridView Row Height


I am having all sorts of issues with row heights in GridView.

I would like to set the size of the items (height/width) in XML and then just have the GridView autofit as many of them as it can with no stretching. If it can't fit the next element it should just add padding around the current number of elements it was able to fit.

Currently I get 2 columns (which to me almost seems fixed size) and the rows get stretched. Could someone please help explain what is happening and how to achieve what I want?

GridView:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/main_grid"
    android:numColumns="auto_fit"
    android:gravity="center"
    android:paddingRight="20dp"
    android:paddingLeft="20dp"
    android:clipToPadding="true"
    android:fitsSystemWindows="true"
    android:stretchMode="none"
    android:background="@drawable/main_grid_background">

</GridView>

GridItem (I want it 320x320 as I later insert a background image into it which looks odd if its not a perfect square).

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

    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="@+id/label"
        android:layout_marginTop="5dp"
        android:textColor="@color/black"
        android:textSize="15sp"
        android:visibility="invisible"
        android:layout_centerInParent="true" >
    </TextView>

</RelativeLayout>

Java:

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

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View gridView;

        if (convertView == null) {

            gridView = new View(context);

            // get layout from mobile.xml
            gridView = inflater.inflate(R.layout.main_grid_item, null);

        } else {
            gridView = (View) convertView;
        }
        TextView textView = (TextView) gridView
                .findViewById(R.id.grid_item_label);

            //SET TEXT AND BACKGROUND IMAGE HERE
            //gridView.setBackgroundResource(R.drawable.main_grid_item_import);



        return gridView;
    }

Solution

  • So, this is not a perfect answer but this is how I got it to work. Ideas borrowed from this thread.

    All of this works assuming I know my image sizes, which are 320x320. Also, in GridView I had to set android:columnWidth="320dp" or it would not work. If someone has a better idea please post it... for now I am moving on.

    Grid Item XML:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp" >
        <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
        <TextView
            android:id="@+id/grid_item_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="@+id/label"
            android:textColor="@color/black"
            android:layout_alignLeft="@+id/grid_item_image"
            android:layout_alignTop="@+id/grid_item_image"
            android:layout_alignRight="@+id/grid_item_image"
            android:layout_alignBottom="@+id/grid_item_image"
            android:gravity="center"
            android:textSize="15sp"
            android:visibility="invisible">
        </TextView>
    
    </RelativeLayout>
    

    GridView XML:

    <GridView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_grid"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:columnWidth="320dp"
        android:paddingRight="20dp"
        android:paddingLeft="20dp"
        android:clipToPadding="true"
        android:fitsSystemWindows="true"
        android:stretchMode="columnWidth"
        android:background="@drawable/main_grid_background">
    </GridView>