Search code examples
androidandroid-tablelayout

How to create a table exactly as we create in html that is table with borders?


I am trying to create a table in android with borders but not able to achieve the task.

enter image description here

I am working with target SDK version 23.

Following is the code for my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/enquiryLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_centerInParent="true"
    android:shrinkColumns="*"
    android:stretchColumns="*">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:layout_span="4"
            android:background="#ffffff"
            android:gravity="center"
            android:text="Table 2"
            android:textColor="#000000" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="A"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="B"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="C"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="D"
            android:textColor="#000000" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="E"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="F"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="G"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="H"
            android:textColor="#000000" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="I"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="J"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="K"
            android:textColor="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:text="L"
            android:textColor="#000000" />
    </TableRow>
</TableLayout>
</RelativeLayout>

The problem is I am not able to display the borders in the table otherwise the table is created properly.
Please guide me to accomplish the task shown in the figure.


Solution

  • After lots of searching and digging I made it working. Thank you guys for the support!!!

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/enquiryLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
    
        android:layout_centerInParent="true"
        android:background="#000000"
        android:shrinkColumns="*"
        android:stretchColumns="*">
    
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:layout_span="4"
                android:background="#ffffff"
                android:gravity="center"
                android:text="Table 2"
                android:textColor="#000000" />
        </TableRow>
    
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="A"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="B"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="C"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="D"
                android:textColor="#000000" />
        </TableRow>
    
        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="E"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="F"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="G"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="H"
                android:textColor="#000000" />
        </TableRow>
    
        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="I"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="J"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="K"
                android:textColor="#000000" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="0.5dp"
                android:background="#ffffff"
                android:gravity="center"
                android:text="L"
                android:textColor="#000000" />
        </TableRow>
     </TableLayout>
    
    
    </RelativeLayout>