How can I create a table with borders in Android?
I use a table layout to display data as table, but I want a table with user-defined columns and rows with borders. Suggestions?
Asked by: Lenny325 | Posted: 25-01-2022
Answer 1
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
Edit2: Another example (with more elements: circle corners, gradients...)
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.
Answered by: Rebecca268 | Posted: 26-02-2022Answer 2
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:
<TableLayout android:background="#000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow android:background="#FFFFFF"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp">
...
</TableRow>
</TableLayout>
Answer 3
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:
<TableRow android:layout_height="1px" android:background="#BDBDBD">
<TextView android:layout_span="2" android:layout_height="1px"
android:layout_width="fill_parent" android:text="">
</TextView>
</TableRow>
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.
Answered by: Richard950 | Posted: 26-02-2022Answer 4
What I wanted is a table like this
I added this in my styles.xml :
<style name="Divider">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">@color/divider_color</item>
</style>
<style name="Divider_invisible">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
</style>
Then in my table layout :
<TableLayout
android:id="@+id/table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#92C94A" >
<TextView
android:id="@+id/textView11"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider_invisible" />
</LinearLayout>
<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" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
<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" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
<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" />
</TableRow>
<!-- display this button in 3rd column via layout_column(zero based) -->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6F9C33" >
<TextView
android:id="@+id/textView21"
android:padding="5dp"
android:text="@string/servings"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
..........
.......
......
Answer 5
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);
Answer 6
To make 1dp collapse-border around every cell without writing a java code and without creating another xml layout with <shape...> tag, you can try this solution:
In <TableLayout...> add
android:background="#CCC" and android:paddingTop="1dp" and android:stretchColumns="0"
In <TableRow...> add
android:background="#CCC" and android:paddingBottom="1dp" and android:paddingRight="1dp"
In every cell/child in TableRow, i.e. <TextView...> 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 <TableLayout...> and <TableRow...> represents a border line color and background in <TextView...> fills a table cell. You can put some padding in cells if necessary.
An example is here:
<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">
<TableRow
android:background="#CCC"
android:paddingBottom="1dp"
android:paddingRight="1dp">
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:text="Item1"/>
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:gravity="right"
android:text="123456"/>
</TableRow>
<TableRow
android:background="#CCC"
android:paddingBottom="1dp"
android:paddingRight="1dp">
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:text="Item2"/>
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:gravity="right"
android:text="456789"/>
</TableRow>
</TableLayout>
Answer 7
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
<TableLayout... >
<TableRow... >
<TextView ...
android:background="@drawable/cellborder"
android:text="Amount"/>
</TableRow>
<TableRow... >
<TextView...
android:background="@drawable/cellborder"
android:text="5000"/>
</TableRow>
</TableLayout>
filename:cellborder.xml Here i just want only border in my design, so i put comment the solid color tag.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<!-- <solid android:color="#dc6888"/> -->
<stroke android:width="0.1dp" android:color="#ffffff"
/>
<padding android:left="0dp" android:top="0dp"
android:right="0dp" android:bottom="0dp" />
</shape>
Answer 8
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.
Answered by: Steven365 | Posted: 26-02-2022Answer 9
Well that may inspire u Those steps show how to create bordered table dynamically
here is the table view
<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">
<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="*"
>
</TableLayout>
</android.support.v4.widget.NestedScrollView>
and here the row to use "attrib_row.xml"
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/border"
>
<TextView
android:id="@+id/attrib_name"
android:textStyle="bold"
android:height="30dp"
android:background="@drawable/border"
android:gravity="center"
/>
<TextView
android:id="@+id/attrib_value"
android:gravity="center"
android:height="30dp"
android:textStyle="bold"
android:background="@drawable/border"
/>
</TableRow>
and we can add this xml file to drawable to add border to our table "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="@color/colorAccent"/>
<stroke android:width="1dp" android:color="#000000"/>
</shape>
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<Double>()
fun CreateTable()
{
val temps=controller?.getTemps()
val rowHead = LayoutInflater.from(context).inflate(R.layout.attrib_row, null) as TableRow
(rowHead.findViewById<View>(R.id.attrib_name) as TextView).text=("time")
(rowHead.findViewById<View>(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<View>(R.id.attrib_name) as TextView).text=((i+1).toString())
(row.findViewById<View>(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<View>(R.id.simpleTableLayout) as TableLayout
CreateTable()
}
the final result looks like this
Answer 10
How about overriding the onDraw method and then painting lines to the canvas?
for(int i = 0; i < rows; i++)
{
canvas.drawLine(0, i * m_cellHeight, m_totalWidth, i * m_cellHeight, paint);
}
for(int i = 0; i < m_columns; i++){
canvas.drawLine(i* m_cellWidth, 0, i * m_cellWidth, m_cellHeight * rows, paint);
}
Answer 11
If you need table with the border, I suggest linear layout with weight instead of TableLayout.
<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"/>
<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">
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp">
<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"/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_marginStart="1dp">
<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"/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_marginStart="1dp">
<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" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_marginStart="1dp">
<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" />
</LinearLayout>
</LinearLayout>
<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">
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp">
<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" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_marginStart="1dp">
<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"/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_marginStart="1dp">
<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"/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_marginStart="1dp">
<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"/>
</LinearLayout>
</LinearLayout>
Answer 12
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:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#BDCAD2"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
</TableRow>
<View
android:layout_height="1dip"
android:background="#BDCAD2" />
<!-- More TableRows -->
</TableLayout>
Hope it will help.
Answered by: Grace826 | Posted: 26-02-2022Answer 13
Here is a great way to solve this problem:
Create a rectangle drawable with rounded corners like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="2dp"
android:color="#888888"/>
<corners android:bottomRightRadius="6dp"
android:bottomLeftRadius="6dp"
android:topLeftRadius="6dp"
android:topRightRadius="6dp"/>
</shape>
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:
<?xml version="1.0" encoding="utf-8"?>
<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">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
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:
<include
android:id="@+id/rounded_table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/table_with_border" />
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.
Answered by: Walter693 | Posted: 26-02-2022Answer 14
The stroke doubles up on the middel sections, I used this layer list drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/grey" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:bottom="1dp" android:right="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/lightgrey" />
</shape>
</item>
</layer-list>
Answer 15
I think it's best to create 1px nine-patch image, and use showDividers attribute in TableRow and TableLayout since they are both LinearLayouts
Answered by: Edgar766 | Posted: 26-02-2022Answer 16
A border between cells is doubled in above answers. So, you can try this solution:
<item
android:left="-1dp"
android:top="-1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff"/>
<stroke
android:width="1dp"
android:color="#ccc"/>
</shape>
</item>
Answer 17
Another solution is to use linear layouts and set dividers between rows and cells like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
</LinearLayout>
It's a dirty solution, but it's simple and also works with transparent background and borders.
Answered by: Paul494 | Posted: 26-02-2022Answer 18
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 < 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 < 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:
<com.YOURPACKAGE.TableLayoutEx
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="2"
android:paddingTop="6dp">
<TableRow>
<TextView
android:text="@string/my_text_0_0"
android:padding="@dimen/my_padding"/>
<TextView
android:text="@string/my_text_0_1"
android:padding="@dimen/my_padding"/>
<TextView
android:text="@string/my_text_0_2_to_wrap"
android:padding="@dimen/my_padding"/>
</TableRow>
<!--more table rows here-->
</com.YOURPACKAGE.TableLayoutEx>
Similar questions
android - TableLayout and borders in XML
how do I create a table with TableLayout in XML, and have both the dark borders and the transparent background? Is there a method? thanks for your help.
android - Alignment of items in row when using TableLayout
Im trying to figure out how to line up items in each row of a table (TableLayout) - ideally I want the center of each cell to line up horizontally. The documentation isn't very clear on what's possible with TableLayout. Each cell has a different view widget so I thought a tabular layout would work well but they are all different sizes and default to top-left alignment inside each cell.
If I can't line them up then ...
layout - android: help creating tablelayout
I have a hard time understanding the layout tutorial. I am not able to align columns on different rows. For example, what does 3dip mean in android:padding="3dip". The documentation says "Available units are: px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters). ".
Specifically, I want to create a layout with top and bottom two rows, and the mi...
xml - Buttons to fill width when using TableLayout
I have a table having 2 rows each row having 3 buttons.
How can I make the buttons to fill the space equally. In HTML I would give them 33% width.
Also do you know any way I can create a view having 4 image buttons in a row as...
tablelayout - android table layout one for both (landscape and portrait view)
I want to create the following layout which should be 100% in landscape form as displaying in portrait form.
alt text http://www.freeimagehosting.net/uploads/b12bb68569.png
here is my code which i tried but not working
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
a...
tablelayout - android table layout rowspan
I want to build the following layout but it is not working.
alt text http://toms-toy.de/rowspan.gif
<LinearLayout android:orientation="horizontal"...>
<ImageView ...></ImageView>
<TableLayout ...>
<TableRow..>
<ImageView ...></ImageView>
...
tablelayout - Android table with round border
How can I make a table with a round border, similar to the photo below, in Android?
java - How can I get an Android TableLayout to fill the screen?
I'm battling with Android's awful layout system. I'm trying to get a table to fill the screen (simple right?) but it's ridiculously hard.
I got it to work somehow in XML like this:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent">
<TableRow android:layo...
layout - Android TableLayout question: get a fixed-width right column?
(Edited: I'm one step further than before)
I've been trying to get a simple 2-column TableLayout going where I have a LinearLayout in my left column that I dynamically add elements to which fills up the horizontal space except for the fixed 100px right column.
Here's what I have so far which works for me IF the LinearLayout contains more than one element. If it contains only one element, th...
android - How to align Buttons in a TableLayout to different directions?
probably I don't understand the layout properties of TableLayout yet. It doesn't seem to be possible to achieve such a flexible table like in HTML, because there are no cells. My target is it to achieve such a layout:
How can I do that? I thought about using a GridView but this doesn't seem to be useful in XML.
My efforts loo...
insert an image in a tablelayout without stretching it Android
I'm having some trouble getting pictures inside a tablelayout...actually, each I have 2 columns and when i put a picture in a cell of the table, it's completely stretched and disproportionnated...I can't find how to make it stay it's original inside the cell and let the rest of the space filled by white background for instance....
XML is like that:
<TableLayout android:layout_width="fill_parent" android:...
Still can't find your answer? Check out these communities...
Android Google Support | Android Community | Android Community (Facebook) | Dev.io Android