Aligning TextViews in a TableRow

Question

I am trying to align 3 text views in a tablerow like this:

|------------------------------------------------|
| {TextView1} {TextView2}            {TextView3} |
|------------------------------------------------|

// TextView 1, 2 Left aligned
// TextView 3 Right aligned

Also, the table row should fill the table width.

With the code below I can only achieve this:

|------------------------------------------------|
| {TextView1} {TextView2} {TextView3}            |
|------------------------------------------------|

I code:

TableRow tr = new TableRow(myActivity.this);

TextView tvLeft = new TextView(myActivity.this);
tvLeft.setText(values[0]);

TextView tvCenter = new TextView(myActivity.this);
tvCenter.setText(values[1]);

TextView tvRight = new TextView(myActivity.this);
tvRight.setText(values[2]);
tvRight.setGravity(Gravity.RIGHT);

tr.addView(tvLeft);
tr.addView(tvCenter);
tr.addView(tvRight);

myTable.addView(tr);

The right text view is not gravitating to the right, AND the table row does not fill the table width. Do I need to use weights on the text views?

Edit: Added TableLayout:

<TableLayout 
android:layout_height="wrap_content"
android:id="@+id/myTable" 
android:layout_width="fill_parent" 
>
</TableLayout>

Overshine

I think its better to use a relative layout here – Judiejudith

@Labeeb can you please elaborate. – Overshine

I just tried your original code, and it works fine for me. What does the code for your actual TableLayout look like? – Cardiograph

Answer 1

Second Shot

I'm not sure whether you're creating the TableLayout programmatically or in XML or what the properties are, but it sounds like you want to

(in Java)

myTable.setColumnStretchable(2, true);

(in XML)

android:stretchColumns="2"

Cardiograph

Would putting the TextViews in a RelativeLayout within the TableRow, and using relative alignment be a better solution? – Overshine

In this case, I don't feel that it matters much--whatever you're more comfortable with. If you were formatting a LinearLayout in place of the TableRow, I would suggest making the whole thing a RelativeLayout to prevent the unnecessary nesting, but you can't really get around it in this case. – Cardiograph

Using a LinearLayout with params FILL_PARENT, causes the right TextView to disappear. Same thing happens if I use params WRAP_CONTENT. – Overshine

K, CRAZY idea: Can I fill the TableLayout with RelativeLayouts instead of TableRows? – Overshine

Are you putting the TextView inside the LinearLayout? The code I posted above should work, although I haven't tested it. – Cardiograph

Great! Your latest edit worked. A not if anyone is going to use this solution, you have to set the padding to the TextViews within the TableRow and not the TableRow itself. If you add left, and/or right padding to the TableRow it will push the right TextView a bit off screen. – Overshine

On a related note, do you know how I can ellipsize the center TextView such that if is too long it will not push the right TextView off screen? Hopefully, you don't need to manually set the TextView width. – Overshine

For that, you'll want to do almost the same as in the edited answer, but set column 1 to "shrinkable" (essentially replace "stretchable" with "shrinkable" and "2" with "1"). From there, you can setMaxLines(1) / setEllipsize(TextUtils.TruncateAt.MIDDLE) / etc. and play with it until it looks the way you want. – Cardiograph

I set set column 1 (base 0) to "shrinkable" and "stretchable" and it seems to be what I'm looking for. Seems like I need a few more commands to show ellipses however. Thanks again. – Overshine

Answer 2

I think Relative layout is better. Try this

    RelativeLayout tr = new RelativeLayout(myActivity.this);

    TextView tvLeft = new TextView(myActivity.this);
    tvLeft.setText(values[0]);

    TextView tvCenter = new TextView(myActivity.this);
    tvCenter.setText(values[1]);

    TextView tvRight = new TextView(myActivity.this);
    tvRight.setText(values[2]);

    tr.addView(tvLeft); 

    RelativeLayout.LayoutParams relativeLayoutParamsCenter = new RelativeLayout.LayoutParams(
            RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    relativeLayoutParamsCenter.addRule(RelativeLayout.RIGHT_OF, tvLeft.getId());
    tr.addView(tvCenter,relativeLayoutParamsCenter);

    RelativeLayout.LayoutParams relativeLayoutParamsRight = new RelativeLayout.LayoutParams(
            RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);        
    relativeLayoutParamsRight.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);      
    tr.addView(tvRight,relativeLayoutParamsRight);

    myTable.addView(tr);

Judiejudith

I am planning to add many of these RelativeLayout "rows" to my table. Do you need to specify for each row that it is below the last one? – Overshine