How can I create a table with borders in Android

Question

I use a table layout to display data as table  but I want a table with user-defined columns and rows with borders   Suggestions

User · Answer

My solution for this problem is to put an xml drawable resource on the background field of every cell. In this manner you could define a shape with the border you want for all cells. The only inconvenience is that the borders of the extreme cells have half the width of the others but it's no problem if your table fills the entire screen.

An Example:

drawable/cell_shape.xml

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

layout/my_table.xml

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

    <TableRow
        android:id="@+id/tabla_cabecera"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></TableRow>

    <TableLayout
        android:id="@+id/tabla_cuerpo"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

        </TableRow>

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

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
        </TableRow>

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

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

        </TableRow>

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

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/cell_shape"
                android:padding="5dp"
                android:text="TextView"
                android:textAppearance="?android:attr/textAppearanceMedium"></TextView>

        </TableRow>
    </TableLayout>


</LinearLayout>

Edit: An example

enter image description here

Edit2: Another example (with more elements: circle corners, gradients...) enter image description here

I have explained this issue with more details in http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more. It's in spanish but there are some codes and images of more complex tables.

User · Answer

I have to agree with Brad  That was an awful answer  The Android documentation states that TableLayout containers do not display border lines  so sending them to the Android site wont help them a bit  I was able to find a  dirty  solution on droidnova  which involves setting a background color for the TableLayout  then setting a different background color for the TableRow and adding layout margin to the row   I m not fond of this solution  but  it does work for row borders   I guess you could do the same thing with the items composing each  cell  item but I haven t verified   An example similar to the one on DroidNova    lt TableLayout android background   000000  android layout width  fill parent  android layout height  wrap content  gt     lt TableRow android background   FFFFFF    android layout width  fill parent    android layout height  wrap content    android layout margin  1dp  gt              lt  TableRow gt   lt  TableLayout gt

User · Answer

I used this solution  in TableRow  I created for every cell LinearLayout with vertical line and actual cell in it  and after every TableRow  I added a horizontal line   Look at the code below    lt TableLayout     android layout width  match parent      android layout height  wrap content      android shrinkColumns  1  gt        lt TableRow                     android layout width  wrap content          android layout height  wrap content   gt                lt LinearLayout                  android orientation  horizontal                  android layout height  match parent                  android layout weight  1  gt                    lt TextView                      android layout width  0dp                      android layout height  wrap content                      android gravity  center   gt                lt  LinearLayout gt                lt LinearLayout                  android orientation  horizontal                  android layout height  match parent                  android layout weight  1  gt                    lt View                     android layout height  match parent                      android layout width  1dp                      android background   BDCAD2   gt                    lt TextView                      android layout width  0dp                      android layout height  wrap content                      android gravity  center   gt                lt  LinearLayout gt         lt  TableRow gt          lt View         android layout height  1dip          android background   BDCAD2    gt          lt  -- More TableRows -- gt   lt  TableLayout gt    Hope it will help

User · Answer

After long  search and hours of trying this is the simplest code i could make   ShapeDrawable border   new ShapeDrawable new RectShape     border getPaint   setStyle Style STROKE   border getPaint   setColor Color BLACK   tv setBackground border   content addView tv     tv is a TextView with a simple text and content is my container  LinearLayout in this Case   That s a little easier

User · Answer

Another solution is to use linear layouts and set dividers between rows and cells like this    lt LinearLayout xmlns android  http   schemas android com apk res android  android orientation  vertical  android layout width  match parent  android layout height  match parent  gt    lt View     android layout width  match parent      android layout height  1px      android background   8000   gt    lt LinearLayout     android orientation  horizontal      android layout width  match parent      android layout height  match parent      android layout weight  1  gt        lt View         android layout width   dimen border          android layout height  match parent          android background   8000          android layout marginTop  1px          android layout marginBottom  1px   gt        lt LinearLayout         android orientation  horizontal          android layout width  match parent          android layout height  match parent          android layout weight  1           gt  lt  LinearLayout gt        lt View         android layout width   dimen border          android layout height  match parent          android background   8000          android layout marginTop  1px          android layout marginBottom  1px   gt        lt LinearLayout         android orientation  horizontal          android layout width  match parent          android layout height  match parent          android layout weight  1  gt  lt  LinearLayout gt        lt View         android layout width   dimen border          android layout height  match parent          android background   8000          android layout marginTop  1px          android layout marginBottom  1px   gt    lt  LinearLayout gt    lt View     android layout width  match parent      android layout height  1px      android background   8000   gt    lt LinearLayout     android orientation  horizontal      android layout width  match parent      android layout height  match parent      android layout weight  1  gt        lt View         android layout width   dimen border          android layout height  match parent          android background   8000          android layout marginTop  1px          android layout marginBottom  1px   gt        lt LinearLayout         android orientation  horizontal          android layout width  match parent          android layout height  match parent          android layout weight  1           gt  lt  LinearLayout gt        lt View         android layout width   dimen border          android layout height  match parent          android background   8000          android layout marginTop  1px          android layout marginBottom  1px   gt        lt LinearLayout         android orientation  horizontal          android layout width  match parent          android layout height  match parent          android layout weight  1  gt  lt  LinearLayout gt       lt View         android layout width   dimen border          android layout height  match parent          android background   8000          android layout marginTop  1px          android layout marginBottom  1px   gt   lt  LinearLayout gt    lt View     android layout width  match parent      android layout height  1px      android background   8000   gt   lt  LinearLayout gt    It s a dirty solution  but it s simple and also works with transparent background and borders

