Table layout in android -Row sizing

Question

I have a table layout as shown.I have a lot of rows. I have used android:strechcolumns="1" to strech the second column of each row.This is the case everywhere.

But in the fifth row I have 2 fields.I want them to occupy equal space.The row size should be same as that of the previous row.I want the overall size of the rows to remain the same as that on the screeshot.Also I have indicated in the screenshot the boundary within which all rows should lie .

How can this be done?

<TableRow>
    <TextView
        android:gravity="right"
        android:paddingTop="10dip"
        />
    <Spinner
    android:id="@+id/depot_name_spinner"/>
</TableRow>

<TableRow>
    <TextView 
     android:text="@string/product_name"
     android:paddingTop="10dip"
     android:gravity="right"/>
    <Spinner
    android:id="@+id/product_name_spinner"
     />
</TableRow>

<TableRow>
    <TextView
        android:text="@string/date"
        android:gravity="right" />
    <Button
    android:id="@+id/date_button" />
</TableRow>

<TableRow>
    <TextView 
        android:text="@string/measure_ltr"
        android:gravity="right"

        />
    <EditText
    android:id="@+id/ltr_text" 
    android:layout_width="50dip"/>
     <TextView 
        android:text="@string/measure_qts"
        android:gravity="right"
     />
      <EditText

    android:id="@+id/qts_text"
     />  
</TableRow>

Thanks

Answer 1

Try using android:weight. This will divide the remaining space once the layout is laid out in which ever way you want. I mean you can define the proportion of space which each of your view should use. Look into this example below.

<TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
    <TableRow>

    <LinearLayout android:layout_width="fill_parent" android:orientation="horizontal"
                    android:layout_height="wrap_content" android:weightSum="100">     // Mention Weightsum as 100 so that its easy to split among your views.

        <TextView android:id="@+id/row1Label" 
            android:layout_width="0dip" android:layout_weight="60"      // This will occupy 60% of the remaining space
            android:layout_height="wrap_content">
        </TextView>

        <TextView android:id="@+id/row1Label" 
            android:layout_width="0dip" android:layout_weight="40"      // This will occupy 40% of the remaining space
            android:layout_height="wrap_content">
        </TextView>

    </LinearLayout>

    </TableRow>

    <TableRow>

    <LinearLayout android:layout_width="fill_parent" android:orientation="horizontal"
                    android:layout_height="wrap_content" android:weightSum="100">

        <TextView android:id="@+id/row2Label" 
            android:layout_width="0dip" android:layout_weight="60"      // This will occupy 60% of the remaining space
            android:layout_height="wrap_content">
        </TextView>

        <TextView android:id="@+id/row3Label" 
            android:layout_width="0dip" android:layout_weight="40"      // This will occupy 40% of the remaining space
            android:layout_height="wrap_content">
        </TextView>


        // You can more views and distribute the space accordingly....

    </LinearLayout>

    </TableRow>

...........

With this you can achieve something like this

You can split the Table row area in whichever way you want. This can done using only Linear Layout as other layouts don't have this options of weights. I have used this methodology extensively to create complex views. Hope it helps you.

Answer 2

You can add not only TableRow to the table. Just use a simple LinearLayout and put all raw content into it. I think it must solve your problem.

EDIT: Also, you can add the LinearLayout with all widgets to a TableRow and set LinearLayout's android:layout_span=2:

<TableRow>
    <LinearLayout
        android:layout_span="2">
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/measure_ltr"
            android:gravity="right"/>
        <EditText
            android:id="@+id/ltr_text" 
            android:layout_width="50dip"
            android:layout_height="wrap_content"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/measure_qts"
            android:gravity="right"/>
        <EditText  
            android:id="@+id/qts_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</TableRow>

I haven't tried it, but hope it will work.