Android layout - How to implement a fixed/freezed header and column

Question

I would like to create a table-like view that contains a large number of columns (7-10) while the headers row is always visible (even when scrolling down) and the first colu

Answer 1

Screenshot of multi-scroll view

Here is my solution using recycler views that sync within nested fragments, available on github: https://github.com/simplyAmazin87/MultiScrollView

Here is the gist of it, first we have the main activity layout:

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/tbl_border2"
            android:orientation="horizontal">

            <TextView
                android:text="MultiScroll Table View"
                android:id="@+id/statText"
                android:textSize="24sp"
                android:paddingRight="20dp"
                android:textColor="@color/colorDarkBlue"
                android:gravity="center_horizontal|center_vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <FrameLayout 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"
            android:id="@+id/main_content"
            tools:context=".activities.MainActivity">

            <!-- TODO: Update blank fragment layout -->

        </FrameLayout>

    </LinearLayout>

Then we have our main fragment where we define the static portion of the header, a recycler view for the horizontal portion of the header, and also a frame layout within a scrollview so we can add the content that we want to scroll vertically:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:splitMotionEvents="true"
        android:layout_width="match_parent"
        android:background="@color/colorlight"
        android:layout_margin="2dp"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:splitMotionEvents="false"
            android:orientation="horizontal">
            <RelativeLayout
                android:layout_width="80dp"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_width="match_parent"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center_horizontal"
                    android:background="@drawable/tbl_border"
                    android:layout_height="wrap_content"
                    android:text="Static1"
                    android:id="@+id/hdr_Col_St1"
                    android:textSize="20dp"
                    android:padding="4dp"
                    android:textColor="@color/colorlight"/>
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="80dp"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_width="match_parent"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center_horizontal"
                    android:background="@drawable/tbl_border"
                    android:layout_height="wrap_content"
                    android:text="Static2"
                    android:id="@+id/hdr_Col_St2"
                    android:textSize="20dp"
                    android:padding="4dp"
                    android:textColor="@color/colorlight"/>
            </RelativeLayout>
            <android.support.v7.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/tbl_border"
                android:id="@+id/hdr_recycler_view"
                ></android.support.v7.widget.RecyclerView>

        </LinearLayout>

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/vertical_scroll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:id="@+id/detail_content">
            </FrameLayout>

        </android.support.v4.widget.NestedScrollView>

    </LinearLayout>

Finally we have our final layout where we define the portion of the table that can scroll vertically, along with a recycler view with a horizontal orientation that will be able to scroll both ways. This recycler view must sync with the recycler view defined for the header in order to work correctly:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:splitMotionEvents="false"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="@drawable/tbl_border2">

            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="A1"
                android:layout_marginTop="5dp"
                android:id="@+id/ColA1"
                android:textSize="20dp"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A2"
                android:gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA1"
                android:id="@+id/ColA2"
                android:textSize="20dp"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A3"
                android:layout_marginTop="5dp"
                android:gravity="center_horizontal"
                android:layout_below="@id/ColA2"
                android:id="@+id/ColA3"
                android:textSize="20dp"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A4"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA3"
                android:id="@+id/ColA4"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A5"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA4"
                android:id="@+id/ColA5"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A6"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA5"
                android:id="@+id/ColA6"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A7"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA6"
                android:id="@+id/ColA7"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A8"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA7"
                android:id="@+id/ColA8"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A9"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA8"
                android:id="@+id/ColA9"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A10"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA9"
                android:id="@+id/ColA10"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A11"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA10"
                android:id="@+id/ColA11"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A12"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA11"
                android:id="@+id/ColA12"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A13"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA12"
                android:id="@+id/ColA13"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A14"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA13"
                android:id="@+id/ColA14"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="A15"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColA14"
                android:id="@+id/ColA15"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />

        </RelativeLayout>
        <RelativeLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="@drawable/tbl_border2">

            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="B1"
                android:layout_marginTop="5dp"
                android:id="@+id/ColB1"
                android:textSize="20dp"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B2"
                android:gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB1"
                android:id="@+id/ColB2"
                android:textSize="20dp"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B3"
                android:layout_marginTop="5dp"
                android:gravity="center_horizontal"
                android:layout_below="@id/ColB2"
                android:id="@+id/ColB3"
                android:textSize="20dp"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B4"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB3"
                android:id="@+id/ColB4"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B5"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB4"
                android:id="@+id/ColB5"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B6"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB5"
                android:id="@+id/ColB6"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B7"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB6"
                android:id="@+id/ColB7"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B8"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB7"
                android:id="@+id/ColB8"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B9"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB8"
                android:id="@+id/ColB9"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B10"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB9"
                android:id="@+id/ColB10"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B11"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB10"
                android:id="@+id/ColB11"
                android:textSize="20dp"
                android:gravity="center_horizontal"
                android:padding="4dp"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B12"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB11"
                android:id="@+id/ColB12"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B13"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB12"
                android:id="@+id/ColB13"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B14"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB13"
                android:id="@+id/ColB14"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />
            <TextView
                android:layout_width="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_height="wrap_content"
                android:text="B15"
                android:layout_marginTop="5dp"
                android:layout_below="@id/ColB14"
                android:id="@+id/ColB15"
                android:textSize="20dp"
                android:padding="4dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorDarkBlue"
                />
        </RelativeLayout>

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/tbl_border2"
            android:id="@+id/dtl_recyler_view"
            ></android.support.v7.widget.RecyclerView>

    </LinearLayout>