User · Answer

Well  that may inspire u  Those steps show how to create bordered table dynamically   here is the table view   lt android support v4 widget NestedScrollView xmlns android  http   schemas android com apk res android      android id    id nested scroll view      android layout width  match parent      android layout height  match parent      android scrollbars  none      android scrollingCache  true  gt       lt TableLayout xmlns android  http   schemas android com apk res android          android id    id simpleTableLayout          android layout width  match parent          android layout height  wrap content          android layout marginLeft  45dp          android layout marginRight  45dp          android stretchColumns              gt       lt  TableLayout gt   lt  android support v4 widget NestedScrollView gt    and here the row to use  attrib row xml     lt  xml version  1 0  encoding  utf-8   gt   lt TableRow xmlns android  http   schemas android com apk res android      android background   drawable border       gt       lt TextView         android id    id attrib name          android textStyle  bold          android height  30dp          android background   drawable border          android gravity  center            gt       lt TextView         android id    id attrib value          android gravity  center          android height  30dp          android textStyle  bold          android background   drawable border            gt   lt  TableRow gt    and we can add this xml file to drawable to add border to our table  border xml    lt  xml version  1 0  encoding  utf-8   gt   lt shape     xmlns android  http   schemas android com apk res android      android shape   rectangle  gt       lt solid android color   color colorAccent   gt       lt stroke android width  1dp  android color   000000   gt   lt  shape gt    and finally here is the compact code written in Kotlin but it s easy to convert it to java if you need   well temps is an array list  contain data  ArrayList lt Double gt     fun CreateTable         val temps controller  getTemps       val rowHead   LayoutInflater from context  inflate R layout attrib row  null  as TableRow      rowHead findViewById lt View gt  R id attrib name  as TextView  text   time        rowHead findViewById lt View gt  R id attrib value  as TextView  text   Value       table   addView rowHead      for  i in 0 until temps   size             val row   LayoutInflater from context  inflate R layout attrib row  null  as TableRow          row findViewById lt View gt  R id attrib name  as TextView  text   i 1  toString             row findViewById lt View gt  R id attrib value  as TextView  text  temps i  toString            table   addView row            table   requestLayout       and you can use it in your fragment for example like this      override fun onViewCreated view  View   savedInstanceState  Bundle             super onViewCreated view  savedInstanceState          table   view  findViewById lt View gt  R id simpleTableLayout  as TableLayout         CreateTable           the final result looks like this

User · Answer

How about overriding the onDraw method and then painting lines to the canvas   for int i   0  i  lt  rows  i                  canvas drawLine 0  i   m cellHeight  m totalWidth  i   m cellHeight  paint             for int i   0  i  lt  m columns  i             canvas drawLine i  m cellWidth  0  i   m cellWidth  m cellHeight   rows  paint

User · Answer

Here i have designed the list by the following design image  My listitem filename is Propertylistitem xml and cellborder xml is used drawable shape for the cellborder output  are show in this image  necessary code i added here   FileName propertylistitem xml   lt TableLayout     gt               lt TableRow     gt                    lt TextView                         android background   drawable cellborder                      android text  Amount   gt               lt  TableRow gt                lt TableRow     gt                   lt TextView                        android background   drawable cellborder                      android text  5000   gt               lt  TableRow gt           lt  TableLayout gt    filename cellborder xml  Here i just want only border in my design  so i put comment the solid color tag     lt  xml version  1 0  encoding  utf-8   gt       lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle   gt       lt  --      lt solid android color   dc6888   gt      -- gt           lt stroke android width  0 1dp  android color   ffffff                gt           lt padding android left  0dp  android top  0dp                  android right  0dp  android bottom  0dp    gt       lt  shape gt

