Android: Custom Table Layout

Let's see how to realize a custom table layout.

The layout is defined in the file activity_main.xml. As regards the first table:

   <!-- TABLE 1-->
   <TableLayout android:id="@+id/table_user" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/table" 
      android:shrinkColumns="*" 
      android:stretchColumns="*" 
      android:layout_marginTop="20dp" 
      android:layout_marginLeft="10dp" 
      android:layout_marginRight="10dp" 
      android:layout_marginBottom="20dp" 
      android:paddingBottom="10dp">
      <!-- Row 1 with single column -->
      <TableRow 
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent" 
         android:background="#4682b4" 
         android:gravity="center_horizontal"> 
         <TextView
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="@string/first"
            android:layout_span="2" 
            android:padding="20dp" 
            android:layout_gravity="center" 
            android:textStyle="bold" 
            android:textColor="#ffffff"/>
      </TableRow>
      <!-- Row 2 with 2 columns -->
      <TableRow 
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent"

         android:layout_margin="3dp" 
         android:gravity="center_horizontal"> 
         <TextView
            android:id="@+id/TextView04" 
            android:text="@string/item" 
            android:layout_weight="1" 
            android:textColor="@android:color/black" 
            android:textAppearance="?android:attr/textAppearanceMedium" 
            android:padding="5dip"
            android:layout_marginLeft="2dp" 
            android:background="#f0ffff" 
            android:gravity="center"/>
         <TextView
            android:id="@+id/field1" 
            android:text="@string/value" 
            android:layout_weight="1" 
            android:textColor="@android:color/black"
            android:textAppearance="?android:attr/ textAppearanceMedium"
            android:layout_marginLeft="2dp" 
            android:background="#f0ffff" 
            android:padding="5dip" 
            android:gravity="center"/>
       </TableRow>

    <!-- other table rows -->

  </TableLayout>

The layout for the second table is the following:

  <!-- TABLE 2 -->
  <TableLayout

     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/table_user" 
     android:layout_marginTop="10dp" 
     android:background="@drawable/table" 
     android:shrinkColumns="*" 
     android:stretchColumns="*" 
     android:paddingBottom="10dp" 
     android:layout_marginBottom="5dp" 
     android:layout_marginLeft="10dp" 
     android:layout_marginRight="10dp"> 
     <!-- Row 1 with single column -->
     <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">
        <TextView 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:textAppearance="?android:attr/textAppearanceMedium" 
           android:text="@string/second"
           android:layout_span="3" 
           android:padding="20dp" 
           android:layout_gravity="center" 
           android:textStyle="bold" 
           android:textColor="#4682b4"/>
     </TableRow>
     <!-- Row 2 with 2 columns -->
     <TableRow
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:background="@drawable/pink_item" 
        android:layout_margin="6dp" 
        android:gravity="center_horizontal"> 
        <TextView
           android:id="@+id/TextView1" 
           android:text="@string/item"
           android:layout_weight="1" 
           android:textColor="@android:color/black"

           android:textAppearance="?android:attr/ textAppearanceMedium"

           android:padding="8dip"
           android:gravity="center"/> 
        <TextView
           android:id="@+id/field5" 
           android:text="@string/value" 
           android:layout_weight="1" 
           android:textColor="@android:color/black" 
           android:textAppearance="?android:attr/textAppearanceMedium" 
           android:padding="2dip"
           android:gravity="center"/> 
      </TableRow>

    <!-- other table rows -->

  </TableLayout>

As regards the settings for external borders and colors, they are defined in the file table.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="@android:color/transparent"/>
  <stroke 
     android:width="2dp"
     android:color="#4682b4" 
     android:dashWidth="5dp" 
     android:dashGap="0dp"/>
  <corners android:radius="20dp"/> 
</shape> 

The raws of the second table are described in the files pink_item.xml and blue_item.xml, in the folder drawable. For example, in the file pink_item.xml we have:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="#e6e6fa"/>
  <stroke 
     android:width="1dp" 
     android:color="#dda0dd" 
     android:dashWidth="5dp" 
     android:dashGap="0dp"/>
  <corners android:radius="10dp"/> 
</shape> 

You can download the source code from our repository: Download CustomTable.zip

The final result is the following: