androidandroid-tablelayout

How to add border around TableLayout?


Below is my table code. My screen looks like this https://i.sstatic.net/U5ppn.jpg but I wanna make it looks like this https://i.sstatic.net/gFQZw.jpg. How can I add borders around each row and around table layout?

<TableLayout
    android:id="@+id/table2"
    android:layout_width="fill_parent"
    android:layout_below="@+id/test_button_text23"
    android:layout_marginLeft="45dp"
    android:layout_marginBottom="25dp"
    android:layout_marginRight="45dp"    
    android:layout_height="fill_parent"
    android:stretchColumns="*" >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:gravity="left"
            android:text="Quantity"
            android:textStyle="bold" />

        <TextView
            android:gravity="center"
            android:textStyle="bold"
            android:text="Item" />

    </TableRow>

</TableLayout>     

 

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

    <TextView
        android:id="@+id/localTime"
        android:textColor="#000000"
        android:gravity="left" />

    <TextView
        android:id="@+id/apprentTemp"
        android:textColor="#000000"
        android:gravity="center" />

</TableRow>

 

View row = getLayoutInflater().inflate(R.layout.rows, null);
((TextView) row.findViewById(R.id.localTime)).setText(item.getString("Item"));
((TextView) row.findViewById(R.id.apprentTemp)).setText(item.getString("Quantity"));

Solution

  • In order to create a border around your table rows and around the table layout, you need to create a drawable to serve as a border and then set it as a background to your rows.

    For example:

    res/drawable/border.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape= "rectangle">
       <solid android:color="#ffffff"/>
       <stroke android:width="1dp" android:color="#000000"/>
    </shape>
    

    res/layout/your_layout.xml

    <TableLayout
         android:id="@+id/table2"
         android:layout_width="fill_parent"
         android:layout_below="@+id/test_button_text23"
         android:layout_marginLeft="45dp"
         android:layout_marginBottom="25dp"
         android:layout_marginRight="45dp"
         android:layout_height="fill_parent"
         android:stretchColumns="*">
    
         <TableRow
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@drawable/border">
    
               <TextView
                  android:gravity="left"
                  android:text="Quantity"
                  android:background="@drawable/border"
                  android:textStyle="bold"/>
    
               <TextView
                  android:gravity="center"
                  android:textStyle="bold"
                  android:background="@drawable/border"
                  android:text="Item" />
    
         </TableRow>
    
    </TableLayout>  
    

    This won't look exactly like the picture you posted, but play with it to get what you want.