User · Answer

IF you are just trying to have a line in between rows  for example  just above a  Total  row  then there is an easy solution - just add a TableRow with a background color and a specific layout height such as this    lt TableRow android layout height  1px  android background   BDBDBD  gt      lt TextView android layout span  2  android layout height  1px                android layout width  fill parent  android text    gt      lt  TextView gt   lt  TableRow gt    Set android layout height  1px  or however thick you want the border to be   Fill in as many empty TextView columns as you need to match the rest of your table  or just use one along with android layout span as I have demonstrated   The output will look something like this     If you are trying to add more complicated borders then the other answers already posted are more appropriate

User · Answer

I think it s best to create 1px nine-patch image  and use showDividers attribute in TableRow and TableLayout since they are both LinearLayouts

User · Answer

The stroke doubles up on the middel sections  I used this layer list drawable    lt layer-list xmlns android  http   schemas android com apk res android   gt     lt item android top  0dp  android left  0dp  android bottom  0dp  android right  0dp  gt         lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt          lt solid android color   color grey    gt       lt  shape gt   lt  item gt    lt item android top  1dp  android left  1dp  android bottom  1dp  android right  1dp  gt        lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt         lt solid android color   color lightgrey    gt       lt  shape gt    lt  item gt   lt  layer-list gt

User · Answer

I know this is an old question     anyway     if you want to keep your xml nice and simple you can extend TableLayout and override dispatchDraw to do some custom drawing    Here is a quick and dirty implementation that draws a rectangle around the table view as well as horizontal and verticals bars   public class TableLayoutEx extends TableLayout       private Paint linePaint   null      private Rect tableLayoutRect       public TableLayoutEx Context context            super context              public TableLayoutEx Context context  AttributeSet attrs            super context  attrs               Override     protected void onSizeChanged int w  int h  int oldw  int oldh            super onSizeChanged w  h  oldw  oldh            float strokeWidth   this getContext   getResources   getDisplayMetrics   scaledDensity   1          linePaint   new Paint 0           linePaint setColor 0xff555555           linePaint setStrokeWidth strokeWidth           linePaint setStyle Paint Style STROKE            Rect rect   new Rect                       int paddingTop  getPaddingTop             this getDrawingRect rect           tableLayoutRect   new Rect rect left  rect top   paddingTop  rect right  rect bottom               Override     protected void dispatchDraw Canvas canvas            super dispatchDraw canvas            Rect rect   new Rect             if  linePaint    null                canvas drawRect tableLayoutRect  linePaint               float y   tableLayoutRect top              for  int i   0  i  lt  getChildCount   - 1  i                      if  getChildAt i  instanceof TableRow                        TableRow tableRow    TableRow  getChildAt i                       tableRow getDrawingRect rect                       y    rect height                        canvas drawLine tableLayoutRect left  y  tableLayoutRect right  y  linePaint                       float x   tableLayoutRect left                      for  int j   0  j  lt  tableRow getChildCount   - 1  j                              View view   tableRow getChildAt j                           if  view    null                                view getDrawingRect rect                               x    rect width                                canvas drawLine x  tableLayoutRect top  x  tableLayoutRect bottom  linePaint                                                                                                       xml example with the third column wrapping text    lt com YOURPACKAGE TableLayoutEx     android layout width  match parent      android layout height  wrap content      android shrinkColumns  2      android paddingTop  6dp  gt        lt TableRow gt           lt TextView             android text   string my text 0 0              android padding   dimen my padding   gt           lt TextView             android text   string my text 0 1              android padding   dimen my padding   gt           lt TextView                                android text   string my text 0 2 to wrap              android padding   dimen my padding   gt       lt  TableRow gt        lt  --more table rows here-- gt    lt  com YOURPACKAGE TableLayoutEx gt

User · Answer

Here is a great way to solve this problem   Create a rectangle drawable with rounded corners like this    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt        lt stroke android width  2dp              android color   888888   gt         lt corners android bottomRightRadius  6dp                android bottomLeftRadius  6dp                android topLeftRadius  6dp                android topRightRadius  6dp   gt    lt  shape gt    save it in the drawable folder with the name rounded border xml  Then create a relative layout that uses the rounded border as a background like this    lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent       android background   drawable rounded border  gt      lt ListView         android id    id list view         android layout width  match parent         android layout height  wrap content   gt    lt  RelativeLayout gt    save that in your layout folder and name it table with border xml  then whenever you need such a table pull it into a view using the include syntax like this    lt include         android id    id rounded table          android layout width  match parent          android layout height  wrap content          layout   layout table with border    gt    You will probably want to add some spacing around the edges - so just wrap the include in a LinearLayout and add some padding around the edges   Simple and easy way to get a pretty border around a table

