Create grid layout with evenly spaced controls

Question

I've been trying to set up a grid with black borders and evenly spacing out the controls but I just can't seem to get it. This is what I am trying to do:

I wasn't sure what to use so I tried to use a GridLayout but I just can't seem to get the layout working. This is what I have now

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<GridLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:columnCount="13"
    android:rowCount="4"
    android:id="@+id/gridLayout"
    android:background="@drawable/black_borders"
    android:layout_marginTop="2dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Customer:"
        android:id="@+id/txtCustomer"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_marginLeft="10dp"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Location:"
        android:id="@+id/txtLocation"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_marginLeft="10dp"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_row="0"
        android:layout_column="2"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Job Reference:"
        android:id="@+id/txtJobRef"
        android:layout_row="1"
        android:layout_column="9"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Date:"
        android:id="@+id/txtDate"
        android:layout_row="0"
        android:layout_column="9"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText2"
        android:layout_row="0"
        android:layout_column="11"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText3"
        android:layout_row="1"
        android:layout_column="2"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText4"
        android:layout_row="1"
        android:layout_column="11"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Customer Rep:"
        android:id="@+id/txtCustomRep"
        android:layout_below="@+id/gridLayout"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_column="0"
        android:layout_row="2"
        android:layout_marginLeft="10dp"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText5"
        android:layout_row="2"
        android:layout_column="2"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Job Supervisor:"
        android:id="@+id/textView"
        android:layout_row="2"
        android:layout_column="9"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText6"
        android:layout_row="2"
        android:layout_column="11"
        android:layout_columnSpan="2" />

</GridLayout>

Answer 1

Okay so there are a few ways to handle something like this. But before I go into this, you must understand that GridLayout indexes Begin at 0 when specifying Child Columns and Rows

For example if you specify 4 rows with 13 columns you must have

android:layout_row="0" -> android:layout_row="3" in your XML files for each new Row, if you do not have the correct Indexes you view will not be rendered correctly.

1) Best Bet - Use a RelativeLayout and take the time to position the Items relative to the other items in your view. This is the least resource intensive way, but you will have to plan on bounds of your view, especially since your using 13 columns. . .

2) TableLayout - This is a very Ugly Solution but here is what i have come up with for you to get borders and correct spacing. You may want to mess with the margins to get it exactly right. I would definitely move away from this idea though. I don't think you users will appreciate this type of experience. But an Option to get all your Views to show is to put them inside a HorizontalScrollView Widget, so the user can see everything in a line on phone devices, or smaller devices.

which makes use of the Following XML layout:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@color/color_Black"
   android:stretchColumns="*"
   android:shrinkColumns="*">

<!-- Row 1  -->
<TableRow >
    <TextView
        android:text="@string/text_Inventory_Item"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Inventory_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView android:background="@color/color_White"/>

</TableRow>

 <!-- Row 2  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Apples"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Apples"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 3  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Bananas"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Bananas"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 4  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Grapes"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Grapes"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 5  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Oranges"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Oranges"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 6  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Peaches"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Peaches"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

3) Use a GridLayout Which Looks Much Nicer but will not have your borders. Notice in the GridLayout how each row does not need to specify the margins. This is because GridLayout uses the Top Most Row, & Columns to position the rest of the elements, so if you want nice spacing you only need to add margins to the first Row of Column values. But you must use alignmentMode="alignBounds"

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:columnCount="4"
   android:rowCount="7"
   android:fitsSystemWindows="true"
   android:alignmentMode="alignBounds"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

<!-- Index starts at 0 for GridLayout when referencing the Row & Column Positions -->

<!-- Row 0 Column 0  -->
<TextView
    android:text="@string/text_Inventory_Item"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:layout_row="0"
    android:layout_column="0"
    android:layout_columnSpan="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<!-- Row 0 Column 2 -->
<TextView
    android:text="@string/text_Inventory_Count"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_row="0"
    android:layout_column="2"
    android:layout_columnSpan="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- Row 1 Column 1  -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="1"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:text="@string/text_Apples"
    android:layout_row="1"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>


<!-- Row 1 Column 2 & 3 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="1"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Apples"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_row="1"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- Row 2 Column 1 -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="2"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Bananas"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_row="2"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 2 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="2"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Bananas"
    android:layout_row="2"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<!-- Row 3 Column 1 -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="3"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Grapes"
    android:layout_row="3"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 3 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="3"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Grapes"
    android:layout_row="3"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- Row 4 Column 1 -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="4"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Oranges"
    android:layout_row="4"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 4 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="4"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Oranges"
    android:layout_row="4"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

 <!-- Row 5 Column 1 -->
 <TextView android:text="@string/text_Title_Fruit"
    android:layout_row="5"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Peaches"
    android:layout_row="5"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 5 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="5"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Peaches"
    android:layout_row="5"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />