Android TableLayout Width

Question

I have a two column TableLayout as the only child of a scroll view. The first column contains TextViews ('labels') and the second column contains EditText/Spinner/DateWidget etc ('values'). Even though I have have specified android:layout_width="fill_parent" for TableLayout, TableRow & all widgets (in 'values' column).

The screen looks perfect when the activity is created. However, when one types a really long value in the EditText, the 'values' column goes beyond the visible screen area.

How do I tackle this?

Rhodonite

Answer 1

You may want to define the sizes of the columns by using a weight. So you will define the table layout height to fill parent but for each column you should set the width to "0px" and the weight to the percentage you want the column to span. So assuming you want the first column to be 30% of the screen width you set it's weight to "0.3" and the second column to "0.7".

Try it and see if that works.

Margretmargreta

This was the only thing that finally did it for me. Just a note as well that if you have shrinkColumns or stretchColumns set on TableLayout then that can have an adverse affect on everything. – Upsilon

This answer isn't clear to me, you mean setting the weights on all the children of all the TableRow groups? If so what is the point of using a TableLayout at all? Why Not just use LinearLayouts? I suggest setting both stretch and shrink on the column that is giving you trouble. – Indicant

Answer 2

The pragmatic way to solve this is to use the stretchColumns and shrinkColumns attributes in TableLayout. Their values should be 0-based indexes of columns.

For example, if you have a two column Table layout and:

• You would like the second column to fill up with empty space (stretch) so the TableLayout fits the entire parent view on a large screen device
• You would like the first column to be shrunk (and its contents possibly wrapped / ellipsized) on a small screen device

you would define your TableLayout as:

<TableLayout
    android:id="@+id/my_table_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="1"
    android:shrinkColumns="0" >
</TableLayout>

Televise

Also note that you can both stretch and shrink a column. Doing that on my TextView column prevents it from going beyond the screen size but also allows it to fill up the available space. – Indicant

Answer 3

This worked for me..

tableLayout.setColumnShrinkable(1,true);

Composed

Awesome! first param is the column, and second to set it shrinkable! Thanx! – Daven

good, this work for me too. I use you setColumnShrinkable and setColumnStretchable for play with table behavior. – Honor

Answer 4

<TableLayout 
android:layout_height="fill_parent" 
android:layout_width="fill_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp">
<TableRow 
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView 
android:layout_width="wrap_content"
android:text="Name " 
android:layout_height="fill_parent">
</TextView>
<EditText 
android:layout_width="0dp"
android:layout_weight="1"
android:hint="name"
android:layout_height="wrap_content" 
>
</EditText>
</TableRow>
</TableLayout>

This code worked for me to align text view on first column and edit text fill parent.

Siracusa

This approach helps a lot when your cells need different sizes from row to row – Murray

Answer 5

Try this, make sure android:singleLine="false" and android:inputType="textMultiLine":

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:stretchColumns="1">
    <TableRow android:layout_height="wrap_content"
        android:layout_width="fill_parent">

        <TextView android:text="Label:" />
        <EditText android:id="@+id/entry" android:inputType="textMultiLine"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:singleLine="false" />
    </TableRow>
</TableLayout>

Cysteine

Answer 6

I had similar problem with EditText on Android 2.2. In my case adding android:maxWidth="0sp" property helped. Now EditText field is displayed as I wanted - so it is still of the same size as other EditText fields, but additionaly it is not resized when long text is entered.

Here is my EditText definition:

<EditText android:id="@+id/extra_edit"
       android:padding="3dip"
       android:inputType="textImeMultiLine"
       android:maxWidth="0sp"
       android:layout_width="fill_parent"
       />

Shipboard

The hint and value in the EditText get distorted -- I can see only the first letter. Any work arounds? – Rhodonite

Note even though this is old: if you are using a 0 value, consider just using 0px. sp means that Android will apply a scaling value to it, and 0 * anything = 0 – Anastasio

Answer 7

It works for me, hope this helps to you as well

Iam looping 3 times so 3 rows will add,added picture below

    TableRow tr = new TableRow(getActivity());
    tr.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT,2));
    tr.setGravity(Gravity.CENTER_VERTICAL);

    TextView labelText = new TextView(getActivity());

    labelText.setText(key + " ");
    labelText.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT,0.7f));
    labelText.setGravity(Gravity.LEFT);
    labelText.setTextSize(8);
    labelText.setPadding(5, 0, 5, 0);
    tr.addView(labelText);

    View seperatorView = new View(getActivity());
    seperatorView.setLayoutParams(new TableRow.LayoutParams(2, TableRow.LayoutParams.MATCH_PARENT));
    seperatorView.setBackgroundColor(getResources().getColor(R.color.radio_border_color));
    tr.addView(seperatorView);

    TextView valueText = new TextView(getActivity());
    valueText.setText(value);
    valueText.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT, 1.3f));
    valueText.setGravity(Gravity.LEFT);
   
    valueText.setTextSize(8);
    
    valueText.setMinLines(1);
    valueText.setMaxLines(Integer.MAX_VALUE);
    valueText.setPadding(5, 0, 5, 0);
    tr.addView(valueText);

    barcodeTableLayout.addView(tr);
   

Burgas