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.

Solution 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>

Solution 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.

Comments

[paolo2988]

I understand, thanks for the advice. Can you show me how can i try to implement that using RelativeLayout?

[Gene Bo]

In my case, the main take away here was to use android:layout_width="0dp" in all the column view entries. My table layout has this android:stretchColumns="*". Otherwise - I didn't need to set any other attributes .. namely layout_weight .. wasn't necessary in my case. Cool - this got me on the right track, thanks

[Fernando Torres]

what about put in textview a large text? why doesn't break words by the width assigned in the parent?