How to add border around TableLayout?

Question

Below is my table code. My screen looks like this http://imgur.com/dFP298o but I wanna make it looks like this http://imgur.com/YuYJiJx. 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")); 

Answer 1

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.

Answer 2

You can try this code. It's a worked code.

TableLayout.java

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:padding="10dp"     tools:context=".TableViewActivity">      <TextView         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_margin="20dp"         android:background="@android:color/holo_blue_bright"         android:gravity="center"         android:padding="10dp"         android:text="@string/table_layout_title"         android:textSize="23sp"         android:textStyle="bold" />      <TableLayout         android:id="@+id/tableLayoutId"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_margin="5dp"         android:stretchColumns="1">          <TableRow              android:id="@+id/firstRow"             android:background="@drawable/border"             android:layout_width="fill_parent"             android:layout_height="wrap_content">              <TextView                 android:id="@+id/textView1"                 android:layout_width="37dp"                 android:layout_height="wrap_content"                 android:layout_marginStart="2dp"                 android:layout_marginTop="2dp"                 android:layout_marginEnd="1dp"                 android:layout_marginBottom="2dp"                 android:layout_weight="1"                 android:background="#b0b0b0"                 android:gravity="center"                 android:paddingStart="3dp"                 android:paddingTop="10dp"                 android:paddingEnd="3dp"                 android:paddingBottom="10dp"                 android:text="Name"                 android:textColor="@android:color/white"                 android:textSize="12sp"                 android:textStyle="bold" />              <TextView                 android:layout_marginTop="2dp"                 android:layout_marginBottom="2dp"                 android:layout_marginStart="2dp"                 android:layout_marginEnd="1dp"                 android:id="@+id/textView2"                 android:layout_width="0dp"                 android:layout_height="wrap_content"                 android:layout_weight="2"                 android:background="#b0b0b0"                 android:gravity="center"                 android:paddingStart="3dp"                 android:paddingTop="10dp"                 android:paddingEnd="3dp"                 android:paddingBottom="10dp"                 android:text="Father Name"                 android:textColor="@android:color/white"                 android:textSize="12sp"                 android:textStyle="bold" />              <TextView                 android:layout_marginTop="2dp"                 android:layout_marginBottom="2dp"                 android:layout_marginStart="2dp"                 android:layout_marginEnd="1dp"                 android:id="@+id/textView3"                 android:layout_width="0dp"                 android:layout_height="wrap_content"                 android:layout_weight="2"                 android:background="#b0b0b0"                 android:gravity="center"                 android:paddingStart="3dp"                 android:paddingTop="10dp"                 android:paddingEnd="3dp"                 android:paddingBottom="10dp"                 android:text="Mother Name"                 android:textColor="@android:color/white"                 android:textSize="12sp"                 android:textStyle="bold" />              <TextView                 android:layout_marginTop="2dp"                 android:layout_marginBottom="2dp"                 android:layout_marginStart="2dp"                 android:layout_marginEnd="1dp"                 android:id="@+id/textView4"                 android:layout_width="0dp"                 android:layout_height="wrap_content"                 android:layout_weight="2"                 android:background="#b0b0b0"                 android:gravity="center"                 android:paddingStart="3dp"                 android:paddingTop="10dp"                 android:paddingEnd="3dp"                 android:paddingBottom="10dp"                 android:text="School Name"                 android:textColor="@android:color/white"                 android:textSize="12sp"                 android:textStyle="bold" />              <TextView                 android:id="@+id/textView5"                 android:layout_width="0dp"                 android:layout_height="wrap_content"                 android:layout_marginStart="2dp"                 android:layout_marginTop="2dp"                 android:layout_marginEnd="1dp"                 android:layout_marginBottom="2dp"                 android:layout_weight="1.1"                 android:background="#b0b0b0"                 android:gravity="center"                 android:paddingStart="3dp"                 android:paddingTop="10dp"                 android:paddingEnd="3dp"                 android:paddingBottom="10dp"                 android:text="Phone"                 android:textColor="@android:color/white"                 android:textSize="12sp"                 android:textStyle="bold" />          </TableRow>      </TableLayout>  </LinearLayout> 

@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="#FF0303"/>     <stroke android:width="1dp" android:color="#000000"/> </shape>