1.3. Creating Layouts

TableView uses the four layouts to draw the data in the Adapter. These are

• Row
• Column
• Cell
• Corner

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>

Things you need to consider:

• 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>