Android - Aligning columns of TableLayout

Question

I am trying to display data in a horizontal and vertically scrolling table layout that has a fixed header row. The issue I am running into is that whenever I add a new TableRow to the LinearLayout inside of the ScrollView, the columns will not align to the header row columns. However, if I add the new TableRow directly below the TableRow header, the columns will align.

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ECF0F1"
android:scrollbars="none"
android:overScrollMode="never">

 <TableLayout
    android:id="@+id/table_layout"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:stretchColumns="*">

    <!-- Table Row Header -->
    <TableRow
        android:id="@+id/header_row"
        android:layout_width="fill_parent"
        android:background="@color/table_header_color">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/lap"
            android:textSize="@dimen/table_header_text_size"
            android:textColor="@color/table_header_text_color"
            android:gravity="center"
            android:layout_marginLeft="12dp"
            >
        </TextView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/time"
            android:textSize="@dimen/table_header_text_size"
            android:textColor="@color/table_header_text_color"
            android:layout_marginLeft="@dimen/row_spacing"
            android:gravity="center"
            >
        </TextView>

        <TextView
            android:id="@+id/delta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/delta"
            android:textSize="@dimen/table_header_text_size"
            android:textColor="@color/table_header_text_color"
            android:layout_marginLeft="@dimen/row_spacing"
            android:gravity="center"
            android:layout_marginRight="12dp"
            >
        </TextView>
    </TableRow>

    <!-- Table Body -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:overScrollMode="never">

        <LinearLayout
            android:id="@+id/table_body"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">



        </LinearLayout>

    </ScrollView>

 </TableLayout>
</HorizontalScrollView>

Screenshot of unaligned text

Screenshot of aligned text

Answer 1

You cannot do this type of thing with TableLayout as it does no expose the mechanics how it adjust sizes, it's all package private stuff.

Luckily I'm soon to open source and release the first alpha version of a Table based layout that has fixed Row and Column Headers with multi direction "scroll" and zoom.
Still lots more to do on it and the Big missing item is nothing is clickable in it yet.

Update

Released at https://github.com/Zardozz/FixedHeaderTableLayout

A short animation of it in action