android: merging components in 2 tablerows vertically

Question

Suppose I am having a layout xml as follows:

TableLayout

Row0: |                     textView_title (width=9)                  |

Row1: | ButtonX(width=3) |        textView_describe (width=6)         |

Row2: | ButtonY(width=3) | Button_back(width=3)| Button_start(width=3)|

Merging horizontally can use the technique of span just like in below coding. I would like to ask is it possible to merge ButtonX and ButtonY? (i.e. vertically?), if not, are there any methods to make such a layout?

Many thanks!!

Coding:

<?xml version="1.0" encoding="utf-8"?><TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*" 
    android:screenOrientation="landscape"
    android:background="@drawable/blackboard" >

    <TableRow
        android:id="@+id/tableRow0"
        android:layout_weight="0.2"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textview_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:background="@drawable/transparent_btn"
            android:gravity="center"
            android:layout_span="9"
            android:text="@string/title_number"
            android:textColor="@color/white"
            android:textSize="60dp" />                                                                       
    </TableRow>    

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_weight="0.5"
        android:gravity="center" >


        <Button
            android:id="@+id/buttonX"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_span="3"
            android:background="@drawable/transparent_btn"
            android:text=""
            android:textSize="30dp" />


        <TextView
            android:id="@+id/text_describe"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_span="6"
            android:background="@drawable/white_dot_btn"
            android:gravity="top"
            android:onClick="button_start_click"
            android:text="abc"
            android:textColor="@color/white"
            android:textSize="20dp" />

    </TableRow>



    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_weight="0.3"
        android:gravity="center" >

        <Button
            android:id="@+id/buttonY"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_span="3"
            android:background="@drawable/transparent_btn"
            android:text=""            
            android:textSize="30dp" />

        <Button
            android:id="@+id/button_back"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_span="3"
            android:background="@drawable/white_btn"
            android:text="quit"
            android:onClick="button_back_click"
            android:textSize="30dp" />

        <Button
            android:id="@+id/button_start"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_span="3"
            android:background="@drawable/green_btn"
            android:text="start"
            android:onClick="button_start_click"
            android:textSize="30dp" />

    </TableRow>    
</TableLayout>

Maybe you could add your current code? That gives us a better starting point for our answers — ndsmyter, Dec 23 '12 at 17:51

ndsmyter · Accepted Answer · 2012-12-24T10:46:34.567

I don't think it is possible to do that with a TableLayout. But you can definitely do that with a RelativeLayout

A quick conversion from your code to RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textview_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_margin="2dp"
        android:background="@drawable/transparent_btn"
        android:gravity="center"
        android:text="@string/title_number"
        android:textColor="@color/white" />

    <Button
        android:id="@+id/buttonXY"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textview_title"
        android:layout_margin="2dp"
        android:background="@drawable/transparent_btn"
        android:text="XY button" />

    <TextView
        android:id="@+id/text_description"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/buttonXY"
        android:layout_margin="2dp"
        android:layout_toRightOf="@+id/buttonXY"
        android:background="@drawable/white_dot_btn"
        android:gravity="top"
        android:onClick="button_start_click"
        android:text="abc"
        android:textColor="@color/white" />

    <Button
        android:id="@+id/button_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/text_description"
        android:layout_below="@+id/text_description"
        android:layout_margin="2dp"
        android:background="@drawable/white_btn"
        android:onClick="button_back_click"
        android:text="quit" />

    <Button
        android:id="@+id/button_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/buttonXY"
        android:layout_alignParentRight="true"
        android:layout_margin="2dp"
        android:layout_toRightOf="@+id/button_back"
        android:background="@drawable/green_btn"
        android:onClick="button_start_click"
        android:text="start" />

</RelativeLayout>

The only downside with this, is that the width cannot be that dynamic anymore. But there are probably some other tricks that can be used to solve this problem. I leave this to your own inspiration

just a further simple question as i really not yet tried used relativelayout before...can i set it such that a textview width is 50% of the total width and 30% of the screen height? — pearmak, Dec 24 '12 at 15:46
You can do that with `android:layout_weight`. But maybe this link explains it in more detail (with example): http://stackoverflow.com/questions/4961355/percentage-width-in-a-relativelayout — ndsmyter, Dec 24 '12 at 16:00

android: merging components in 2 tablerows vertically

Coding:

1 Answers1