Home » Android » What is the equivalent of "colspan" in an Android TableLayout?

What is the equivalent of "colspan" in an Android TableLayout?

Posted by: admin March 11, 2020 Leave a comment

Questions:

I’m using a TableLayout in Android. Right now I have one TableRow with two items in it, and, below that, a TableRow with one item it it. It renders like this:

-----------------------------
|   Cell 1    |  Cell 2     |
-----------------------------
|   Cell 3    |
---------------

What I want to do is make Cell 3 stretch across both upper cells, so it looks like this:

-----------------------------
|   Cell 1    |  Cell 2     |
-----------------------------
|           Cell 3          |
-----------------------------

In HTML I’d use a COLSPAN…. how do I make this work in Android?

How to&Answers:

It seems that there is an attribute doing that :
layout_span

UPDATE:
This attribute must be applied to the children of the TableRow. NOT to the TableRow itself.

Answer:

Just to complete the answer, the layout_span attribute must be added to the child, not to TableRow.

This snippet shows the third row of my tableLayout, which spans for 2 columns.

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="@string/create" />
    </TableRow>
</TableLayout>

Answer:

And this is how you do it programmatically

//theChild in this case is the child of TableRow
TableRow.LayoutParams params = (TableRow.LayoutParams) theChild.getLayoutParams();
params.span = 2; //amount of columns you will span
theChild.setLayoutParams(params);

Answer:

You have to use layout_weight to fill the entire row otherwise it still fills left or right column of table layout.

<TableRow
  android:id="@+id/tableRow1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_weight="1"
            android:text="ClickMe" />

    </TableRow>

Answer:

Maybe this will help someone. I tried the solution with layout_span but this not working for me. So I solved the problem with this trick. Just use LinearLayout in place of TableRow where you need colspan, that’s all.

Answer:

use android:layout_span in child element of TableRow element

Answer:

I’ve had some problem with rowspan, in case of TableRow, Textview and so on, generated with code. Even if Onimush answer seems to be good, it don’t works with generated UI.

Here is a piece of code which…. don’t work:

            TableRow the_ligne_unidade = new TableRow(this);
            the_ligne_unidade.setBackgroundColor(the_grey);

            TextView my_unidade = new TextView(this);
            my_unidade.setText(tsap_unidade_nom);
            my_unidade.setTextSize(20);
            my_unidade.setTypeface(null, Typeface.BOLD);
            my_unidade.setVisibility(View.VISIBLE);

            TableRow.LayoutParams the_param;
            the_param = (TableRow.LayoutParams)my_unidade.getLayoutParams();
            the_param.span = 3;
            my_unidade.setLayoutParams(the_param);

            // Put the TextView in the TableRow
            the_ligne_unidade.addView(my_unidade);

The code seems to be OK but, when you reach the init of “the_params” it returns NULL.

On the other end, this code works like a charm:

            TableRow the_ligne_unidade = new TableRow(this);
            the_ligne_unidade.setBackgroundColor(the_grey);

            TextView my_unidade = new TextView(this);
            my_unidade.setText(tsap_unidade_nom);
            my_unidade.setTextSize(20);
            my_unidade.setTypeface(null, Typeface.BOLD);
            my_unidade.setVisibility(View.VISIBLE);

            // Put the TextView in the TableRow
            the_ligne_unidade.addView(my_unidade);

            // And now, we change the SPAN
            TableRow.LayoutParams the_param;
            the_param = (TableRow.LayoutParams)my_unidade.getLayoutParams();
            the_param.span = 3;
            my_unidade.setLayoutParams(the_param);

The only difference is that I push the Textview inside the TableRow before setting the span. And in this case, it works.
Hope this will help someone!

Answer:

I think you need to wrap a layout around another one.
Have one Layout list vertically, inside have another one (or in this case, two) list horizontally.

I’m still finding it hard to nicely split interface to 50-50 portion in Android.