separation between rows in table layout

Question

I am displaying one table layout, in that I want separation line between rows in the table.Also is it possible to have column wise separation in table layout.Please help me.

Following is my xml table layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="6dip"
    android:paddingTop="4dip">

    <TableLayout
        android:id="@+id/tablelayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingRight="2dip">

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Income"></TextView>

            <TextView
                android:layout_width="150px"
                android:layout_height="wrap_content"
                android:layout_marginLeft="150dp"
                android:text="Expense"></TextView>
        </TableRow>

        <TableRow android:layout_marginTop="30px">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Household:"></TextView>

            <TextView
                android:id="@+id/text50"
                android:layout_width="150px"
                android:layout_height="wrap_content"
                android:text="Household:"></TextView>
        </TableRow>


        <TableRow android:layout_marginTop="40px">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="2"
                android:text="Travel:"></TextView>

            <TextView
                android:id="@+id/text51"
                android:layout_width="150px"
                android:layout_height="wrap_content"
                android:layout_marginLeft="-250dp"
                android:text="Travel"></TextView>
        </TableRow>

        <TableRow android:layout_marginTop="40px">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="2"
                android:text="Education:"></TextView>

            <TextView
                android:id="@+id/text52"
                android:layout_width="150px"
                android:layout_height="wrap_content"
                android:layout_marginLeft="-250dp"
                android:text="Education"></TextView>
        </TableRow>

    </TableLayout>
</LinearLayout>

As u are adding 2 texts in table row,add one image(line)/view as divider between text having width 2dp.this will work as divider — AkashG, Jul 10 '12 at 10:36
you can also try this. http://stackoverflow.com/questions/2108456/how-can-i-create-a-table-with-borders-in-android or http://stackoverflow.com/questions/7117533/how-to-give-border-of-cells-in-tablelayout-in-android — spr, Dec 20 '12 at 04:54

score 24 · Accepted Answer · answered Jul 10 '12 at 11:04

Check this. It will work.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingBottom="6dip"
    android:paddingTop="4dip" >

    <TableLayout
        android:id="@+id/tablelayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingRight="2dip" >

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Income" >
            </TextView>

            <TextView
                android:layout_width="150px"
                android:layout_height="wrap_content"
                android:layout_marginLeft="150dp"
                android:text="Expense" >
            </TextView>
        </TableRow>

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

            <View
                android:id="@+id/line1"
                android:layout_width="match_parent"
                android:layout_height="1dip"
                android:layout_weight="1"
                android:background="#FF909090"
                android:padding="2dip" />
        </TableRow>

        <TableRow android:layout_marginTop="30px" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Household:" >
            </TextView>

            <TextView
                android:id="@+id/text50"
                android:layout_width="150px"
                android:layout_height="wrap_content"
                android:text="Household:" >
            </TextView>
        </TableRow>
       </TableLayout>

</LinearLayout>

Can we do the same programmatically? cause i am creating programmatic based layout. — AndroidOptimist, Sep 19 '13 at 05:13
I think this is not the write way of doing it. if you have 20 table rows then you have to create 20 rows more for the divider..... I think there is tag named as "android:devider" in TableLayout.. but i dont know how to use it ... if some body knows please tell soon... — Manmohan Soni, Jan 09 '14 at 07:00
Don't forget to add `android:layout_span="2"` to the divider views. — Roel, Mar 23 '16 at 15:11

score 23 · Answer 2 · edited May 23 '17 at 11:54

23

If you only want to add a divider between rows then TableRow division has a good solution.

<TableLayout    
     android:divider="?android:attr/dividerHorizontal"
     android:showDividers="middle"
    ...

edited May 23 '17 at 11:54

Community

1
1

answered Jun 21 '16 at 01:43

grantnz

7,322
1
31
38

score 10 · Answer 3 · answered May 04 '16 at 09:20

The TableLayout extends LinearLayout so you can add dividers in xml. I assume this would work back then:

    <TableLayout
        android:id="@+id/basket_summary_table"
        android:showDividers="middle"
        android:divider="@drawable/divider_list"
        android:padding="@dimen/element_large_spacing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="0">
    </TableLayout>

My divider looks like the following:

divider_list.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="1dp" />
    <solid android:color="@color/list_divider" />
</shape>

score 4 · Answer 4 · edited May 23 '17 at 12:10

4

View v = new View(this);
v.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.FILL_PARENT, 1));
v.setBackgroundColor(Color.rgb(51, 51, 51));
tr.addView(mTvDate);
tr.addView(mTvResult);

tl.addView(tr); 
tl.addView(v);

from here.

edited May 23 '17 at 12:10

Community

1
1

answered Jul 10 '12 at 10:36

Vinay W

9,912
8
41
47

Thanks Vinay Wadhwa..Can you please tell me where i have to add this?? – prakash .k Jul 10 '12 at 10:37
Add a view in your xml between two textview rather than doing progrmatically – AkashG Jul 10 '12 at 10:40
you can add this code in the activity that uses the xml you mentioned in your question. – Vinay W Jul 10 '12 at 10:44

score 2 · Answer 5 · edited Aug 31 '12 at 22:00

2

I think you have to play with the background of the TableLayout and the margin of your rows...

edited Aug 31 '12 at 22:00

wberry

18,519
8
53
85

answered Jul 10 '12 at 10:40

AMerle

4,354
1
28
43

This is how I did it, too, ant it is the best solution because it avoids view bloat in the layout. – olefevre Jun 25 '13 at 04:06

user4232 · Answer 6 · 2012-07-10T10:54:11.090

I have made some changes in your code and think this will help you...

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:paddingTop="4dip"
     android:paddingBottom="6dip"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">    
<TableLayout 
   android:id="@+id/tablelayout"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:paddingRight="2dip">

    <TableRow  >
 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Income">
     </TextView>            
        <TextView             
            android:layout_width="150px" android:layout_height="wrap_content" android:text="Expense" android:layout_marginLeft="150dp">
     </TextView>   
    </TableRow>
<View   android:id="@+id/firstDivider"
        android:layout_height="2dp"
        android:layout_width="fill_parent"
        android:background="#FFFFFF" />


    <TableRow  android:layout_marginTop="30px">
 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Household:" >
     </TextView>            
        <TextView             
            android:id="@+id/text50" android:layout_width="150px" android:layout_height="wrap_content" android:text="Household:">
     </TextView>   
    </TableRow>
<View   android:id="@+id/firstDivider"
        android:layout_height="2dp"
        android:layout_width="fill_parent"
        android:background="#FFFFFF" />



 <TableRow  android:layout_marginTop="40px">
 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Travel:" android:layout_span="2">
     </TextView>     
      <TextView
           android:id="@+id/text51"
           android:layout_width="150px" android:layout_height="wrap_content" android:text="Travel" android:layout_marginLeft="-250dp">
     </TextView>  


 </TableRow>


 <View   android:id="@+id/firstDivider"
        android:layout_height="2dp"
        android:layout_width="fill_parent"
        android:background="#FFFFFF" />

     <TableRow  android:layout_marginTop="40px">
 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Education:" android:layout_span="2">
     </TextView>     
      <TextView
           android:id="@+id/text52"
           android:layout_width="150px" android:layout_height="wrap_content" android:text="Education" android:layout_marginLeft="-250dp">
     </TextView> 

 </TableRow>

<View   android:id="@+id/firstDivider"
        android:layout_height="2dp"
        android:layout_width="fill_parent"
        android:background="#FFFFFF" />


</TableLayout>
</LinearLayout>

Thanks....

separation between rows in table layout

6 Answers6