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.

enter image description here

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.

I don't think TableLayout is good for what you're doing. Just use RelativeLayout and LinearLayout. — ashishduh, May 21 '14 at 15:02
If your requirements permit it, and you don't *have to* have the label to the left of the input field - it looks like using `TextInputLayout` would be another way to solve for this kind of uniform input-layout, adhering to best practices [design/widget/TextInputLayout](https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html) — Gene Bo, Dec 11 '17 at 03:33

score 20 · Accepted Answer · answered May 21 '14 at 15:04

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>

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 — Gene Bo, Nov 29 '16 at 21:47
what about put in textview a large text? why doesn't break words by the width assigned in the parent? — Fernando Torres, Oct 17 '19 at 00:11

score 1 · Answer 2 · answered May 21 '14 at 15:02

1

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.

answered May 21 '14 at 15:02

i41

311
2
9

1

I understand, thanks for the advice. Can you show me how can i try to implement that using RelativeLayout? – paolo2988 May 21 '14 at 15:21

score 0 · Answer 3 · edited May 23 '17 at 12:17

Although canDroid, could be sufficient to some of us, it didn't worked for me, I tried all kind of tricks to make the TableLayout to work. I found LinearLayout much easier to use, here is an example of TableLayout "like" layout using LinearLayout, few cells with a thumbnail, and few without.

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="94dp"
            android:layout_margin="5dp"
            android:text="@string/nut1" />
    </LinearLayout>

    <View
        android:layout_width="395dp"
        android:layout_height="2dp"
        android:background="@color/colorPrimary"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="0dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp">

        <ImageView
            android:layout_width="94dp"
            android:layout_height="94dp"
            android:adjustViewBounds="false"
            android:background="@drawable/one"
            android:contentDescription="@string/nut3"
            android:cropToPadding="false"
            android:saveEnabled="false"
            android:scaleType="center" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="94dp"
            android:layout_margin="10dp"
            android:text="@string/nut3" />
    </LinearLayout>
</LinearLayout>

Android TableLayout With Different Column's Width In A Row

3 Answers3