Question

I want to make a table layout as shown in the below screen:

I am able to make this UI using the code. But I want to make it using the XML. I tried the following approach.

I tried to make a tablelayout which will have header and title. Now I have two row below title which is getting repeated.
So I made these two rows in separate XML file named row1 and row2. But Now I don’t know how to integrate these three in the code. I know there is method LayoutInflater.inflate() to do it but I have two rows with diff kind of layout. See below the code for two rows. Please suggest What approach I should follow to make this kind of UI.

ROW_1.xml:

<?xml version="1.0" encoding="utf-8"?>

<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/table_row"
android:minHeight="30dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/light_grey"
android:clickable="true"

>
    <TextView android:id="@+id/tv1"
    android:text="column1"  
    android:gravity="center"
    android:textColor="@color/black"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
 />
    <TextView android:id="@+id/tv2" 
    android:text="column2"   
    android:gravity="center"
    android:textColor="@color/black"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    />

       <TextView android:id="@+id/tv3" 
    android:text="column3"   
    android:gravity="center"
    android:textColor="@color/black"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    />  

</TableRow> 

ROW_2.xml

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/table_row"
android:minHeight="30dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/light_grey"
android:clickable="true"
>
    <TextView android:id="@+id/tv1"
    android:text="short description text for Title 0 comes here"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center"
    android:textColor="@color/black"

 /> 
</TableRow> 

Answer 1

from looking at the image i would suggest taking the list view route. have your layout as

R1Col1     R1Col2     R1Col3
R2 Looooong Col1

this should workout well for you.

UPDATE

you list_item.xml should look something like this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/wrapper"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <LinearLayout android:id="@+id/wrapper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal">

        <TextView android:id="@+id/tv1"
            android:text="column1"  
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <TextView android:id="@+id/tv2" 
            android:text="column2"   
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView android:id="@+id/tv3" 
            android:text="column3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>  
    </LinearLayout>

    <TextView android:id="@+id/tv1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="short description text for Title 0 comes here" />
</LinearLayout>

here is a sample to learn how to populate a ListView

ListView Example