Android what is the canonical way of creating a layout for tabular data?

Question

I'm trying to design a layout for a table that looks like this:

The columns are fixed, and the rows can be dynamically added/removed.

So I tried using TableLayout to design the "skeleton" of my table.

<ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TableLayout
                android:id="@+id/tblSales"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="10dp"
                android:shrinkColumns="*"
                android:stretchColumns="*">
            <TableRow
                android:id="@+id/tblSalesCol"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:text="Inventory Info"
                    android:textSize="20sp"
                    android:layout_width="120dp"
                    />
                <TextView
                    android:text="Sold Price"
                    android:textSize="20sp"
                    android:layout_width="40dp"
                    />
                <TextView
                    android:text="Sold Qty"
                    android:textSize="20sp"
                    android:layout_width="5dp"
                    />

            </TableRow>
            <View style="@style/Divider"/>

            </TableLayout>
        </ScrollView>

And tried designing a custom tablerow layout for the dynamically added rows

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">
            <TextView
                android:id="@+id/tblrowSales_inv_name"
                android:textStyle="bold"
                android:textSize="15sp"
                android:textColor="#000000"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_height="30dp"
                android:layout_width="200dp"/>
            <TextView
                android:id="@+id/tblrowSales_detail"
                android:textStyle="bold"
                android:textColor="#000000"
                android:layout_height="20dp"
                android:layout_width="200dp"
                android:layout_below="@id/tblrowSales_inv_name"
                />
            <TextView
                android:id="@+id/tblrowSales_sold_price"
                android:textStyle="normal"
                android:textColor="#000000"
                android:layout_height="50dp"
                android:layout_width="100dp"
                android:layout_toRightOf="@id/tblrowSales_detail"/>
            <TextView
                android:id="@+id/tblrowSales_sold_qty"
                android:textStyle="normal"
                android:textColor="#000000"
                android:layout_height="50dp"
                android:layout_width="50dp"
                android:layout_toRightOf="@id/tblrowSales_sold_price"/>
    </RelativeLayout>
</TableRow>

And the major problem is that using relativelayout, I cannot proportionally set the widths of my fields (Since layout_weight is only supported on linearlayout).

I also don't think the widths of the fields for the rows will be in sync with the column widths defined in TableLayout.

All in all, this approach just feels dirty and very wrong.

What's the proper way of creating a table shown in the example?

Answer 1

The simple way to create table as you want is to use GridLayout . In this manner, columns width is adapted to content and header and rows have same columns width.

For instance:

<ScrollView 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" >

    <GridLayout
        android:id="@+id/tblSales"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:columnCount="3"
        android:padding="10dp" >

        <TextView
            android:text="Inventory Info"
            android:textSize="20sp" />

        <TextView
            android:text="Sold Price"
            android:textSize="20sp" />

        <TextView
            android:text="Sold Qty"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tblrowSales_inv_name"
            android:layout_width="200dp"
            android:layout_height="30dp"
            android:text="BackPAck"
            android:textColor="#000000"
            android:textSize="15sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tblrowSales_sold_price"
            android:layout_gravity="center"
            android:layout_rowSpan="2"
            android:text="33.50$"
            android:textColor="#000000"
            android:textStyle="normal" />

        <TextView
            android:id="@+id/tblrowSales_sold_qty"
            android:layout_gravity="center"
            android:layout_rowSpan="2"
            android:text="1"
            android:textColor="#000000"
            android:textStyle="normal" />

        <TextView
            android:id="@+id/tblrowSales_detail"
            android:layout_width="200dp"
            android:layout_height="20dp"
            android:text="Sales Regular"
            android:textColor="#000000"
            android:textStyle="bold" />
    </GridLayout>

</ScrollView>

Answer 2

Have you tried adding the rows programmatically, instead of loading the xml? This is just an idea, but you can make the titles in the xml and then in your onCreate add the TextViews with the LayoutParams you want.