Scrollable rows with fixed static header using TableLayout in android

Question

I am working on an android application where I want to display the data into TableLayout from database. In this TableLayout, the column headers are fixed in vertical scrolling but should be scrollable in horizontal scrolling.

I have done this so far.

table.xml

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

<HorizontalScrollView
    android:id="@+id/horizontalView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dip"
    android:scrollbars="horizontal|vertical" >

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TableLayout
            android:id="@+id/tableLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@color/white"
            android:showDividers="middle"
            android:stretchColumns="*" >
        </TableLayout>

        <ScrollView
            android:id="@+id/layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="5dip"
            android:fillViewport="true"
            android:scrollbarStyle="outsideInset"
            android:scrollbars="horizontal|vertical" >

            <TableLayout
                android:id="@+id/tableLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@color/white"
                android:showDividers="middle"
               android:stretchColumns="*" >
            </TableLayout>
        </ScrollView>
    </LinearLayout>
</HorizontalScrollView>
</LinearLayout>

Activity table.java

private void BuildTable() {

    DbHelper = new DBhelper(this);
    DbHelper.open();
    Cursor c = DbHelper.getDetails();

    int rows = c.getCount();
    int cols = c.getColumnCount();

    // Headers
    row = new TableRow(this);
    row.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
            LayoutParams.WRAP_CONTENT));
    TextView serialNo = new TextView(this);
    serialNo.setBackgroundResource(R.drawable.valuecellborder);
    serialNo.setTextColor(Color.parseColor("#FFFFFF"));
    serialNo.setLayoutParams(new TableRow.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    serialNo.setGravity(Gravity.CENTER);
    serialNo.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
    serialNo.setTextSize(20);
    serialNo.setPadding(15, 15, 15, 20);
    serialNo.setText("S.No.");
    row.addView(serialNo);

    TextView custName = new TextView(this);
    custName.setBackgroundResource(R.drawable.valuecellborder);
    custName.setTextColor(Color.parseColor("#FFFFFF"));
    custName.setLayoutParams(new TableRow.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    custName.setGravity(Gravity.CENTER);
    custName.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
    custName.setTextSize(20);
    custName.setPadding(15, 15, 15, 20);
    custName.setText("Customer");
    row.addView(custName);


    TextView Address = new TextView(this);
    Address.setBackgroundResource(R.drawable.valuecellborder);
    Address.setTextColor(Color.parseColor("#FFFFFF"));
    Address.setLayoutParams(new TableRow.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    Address.setGravity(Gravity.CENTER);
    Address.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
    Address.setTextSize(20);
    Address.setPadding(15, 15, 15, 20);
    Address.setText("Address");
    row.addView(Address);


    TextView FatherName = new TextView(this);
    FatherName.setBackgroundResource(R.drawable.valuecellborder);
    FatherName.setTextColor(Color.parseColor("#FFFFFF"));
    FatherName.setLayoutParams(new TableRow.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    FatherName.setGravity(Gravity.CENTER);
    FatherName.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
    FatherName.setTextSize(20);
    FatherName.setPadding(15, 15, 15, 20);
    FatherName.setText("Fathers Name");
    row.addView(FatherName);

    TextView openingDate = new TextView(this);
    openingDate.setBackgroundResource(R.drawable.valuecellborder);
    openingDate.setTextColor(Color.parseColor("#FFFFFF"));
    openingDate.setLayoutParams(new TableRow.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    openingDate.setGravity(Gravity.CENTER);
    openingDate.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
    openingDate.setTextSize(20);
    openingDate.setPadding(15, 15, 15, 20);
    openingDate.setText("Opening Date");
    row.addView(openingDate);

    TextView interestRate = new TextView(this);
    interestRate.setBackgroundResource(R.drawable.valuecellborder);
    interestRate.setTextColor(Color.parseColor("#FFFFFF"));
    interestRate.setLayoutParams(new TableRow.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    interestRate.setGravity(Gravity.CENTER);
    interestRate.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
    interestRate.setTextSize(20);
    interestRate.setPadding(15, 15, 15, 20);
    interestRate.setText("Interest Rate");
    row.addView(interestRate);
    table_layout.addView(row);

    if (rows == 0) {
        Common.showToast(TableActivity.this, "Data Not Found !",
                "long");
    } else {

        for (int i = 0; i < rows; i++) {

            row = new TableRow(this);
             row.setLayoutParams(new
             LayoutParams(LayoutParams.MATCH_PARENT,
             LayoutParams.WRAP_CONTENT));

            // inner for loop
            for (int j = 0; j < cols; j++) {

                TextView tv = new TextView(this);
                tv.setBackgroundResource(R.drawable.valuecellborder);
                tv.setTextColor(Color.parseColor("#FFFFFF"));
                tv.setLayoutParams(new TableRow.LayoutParams(
                        LayoutParams.WRAP_CONTENT,
                        LayoutParams.WRAP_CONTENT));
                tv.setGravity(Gravity.CENTER);
                tv.setTextSize(18);
                tv.setPadding(15, 15, 15, 15);
                tv.setText(c.getString(j));
                row.addView(tv);

            }

            c.moveToNext();

            tablelayout.addView(row);

        }

    }
    DbHelper.close();
}

valuecellborder.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
    android:width="0.1dp"
    android:color="#ffffff" />

<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"/>
</shape>

Functionally, its perfect. The only problem is the border. The vertical borders of headers and its data does not match perfectly. Here's the screenshot.

I have tried but not got the desired results. How can i resolve this? Please help me. Thank you.

Answer 1

You can take header above horizontal scrollview by using include another layout xml or creating on same file

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

 <include
        android:id="@+id/header"
        layout="@layout/header" />


<HorizontalScrollView
    android:id="@+id/horizontalView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dip"
    android:scrollbars="horizontal|vertical" >

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TableLayout
            android:id="@+id/tableLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@color/white"
            android:showDividers="middle"
            android:stretchColumns="*" >
        </TableLayout>

        <ScrollView
            android:id="@+id/layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="5dip"
            android:fillViewport="true"
            android:scrollbarStyle="outsideInset"
            android:scrollbars="horizontal|vertical" >

            <TableLayout
                android:id="@+id/tableLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@color/white"
                android:showDividers="middle"
               android:stretchColumns="*" >
            </TableLayout>
        </ScrollView>
    </LinearLayout>
</HorizontalScrollView>
</LinearLayout>