How to align Buttons in a TableLayout to different directions?

Question

Hello,

probably I don't understand the layout properties of TableLayout yet. It doesn't seem to be possible to achieve such a flexible table like in HTML, because there are no cells. My target is it to achieve such a layout:

Link to draft

How can I do that? I thought about using a GridView but this doesn't seem to be useful in XML. My efforts look like this:

        <TableLayout
        android:id="@+id/tableLayout"
        android:layout_width="320sp"
        android:layout_height="fill_parent"
        android:layout_gravity="center_horizontal"
        android:gravity="bottom"
        android:layout_alignParentBottom="true">
        <TableRow
        android:background="#333333"
        android:gravity="bottom"
        android:layout_width="fill_parent">     
        <Button
            android:id="@+id/btnUp"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="left"
            android:text="Lift U"
            />
        <Button
            android:id="@+id/btnScreenUp"
            android:gravity="right"
            android:layout_gravity="right"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Scrn U"
            />
        </TableRow>
        <TableRow
          android:background="#444444"
          android:gravity="bottom"
          android:layout_gravity="right">
          <Button
            android:id="@+id/btnDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Lift D"
            />
           <Button
            android:id="@+id/btnScreenLeft"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="right"
            android:layout_gravity="right"
            android:text="Scrn L"
            />
           <Button
            android:id="@+id/btnScreenDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="right"
            android:layout_gravity="right"
            android:text="Scrn D"
            />
           <Button
            android:id="@+id/btnScreenRight"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="right"
            android:layout_gravity="right"
            android:text="Scrn R"
            />
        </TableRow>
</TableLayout>

Answer 1

Untested, but this will probably work:

    <TableLayout
    android:id="@+id/tableLayout"
    android:layout_width="320sp"
    android:layout_height="fill_parent"
    android:layout_gravity="center_horizontal"
    android:gravity="bottom"
    android:layout_alignParentBottom="true">
    <TableRow
    android:background="#333333"
    android:gravity="bottom"
    android:layout_width="fill_parent">     
    <Button
        android:id="@+id/btnUp"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:layout_span="3"
        android:text="Lift U"
        />
    <Button
        android:id="@+id/btnScreenUp"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:layout_span="2"
        android:text="Scrn U"
        />
    </TableRow>
    <TableRow
      android:background="#444444"
      android:gravity="bottom"
      android:layout_gravity="right">
      <Button
        android:id="@+id/btnDown"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:layout_span="2"
        android:text="Lift D"
        />
       <Button
        android:id="@+id/btnScreenLeft"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:text="Scrn L"
        />
       <Button
        android:id="@+id/btnScreenDown"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:text="Scrn D"
        />
       <Button
        android:id="@+id/btnScreenRight"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:text="Scrn R"
        />
    </TableRow>

Basically, I've just specified some cells to have a layout_span, which is kind of like the HTML table colspan. With that, you don't have to try and dink around with alignment and such.

Answer 2

I found the solution. There are 4 buttons in the 2nd row. With android:stretchColumns="1" I stretch the 2nd column, so the alignment is already what I want. The only problem is the button "Scrn U". It would have been stretched too. So you have to add an invisible button (which will be stretched) and this button "pushes" the button "Scrn U" to the next "column":

      <TableLayout
        android:id="@+id/tableLayout"
        android:layout_width="320sp"
        android:layout_height="fill_parent"
        android:stretchColumns="1"
        android:gravity="bottom"
        android:layout_alignParentBottom="true">
        <TableRow
        android:background="#333333"
        android:gravity="bottom">       
        <Button
            android:id="@+id/btnUp"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Lift U"
            />
        <Button
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:visibility="invisible"
        />
        <Button
            android:id="@+id/btnScreenUp"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn U"
            />
        </TableRow>
        <TableRow
          android:background="#444444"
          android:layout_gravity="right">
          <Button
            android:id="@+id/btnDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Lift D"
            />
           <Button
            android:id="@+id/btnScreenLeft"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn L"
            />
           <Button
            android:id="@+id/btnScreenDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn D"
            />
           <Button
            android:id="@+id/btnScreenRight"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn R"
            />
        </TableRow>
</TableLayout>