User · Answer

A border between cells is doubled in above answers  So  you can try this solution       lt item     android left  -1dp      android top  -1dp  gt        lt shape xmlns android  http   schemas android com apk res android             android shape  rectangle  gt           lt solid android color   fff   gt           lt stroke             android width  1dp              android color   ccc   gt       lt  shape gt   lt  item gt

User · Answer

If you need table with the border  I suggest linear layout with weight instead of TableLayout     lt TextView     android layout width  match parent      android layout height  wrap content      android layout marginTop  10dp      android gravity  center      android padding  7dp      android background   drawable border      android textColor   android color white      android text  PRODUCT   gt    lt LinearLayout     android layout width  match parent      android layout height  match parent      android orientation  horizontal      android background   android color black      android paddingStart  1dp      android paddingEnd  1dp      android paddingBottom  1dp      android baselineAligned  false  gt        lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp  gt            lt TextView             android id    id chainprod              android textSize  15sp              android layout width  match parent              android layout height  match parent              android background   android color white              android gravity  center              android textColor   android color black              android text   string pdct   gt        lt  LinearLayout gt        lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp          android layout marginStart  1dp  gt            lt TextView             android id    id chainthick              android textSize  15sp              android layout width  match parent              android layout height  match parent              android background   android color white              android gravity  center              android textColor   android color black              android text   string thcns   gt        lt  LinearLayout gt        lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp          android layout marginStart  1dp  gt            lt TextView             android id    id chainsize              android textSize  15sp              android layout width  fill parent              android layout height  40dp              android background   android color white              android gravity  center              android textColor   android color black              android text   string size    gt       lt  LinearLayout gt        lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp          android layout marginStart  1dp  gt            lt TextView             android textSize  15sp              android layout width  fill parent              android layout height  40dp              android background   android color white              android gravity  center              android textColor   android color black              android text   string sqft    gt       lt  LinearLayout gt    lt  LinearLayout gt    lt LinearLayout     android layout width  match parent      android layout height  match parent      android orientation  horizontal      android background   android color black      android paddingStart  1dp      android paddingEnd  1dp      android paddingBottom  1dp      android baselineAligned  false  gt        lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp  gt            lt TextView             android id    id viewchainprod              android textSize  15sp              android textStyle  bold              android layout width  fill parent              android layout height  40dp              android background   android color white              android gravity  center              android textColor   android color black              android text   string pdct    gt        lt  LinearLayout gt        lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp          android layout marginStart  1dp  gt            lt TextView             android id    id viewchainthick              android textSize  15sp              android textStyle  bold              android layout width  fill parent              android layout height  40dp              android background   android color white              android gravity  center              android textColor   android color black              android text   string thcns   gt       lt  LinearLayout gt        lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp          android layout marginStart  1dp  gt            lt TextView             android id    id viewchainsize              android textSize  15sp              android textStyle  bold              android layout width  fill parent              android layout height  40dp              android background   android color white              android gravity  center              android textColor   android color black              android text   string size   gt       lt  LinearLayout gt       lt LinearLayout         android layout weight  1          android layout height  fill parent          android layout width  0dp          android layout marginStart  1dp  gt            lt TextView             android id    id viewchainsqft              android textSize  15sp              android textStyle  bold              android layout width  fill parent              android layout height  40dp              android background   android color white              android gravity  center              android textColor   android color black              android text   string sqft   gt        lt  LinearLayout gt   lt  LinearLayout gt

User · Answer

