Android: how to force GridView width to wrap_content?

Question

My GridView contains columns of fixed width, with fixed horizontal spacing. If there are not enough columns to fill the screen horziontally, I would like my GridView's width to wrap to its contents, and to center vertical in the screen.

However, regardless of the number of columns I use, the GridView's width grows to fill the screen. The attached image shows this, where the green GridView fills the screen horizontally, despite having only 3 columns and its width being set to "wrap_content".

public class Temp extends Activity
{
    private GridView grid;
    private int columnWidth = 80;

    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);

        View view = getLayoutInflater().inflate(R.layout.gridview, null);
        grid = (GridView) view.findViewById(R.id.grid);
        grid.setColumnWidth(columnWidth);
        grid.setAdapter(new GridAdapter());

        setContentView(view);
    }

    class GridAdapter extends BaseAdapter 
    {
        public GridAdapter() 
        {
        }

        public int getCount() 
        {
            return 3;
        }

        public Object getItem(int position) 
        {
            return null;
        }

        public long getItemId(int position) 
        {
            return position;
        }

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

            if (convertView == null) 
            {
                ret = new ImageView(Temp.this);
                ret.setLayoutParams(new GridView.LayoutParams(columnWidth, 100));
                ret.setBackgroundColor(Color.WHITE);
            }
            else
            {   
                ret= convertView;
            }

            return ret;
        }
    }
}




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#FF0000"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridView 
        android:id="@+id/grid"
        android:background="#00FF00"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:numColumns="auto_fit"
        android:verticalSpacing="2dip"
        android:horizontalSpacing="2dip"
        android:stretchMode="columnWidth"
        android:gravity="center">
    </GridView>
</RelativeLayout>

Answer 1

GridView is extremely annoying with this kind of stuff to say the least. In your case, the issue is that saying auto_fit is essentially telling GridView to always fit it horizontally unfortunately. What you could try is to center the individual ImageViews in the row. But then this requires you to change how you have it set up. Rather than have the columns auto fit, just have 1 item per row, but inflate a LinearLayout that has the orientation as horizontal. Then center the Linear Layout with the ImageViews also in it in each row. Hopefully that provides some ideas.

Answer 2

Simply add two empty views at left and right of GridView with weight = 1 and assign 0.5 weight to GridView. Eg.

<LinearLayout 
    android:layout_width="fill_parent"
    android:gravity="center"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <GridView
        android:id="@+id/myGridView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="2"
        android:scrollbars="none"
        android:verticalSpacing="10dp" >
    </GridView>

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout>