1.3. Creating Layouts

TableView uses the four layouts Row, Column, Cell and Corner to draw the data in the Adapter.

The Row, Column and Cell layouts are the same types you would use in a Standard RecyclerView whereas the Corner Layout is a static layout.

The layout widgets in the Row, Column and Cell layouts should match the data stored in the Data Models.
e.g. a layout containing a TextView should be populated from a String stored in the Data Model.

The width of RowHeader and Corner layouts are a fixed size and cannot be dynamically resized to fit the RowHeader/Corner Label data.
The height of all layouts are a fixed size and cannot be dynamically resized to fit the data.

The width of the data columns and ColumnHeader can be dynamically resized to fit all the data to ensure they all line-up and the data is visible.

To enable easy and consistent sizing of Layouts create a dimens.xml values resource file with the following content:-

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="cell_height">40dp</dimen>
    <dimen name="text_size">12sp</dimen>

    <!-- Overriding the default values of the tableView -->
    <dimen name="default_row_header_width">55dp</dimen>
    <dimen name="default_column_header_height">40dp</dimen>
</resources>

For consistent of coloring in Layouts the following should be added to the colors.xml values resource file.

<color name="cell_background_color">#ffffff</color>
<color name="header_line_color">#0a0a0a</color>
<color name="table_view_default_text_color">#0a0a0a</color>

The following example layouts are for a simple text table with a header indicator border and dynamically resizable columns.

table_view_corner_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/default_row_header_width"
    android:layout_height="@dimen/default_column_header_height"
    android:background="@android:color/white">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Corner"
        android:textColor="@color/table_view_default_text_color"
        android:textSize="@dimen/text_size"
        android:textStyle="bold" />

    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:background="@color/header_line_color" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_alignParentBottom="true"
        android:background="@color/header_line_color" />
</RelativeLayout>

table_view_column_header_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/column_header_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/default_column_header_height"
    android:background="@color/cell_background_color"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_marginEnd="2dp"
            android:layout_marginStart="2dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/column_header_textView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:textColor="@color/table_view_default_text_color"
                android:textSize="@dimen/text_size"
                android:textStyle="bold"
                tools:text="Header Data" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@color/header_line_color" />
    </FrameLayout>
</LinearLayout>

table_view_row_header_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/row_root"
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:background="@color/cell_background_color"
                android:layout_width="@dimen/default_row_header_width"
                android:layout_height="@dimen/cell_height">

    <LinearLayout
        android:id="@+id/row_header_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <TextView
            android:id="@+id/row_header_textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:maxLines="1"
            android:textColor="@color/table_view_default_text_color"
            android:textSize="@dimen/text_size"
            android:textStyle="bold"
            tools:text="Row Data" />
    </LinearLayout>

    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="0dp"
        android:background="@color/header_line_color" />
</RelativeLayout>

table_view_cell_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/cell_container"
              xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="wrap_content"
              android:layout_height="@dimen/cell_height"
              android:background="@color/cell_background_color"
              android:gravity="center"
              android:orientation="vertical">

    <TextView
        android:id="@+id/cell_data"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_marginEnd="2dp"
        android:layout_marginStart="2dp"
        android:gravity="center"
        android:maxLines="1"
        android:textColor="@color/table_view_default_text_color"
        android:textSize="@dimen/text_size"
        tools:text="Cell Data"/>
</LinearLayout>