Question

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:

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

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>