Two Elements Arranged Vertically Inside A TableRow

Question

I have a layout design implementing TableLayout of Android Here is the image of my current design shown on this link:

"Detail" and TextView below it are in different TableRow (two tableRows) I want to make "Detail" and the TextView in one TableRow only. I tried to put them inside one TableRow, but the TextView always shown on the right of the "Detail", not below it vertically.

Here is the code of that image:

<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip"
    android:background="@drawable/labeldetail_background"
    android:paddingBottom="10dip" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingRight="20dip"
        android:paddingTop="5dip"
        android:text="Detail"
        android:textColor="#000000" />
</TableRow>
<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/labeldetail_background"
    android:gravity="center_horizontal"
    android:paddingBottom="10dip"
    android:paddingLeft="15dip"
    android:paddingRight="15dip"
    android:paddingTop="10dip" >
    <TextView
        android:layout_width="285dip"
        android:layout_height="wrap_content"
        android:background="@drawable/text_background"
        android:gravity="center_horizontal"
        android:maxLines="10"
        android:padding="6dip"
        android:singleLine="false"
        android:text="Lorem Ipsum - test text for detail of the information, multiline textview" />
</TableRow>

Is it possible that two elements inside one TableRow to be arranged vertically? If yes, please tell me how

Thanks in advance

Answer 1

Inside the tablerow wrap the detail and textView in LinearLayout with orirntation as vertical.

 <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:background="@drawable/labeldetail_background"
        android:paddingBottom="10dip" >

        <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" 
         android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:paddingRight="20dip"
            android:paddingTop="5dip"
            android:text="Detail"
            android:textColor="#000000" />

        <TextView
            android:layout_width="285dip"
            android:layout_height="wrap_content"
            android:background="@drawable/text_background"
            android:gravity="center_horizontal"
            android:maxLines="10"
            android:padding="6dip"
            android:singleLine="false"
            android:text="Lorem Ipsum - test text for detail of the information, multiline textview" />
    </LinearLayout>
    </TableRow>

Answer 2

You could simply wrap your elements into a LinearLayout.

Answer 3

Try this..

<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip"
    android:gravity="center_vertical"
    android:background="@drawable/labeldetail_background"
    android:paddingBottom="10dip" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingRight="20dip"
        android:paddingTop="5dip"
        android:text="Detail"
        android:textColor="#000000" />
    <TextView
        android:layout_width="285dip"
        android:layout_height="wrap_content"
        android:background="@drawable/text_background"
        android:gravity="center_horizontal"
        android:maxLines="10"
        android:padding="6dip"
        android:singleLine="false"
        android:text="Lorem Ipsum - test text for detail of the information, multiline textview" />

</TableRow>

Answer 4

First create Linear Layout with Vertical Orientation. Add any number of views to that Linear Layout. Then later add that Linear Layout to your Table Row.