Question

I am currently implementing a GridView which is connected to a custom adapter which holds an arbitrary amount of elements.

Each of those elements is then shown in a custom ViewGroup consisting of a vertical LinearLayout with an ImageView and two TextViews. I am calculating the width of the ViewGroup based on the available screen estate and want to center it horizontally and vertically inside the grid. The problem is that the items are shown at the very left border of the screen (without any padding) and at the very right border of the screen (also without any padding). If I set a padding or margin to the entire GridView the scrollbars will be at the side of the items instead of at the border of the screen which looks awful. Thats why I don’t want to set a padding to the GridView but center the elements in it.

Here is my code for the GridView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:id="@+id/launchLayout"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">

   <LinearLayout 
      android:orientation="vertical"
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent">

      <com.markupartist.android.widget.ActionBar
          android:id="@+id/actionbar"
          style="@style/ActionBar"
        />

     <GridView
           android:id="@+id/grid"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
        android:verticalSpacing="@dimen/launch_grid_padding"
        android:horizontalSpacing="@dimen/launch_grid_padding"
           android:numColumns="auto_fit"
           android:stretchMode="columnWidth"
           android:gravity="center"
           android:listSelector="#00000000"
           android:layout_marginTop="@dimen/launch_grid_padding"
           android:layout_marginBottom="@dimen/launch_grid_padding"
     />
   </LinearLayout>

</RelativeLayout>

@dimen/launch_grid_padding has a value of 20dp.

And this is the layout for my custom ViewGroup:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/rounded_box"
    android:layout_gravity="center"
>
  <ImageView 
      android:id="@+id/img"
      android:layout_width="120dp"
      android:layout_height="84dp"
      android:scaleType="centerInside"
  />
  <TextView
       android:id="@+id/identifier1"
       android:layout_width="120dp"
       android:layout_height="wrap_content"
       android:background="@android:color/white"
       android:gravity="left|center_vertical"
       android:typeface="sans"
       android:textStyle="bold" 
       android:textColor="#333333"
       android:textSize="12dp"
       android:lines="1"
       android:ellipsize="marquee"
  />
  <TextView
       android:id="@+id/identifier2"
       android:layout_width="120dp"
       android:layout_height="wrap_content"
       android:textColor="#333333"
       android:background="@android:color/white"
       android:gravity="left|center_vertical"
       android:textSize="10dp"
       android:lines="1"
  />
</LinearLayout>

This is more or less what I am trying to accomplish (with a variable amount of items):

http://www.appdesignvault.com/wp-content/uploads/2012/04/iphone-app-design-bizapp-5.jpg

Any help would be greatly appreciated!

Answer 1

specify android:columnWidth and set android:stretchMode="spacingWidthUniform" and get rid of android:horizontalSpacing and android:verticalSpacing. I hope that will solve the problem.