TableLayout Cell Positioning

Question

I've been trying to arrange my cells in my table row below such that the second cell's value (a Button with a background image) is right up next to the right of the text from the first cell. The below currently stretches the image in cell 2 and looks like this .

Any ideas on how to stop the stretching and position the button image in the far left of cell 2?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">
    <TableLayout 
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content" 
        android:stretchColumns="1"
        android:layout_marginLeft="5dp" 
        android:layout_marginRight="5dp">
        <TableRow>
        <TextView 
            android:id="@+id/timeMainLabel" 
            android:layout_weight="1"
            android:textSize="14sp"
            android:layout_column="0" 
            android:padding="1dip" 
            android:text="cell one texxxxxxxxt"/>
        <Button
            android:id="@+id/pdm_tooltip_btn1"
            android:layout_column="1" 
            android:background="@drawable/tooltip_btn" />
        <TextView 
            android:layout_column="2" 
            android:id="@+id/timeLabel"
            android:textSize="14sp" 
            android:text="cell 3"
            android:gravity="right" 
            android:padding="1dip" 
            android:visibility="visible" 
            android:layout_weight="1"/>
    </TableRow>
    <TableRow>
        <TextView 
            android:id="@+id/timeMainLabel" 
            android:layout_weight="1"
            android:textSize="14sp"
            android:layout_column="0" 
            android:padding="1dip" 
            android:text="cell one text"/>
        <Button
            android:id="@+id/pdm_tooltip_btn1"
            android:layout_column="1" 
            android:background="@drawable/tooltip_btn" />
        <TextView 
            android:layout_column="2" 
            android:id="@+id/timeLabel"
            android:textSize="14sp" 
            android:text="cell 3"
            android:gravity="right" 
            android:padding="1dip" 
            android:visibility="visible" 
            android:layout_weight="1"/>
    </TableRow>
    </TableLayout>
</LinearLayout>

Updated Image: enter image description here

ScarletAmaranth · Accepted Answer · 2012-05-25T23:39:56.030

5

It's gonna require some fiddling around. Basically, you will have to add some empty column after column 1 (that would be the second column since they are zero indexed).

So you will have:

<TableRow>
   <TextView layout_column="0">

   <Button layout_column="1">

   <TextView layout_column="2"> // DUMMY!

   <TextView layout_column="3">
</TableRow>

Now you can fiddle with weight if you fancy and set it up accordingly.

The third column (column 2) will fill the space between the two elements so have it stretch if needed.

edited May 25 '12 at 23:39

answered May 25 '12 at 23:33

ScarletAmaranth

5,065
2
23
34

thanks for the response. I put in a dummy textview with a certain width to push over the image column, but I'm unable to get it right next to the text for the "messages sent" column (see updated image). It looks like that cell stretches to the length of the longest text. Is there any way to move the image inside the messages sent cell? – c12 May 29 '12 at 19:03
If they are all in a separate TableRow element, the one will not effect the width of the other's cells. This behavior is otherways unexplainable since one row doesn't influence the columns of the other row in any way. – ScarletAmaranth May 29 '12 at 19:06
I suggest you edit this question so I can edit this answer so it can be relevant for whoever tries googling the same thing. Your question probably makes sense to me only :-) Or just toss up a new question or something. – ScarletAmaranth May 29 '12 at 19:13
I'm seeing the width of one cell effect other elements in that same column and added an example. I don't really have a solution yet to the question I originally asked. Using the dummy spacer column didn't get me all the way there. – c12 May 29 '12 at 19:19
@c12 What happens when you disable stretch_columns in the TableLayout elements ? I have never seen different rows influencing each others columns. – ScarletAmaranth May 29 '12 at 19:20
that didn't make a difference. I don't know what is creating the width of the "Message Sent" cell. When I look in the graphically layout it shows what I uploaded in my last image. You can see the highlighted width... – c12 May 29 '12 at 19:34
The only way I could get this to work as desired was to have a separate TableLayout for each row. – c12 May 30 '12 at 16:11

TableLayout Cell Positioning

1 Answers1

Linked