What I wanted is a table like this    I added this in my styles xml           lt style name  Divider  gt           lt item name  android layout width  gt 1dip lt  item gt           lt item name  android layout height  gt match parent lt  item gt           lt item name  android background  gt  color divider color lt  item gt       lt  style gt        lt style name  Divider invisible  gt           lt item name  android layout width  gt 1dip lt  item gt           lt item name  android layout height  gt match parent lt  item gt       lt  style gt    Then in my table layout      lt TableLayout             android id    id table              android layout width  match parent              android layout height  wrap content              android orientation  horizontal              android stretchColumns      gt                lt TableRow                 android id    id tableRow1                  android layout width  fill parent                  android layout height  match parent                  android background   92C94A   gt                    lt TextView                     android id    id textView11                      android paddingBottom  10dp                      android paddingLeft  5dp                      android paddingRight  5dp                      android paddingTop  10dp    gt                    lt LinearLayout                     android layout width  1dp                      android layout height  match parent   gt                        lt View style   style Divider invisible    gt                   lt  LinearLayout gt                    lt TextView                     android id    id textView12                      android paddingBottom  10dp                      android paddingLeft  5dp                      android paddingRight  5dp                      android paddingTop  10dp                      android text   string main wo colon                      android textColor   color white                      android textSize  16sp    gt                    lt LinearLayout                     android layout width  1dp                      android layout height  match parent   gt                        lt View style   style Divider    gt                   lt  LinearLayout gt                    lt TextView                     android id    id textView13                      android paddingBottom  10dp                      android paddingLeft  5dp                      android paddingRight  5dp                      android paddingTop  10dp                      android text   string side wo colon                      android textColor   color white                      android textSize  16sp    gt                    lt LinearLayout                     android layout width  1dp                      android layout height  match parent   gt                        lt View style   style Divider    gt                   lt  LinearLayout gt                    lt TextView                     android id    id textView14                      android paddingBottom  10dp                      android paddingLeft  5dp                      android paddingRight  5dp                      android paddingTop  10dp                      android text   string total                      android textColor   color white                      android textSize  16sp    gt               lt  TableRow gt                lt  -- display this button in 3rd column via layout column zero based  -- gt                lt TableRow                 android id    id tableRow2                  android layout width  match parent                  android layout height  match parent                  android background   6F9C33   gt                    lt TextView                     android id    id textView21                      android padding  5dp                      android text   string servings                      android textColor   color white                      android textSize  16sp    gt                    lt LinearLayout                     android layout width  1dp                      android layout height  match parent   gt                        lt View style   style Divider    gt                   lt  LinearLayout gt

User · Answer

To make 1dp collapse-border around every cell without writing a java code and without creating another xml layout with  lt shape    gt  tag  you can try this solution   In  lt TableLayout    gt  add android background   CCC  and android paddingTop  1dp  and android stretchColumns  0   In  lt TableRow    gt  add android background   CCC  and android paddingBottom  1dp  and android paddingRight  1dp   In every cell child in TableRow  i e   lt TextView    gt  add android background   FFF  and android layout marginLeft  1dp   It is very important to follow paddings and margins as described  This solution will draw a 1dp border aka border-collapse property in  X HTML CSS   Background color in  lt TableLayout    gt  and  lt TableRow    gt  represents a border line color and background in  lt TextView    gt  fills a table cell  You can put some padding in cells if necessary   An example is here    lt TableLayout xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android layout width  fill parent      android layout height  wrap content      android background   CCC      android paddingTop  1dp      android stretchColumns  0      android id    id tlTable01  gt        lt TableRow         android background   CCC          android paddingBottom  1dp          android paddingRight  1dp  gt           lt TextView              android layout marginLeft  1dp              android padding  5dp              android background   FFF              android text  Item1   gt           lt TextView              android layout marginLeft  1dp              android padding  5dp              android background   FFF              android gravity  right              android text  123456   gt       lt  TableRow gt       lt TableRow         android background   CCC          android paddingBottom  1dp          android paddingRight  1dp  gt           lt TextView              android layout marginLeft  1dp              android padding  5dp              android background   FFF              android text  Item2   gt           lt TextView              android layout marginLeft  1dp              android padding  5dp              android background   FFF              android gravity  right              android text  456789   gt       lt  TableRow gt   lt  TableLayout gt

User · Answer

You can also do this progamatically  rather than through xml  but it s a bit more  hackish   But give a man no options and you leave him no choice  p   Here s the code   TableLayout table   new TableLayout this   TableRow tr   new TableRow this   tr setBackgroundColor Color BLACK   tr setPadding 0  0  0  2     Border between rows  TableRow LayoutParams llp   new TableRow LayoutParams LayoutParams WRAP CONTENT LayoutParams WRAP CONTENT   llp setMargins 0  0  2  0    2px right-margin    New Cell LinearLayout cell   new LinearLayout this   cell setBackgroundColor Color WHITE   cell setLayoutParams llp    2px border on the right for the cell   TextView tv   new TextView this   tv setText  Some Text    tv setPadding 0  0  4  3    cell addView tv   tr addView cell     add as many cells you want to a row  using the same approach  table addView tr

[android] How can I create a table with borders in Android?

Examples related to android

Examples related to tablelayout