Android TableLayout With Different Column's Width In A Row

Question

I am trying to do my first complex GUI, but now i can't to solve this problem.

The first column of the first two rows only needs to contain the label, while the second column of the first two rows must occupy the remaining space.

In this snapshot the problem that i noticed is that the first column is larger than i would like.

This is the piece of code that implements that piece of layout.

...
...

<TableLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_margin="5dp"
        android:background="@drawable/linear_layout_background"
        android:stretchColumns="*"
        android:shrinkColumns="*">

       <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp" >

        <TextView
            android:id="@+id/textViewPlateValueLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/plateValue"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/productID"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/back"
            android:ems="5"
            android:text="@string/blank"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        </TableRow>

       <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp" >

           <TextView
            android:id="@+id/ztlLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ztl"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/ztlShow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/back"
            android:text="@string/blank"
            android:textAppearance="?android:attr/textAppearanceLarge" />

       </TableRow>

       <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center" >

           <TextView
            android:id="@+id/isAllowed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/blank"
            android:background="@drawable/back"
            android:textAppearance="?android:attr/textAppearanceLarge" />

            </TableRow>

   </TableLayout>
   ...
   ...

In addition, since they are really impractical, I would like to ask you some advice on the best approaches to use than this.

Answer 1

You can try using layout_weight like this:

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="horizontal"
    tools:context=".MainActivity" >

   <TableLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_margin="5dp"
        android:background="#ff00ff"
        android:stretchColumns="*"
        android:shrinkColumns="*">

       <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" >

        <TextView
            android:id="@+id/textViewPlateValueLabel"
            android:layout_weight="3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Label1:"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/productID"
            android:layout_weight="7"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#00ff00"
            android:ems="5"
            android:text="Some Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        </TableRow>

       <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" >

           <TextView
            android:layout_weight="3"
            android:id="@+id/ztlLabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Label2:"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:layout_weight="7"
            android:id="@+id/ztlShow"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#00ff00"
            android:text="Some Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

       </TableRow>

       <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center" >

           <TextView
            android:id="@+id/isAllowed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Some Text"
            android:background="#0088ff"
            android:textAppearance="?android:attr/textAppearanceLarge" />

            </TableRow>

   </TableLayout>

</LinearLayout>

Answer 2

I wouldn't use TableLayout, if I were you. I'd probably use LinearLayout or RelativeLayout. You can get the same effect with some of the XML attributes. This is akin to using HTML's table attribute vs. using divs to simulate tables.

So, instead of a table, you can have LinearLayout inside of LinearLayout to simulate a table.