How to display grids on TableLayouts

Android TableLayouts apparently do not have an option to show grids on the tables. In the following example, grid-like appearance is creates by setting margins around each TextView inside the table, and setting different background colors for the TableLayout and the TextViews.

Background color of the TableLayout will be the color of the grids.


1. Create a new Android project.

2. Replace the content of main.xml layout file with the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Sample table with grids"
    />
  
    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:background="#9CFF00"> <!-- color of grids -->
             
        <TableRow 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >      
           
            <TextView
                style="@style/myCellStyle"       
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cell 0.0"
                />
               
            <TextView
                style="@style/myCellStyle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Cell 0.1"
                />
           
        </TableRow>
       
        <TableRow
            android:id="@+id/TableRow02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >      
           
            <TextView
                style="@style/myCellStyle"       
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Cell 1.0"
                />
               
            <TextView
                style="@style/myCellStyle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Cell 1.1"
                />
           
        </TableRow>
          
    </TableLayout>
    
</LinearLayout>

3. Next, create a file "myStyle.xml" under /res/values folder. Cut and paste the following in this file. This style is being used for all TextViews in main.xml to create margins.

<?xml version="1.0" encoding="utf-8"?>
<resources>
       
    <style name= "myCellStyle">
        <item name="android:textColor">#EE0000</item>
        <item name="android:background">#80ADFF</item>
        <item name="android:layout_marginLeft">2dip</item>
        <item name="android:layout_marginTop">2dip</item>
        <item name="android:layout_marginRight">0dip</item>
        <item name="android:layout_marginBottom">0dip</item>
    </style>

</resources>

Note:
The layout_marginRight and layout_marginBottom values are set to 0dip in the above to allow for repetition of the cells (TextViews) on right sides and below. In main.xml layout file, just remember to set the right margins to 2dip for the rightmost cells of all rows; and set the bottom margins to 2dips for the bottom most cells of the table to create the (missing) perimeter grids on right and bottom of the table.