Android- Fixed header horizontal and vertical scrolling table

Question

I need to create a table layout where the header row will not be a part of scroll view but the whole layout should be part of horizontal scroll view. I tried various solutions. One is here And other one here . All work well. But the problem in my case is that I need everything to be dynamic. And also there are following requirements.
1) Scroll table vertically with fixed header.
2) Scroll whole view horizontally.
3) On click of each header, I need to sort the table content. i.e. all the rows should rearrange. This also works but the alignment of headers and content table all goes in vain.
Please see the links and below is my layout xml file

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

  <LinearLayout
    android:id="@+id/tabsLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="2dp"
    android:layout_marginTop="2dp"
    android:orientation="horizontal"
    android:weightSum="100" >
</LinearLayout>

<HorizontalScrollView
    android:id="@+id/contentHorizontalScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/tabsLayout"
    android:layout_marginLeft="2dp"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="20dp"
    android:layout_marginRight="2dp"

    android:fillViewport="true" >

    <com.myapp.uiutilities.ScrollingTable
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:id="@+id/leaderboardScrollingTable"
        android:orientation="vertical">

        <TableLayout
            android:id="@+id/leaderboard_header_table"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
        </TableLayout>

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

            >

            <TableLayout
                android:id="@+id/leaderboard_content_table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 >
            </TableLayout>
        </ScrollView>
    </com.myapp.uiutilities.ScrollingTable>
</HorizontalScrollView>

</RelativeLayout> 

ScrollingTable is what a custom LinearLayout in which the code is written in onLayout method to readjust the column widths of the tables. Code is as below for ScrollingTable.java.

public class ScrollingTable extends LinearLayout
{
public ScrollingTable( Context context )
{
    super( context );
}

public ScrollingTable( Context context, AttributeSet attrs )
{
    super( context, attrs );
}

@Override
protected void onLayout( boolean changed, int l, int t, int r, int b )
{   

    super.onLayout( changed, l, t, r, b );
    List<Integer> colWidths = new LinkedList<Integer>();

    TableLayout header = (TableLayout) findViewById( R.id.leaderboard_header_table );
    TableLayout body = (TableLayout) findViewById( R.id.leaderboard_content_table );
    for ( int rownum = 0; rownum < body.getChildCount(); rownum++ )
    {
        TableRow row = (TableRow) body.getChildAt( rownum );
        for ( int cellnum = 0; cellnum < row.getChildCount(); cellnum++ )
        {
            View cell = row.getChildAt( cellnum );
            Integer cellWidth = cell.getWidth();
            if ( colWidths.size() <= cellnum )
            {
                colWidths.add( cellWidth );
            }
            else
            {
                Integer current = colWidths.get( cellnum );
                if( cellWidth > current )
                {
                    colWidths.remove( cellnum );
                    colWidths.add( cellnum, cellWidth );
                }
            }
        }
    }

    for ( int rownum = 0; rownum < header.getChildCount(); rownum++ )
    {
        TableRow row = (TableRow) header.getChildAt( rownum );
        for ( int cellnum = 0; cellnum < row.getChildCount(); cellnum++ )
        {
            View cell = row.getChildAt( cellnum );
            TableRow.LayoutParams params = (TableRow.LayoutParams)cell.getLayoutParams();
            params.width = colWidths.get(cellnum);
        }
    }

}

}

Please provide me with the better solution if any one can. Thanks in Advance.

Answer 1

here the xml which satisfies 1) Scroll table vertically with fixed header. 2) Scroll whole view horizontally requirements, without any code

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rlayout_resultsfields"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fillViewport="true"
    android:measureAllChildren="false"
    android:scrollbars="vertical" >

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stretchColumns="1" >

        <TableRow
            android:id="@+id/tablerow_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent" >

            <TextView
                android:id="@+id/tview1"
                style="@style/tableheaderback_tview"
                android:text="header1" />

            <TextView
                android:id="@+id/tview2"
                style="@style/tableheadertrans_tview"
                android:text="header2" />

            <TextView
                android:id="@+id/tview3"
                style="@style/tableheaderback_tview"
                android:text="header3" />

            <TextView
                android:id="@+id/tview4"
                style="@style/tableheadertrans_tview"
                android:text="header4" />

            <TextView
                android:id="@+id/tview5"
                style="@style/tableheaderback_tview"
                android:text="header5" />

            <TextView
                android:id="@+id/tview6"
                style="@style/tableheadertrans_tview"
                android:text="header6" />

            <TextView
                android:id="@+id/tview7"
                style="@style/tableheaderback_tview"
                android:text="header7" />

            <TextView
                android:id="@+id/tview8"
                style="@style/tableheadertrans_tview"
                android:text="header8" />

            <TextView
                android:id="@+id/tview9"
                style="@style/tableheaderback_tview"
                android:text="header9" />

            <TextView
                android:id="@+id/tview10"
                style="@style/tableheadertrans_tview"
                android:text="header10" />

            <TextView
                android:id="@+id/tview11"
                style="@style/tableheaderback_tview"
                android:text="header11" />

            <TextView
                android:id="@+id/tview12"
                style="@style/tableheadertrans_tview"
                android:text="header12" />
        </TableRow>

        <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbars="vertical" >

            <TableRow
                android:id="@+id/tablerow_contents"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <TextView
                    android:id="@+id/tview11"
                    style="@style/tableheaderback_tview"
                    android:text="content1" />

                <TextView
                    android:id="@+id/tview21"
                    style="@style/tablecontenttrans_tview"
                    android:text="content2" />

                <TextView
                    android:id="@+id/tview31"
                    style="@style/tableheaderback_tview"
                    android:text="content3" />

                <TextView
                    android:id="@+id/tview41"
                    style="@style/tableheadertrans_tview"
                    android:text="content4" />

                <TextView
                    android:id="@+id/tview51"
                    style="@style/tableheaderback_tview"
                    android:text="content5" />

                <TextView
                    android:id="@+id/tview61"
                    style="@style/tableheadertrans_tview"
                    android:text="content6" />

                <TextView
                    android:id="@+id/tview71"
                    style="@style/tableheaderback_tview"
                    android:text="content7" />

                <TextView
                    android:id="@+id/tview81"
                    style="@style/tableheadertrans_tview"
                    android:text="content8" />

                <TextView
                    android:id="@+id/tview91"
                    style="@style/tableheaderback_tview"
                    android:text="content9" />

                <TextView
                    android:id="@+id/tview101"
                    style="@style/tableheadertrans_tview"
                    android:text="content10" />

                <TextView
                    android:id="@+id/tview111"
                    style="@style/tableheaderback_tview"
                    android:text="content11" />

                <TextView
                    android:id="@+id/tview121"
                    style="@style/tableheadertrans_tview"
                    android:text="content12" />
            </TableRow>
        </ScrollView>
    </TableLayout>

</HorizontalScrollView>

here the styles. add any 2 images according to your item width requirements

<style name="tableheadertrans_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:paddingTop">15dp</item>
        <item name="android:background">@drawable/dashboard_separatortrans</item>
    </style>

    <style name="tableheaderback_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:paddingTop">15dp</item>
        <item name="android:background">@drawable/dashboard_separator</item>
    </style>

    <style name="tablecontenttrans_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">@drawable/dashboard_separatortrans</item>
    </style>

    <style name="tablecontentback_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">@drawable/dashboard_separator</item>
    </style>

its too late, but i hope it helps somebody cheers!