Need help getting my Android TableLayout to work properly - android

I am attempting to display data from the on-board SQLite database within a table in the Android UI, but it isn't working as it should. Here is what I have:
activity_main.xml
<TableLayout
android:id="#+id/data_table"
android:stretchColumns="3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView android:layout_column="1" android:text="id" android:layout_width="0dp" android:layout_weight="1" />
<TextView android:layout_column="2" android:text="firstname" android:layout_width="0dp" android:layout_weight="1" />
<TextView android:layout_column="3" android:text="lastname" android:layout_width="0dp" android:layout_weight="1" />
</TableRow>
</TableLayout>
MainActivity.java
List<People> listOfPeople = databaseHelper.getAllPeople();
TableLayout myTableLayout = (TableLayout) findViewById(R.id.data_table);
for(People person : listOfPeople){
TableRow newTableRow = new TableRow(this);
TableRow.LayoutParams rowParams = new TableRow.LayoutParams();
newTableRow.setLayoutParams(rowParams);
TextView idTV = new TextView(this);
idTV.setLayoutParams(new TableRow.LayoutParams(1));
idTV.setText(person.getId());
TextView firstnameTV = new TextView(this);
firstnameTV.setLayoutParams(new TableRow.LayoutParams(2));
firstnameTV.setText(person.getFirstname());
TextView lastnameTV = new TextView(this);
lastnameTV.setLayoutParams(new TableRow.LayoutParams(3));
lastnameTV.setText(person.getLastname());
newTableRow.addView(idTV);
newTableRow.addView(firstnameTV);
newTableRow.addView(lastnameTV);
myTableLayout.addView(newTableRow);
}
The table and data is displayed, but the data within the rows I built from the database are all smooshed together and unreadable. If I were to compare this to web development, it looks like all the data are in one cell of the table row.
I am very new at Android development (former JSP developer), and what I have here, I have tried to piece together from Google searches. I need to use a TableLayout so a grid layout (or any other layout) will not do.
EDIT:
I added some background color to my "cells" and discovered they are in different cells. The issue, apparently, is that they are not distributing themselves correctly as I am not sure how to add "layout_width" and "layout_weight" to the cells within Java. At least, I guess that is what the issue is.

Just change your xml to this:
<TableLayout
android:id="#+id/data_table" android:stretchColumns="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView android:layout_column="1" android:layout_weight="1" android:text="id" />
<TextView android:layout_column="2" android:layout_weight="1" android:text="firstname" />
<TextView android:layout_column="3" android:layout_weight="1" android:text="lastname" />
</TableRow>
Make sure to also set the layout_weight to 1, for all the TextViews added by java code.

Related

Building table layout dynamically at run time from XML

New to android, I would like to have a view like below with actual values.
My code to dummy values is as below:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp">
<TableRow
android:background="#607D8B"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Due On" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
</TableRow>
<TableRow
android:background="#ECEFF1"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Access to Knowledge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="12 Feb 2016" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Renew" />
</TableRow>
<TableRow
android:background="#ECEFF1"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Achivement" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="16 Feb 2016" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Renew" />
</TableRow>
<TableRow
android:background="#ECEFF1"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="God of small things" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="22 Feb 2016" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Renew" />
</TableRow>
<Button
android:text="Renew all" />
</TableLayout>
I am getting the values from XML from webservices and parsing it to show in my table view.
I am using DocumentBuilderFactory to parse my XML. Here my XML file is in String str.
builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
InputSource src = new InputSource();
src.setCharacterStream(new StringReader(str));
Document doc = builder.parse(src);
String title = `doc.getElementsByTagName("title").item(0).getTextContent();`
Normally I use
TitleTxt.setText("Title: " + title);
PublisherTxt.setText("Publisher: " + publisher)
to show the results in my view.
I have multiple questions:
Q1 what modifications are needed in layout file to show - actual values and not the dummy values?
Q2 how to get the array values in XML parsing to show in my layout file?
Q3 how to show the XML parsed results in my table view - dynamically at runtime?
These are related queries, so had to put in the same question. Some of it may sound simple, but being new to Android, I am not able to figure out. Also tried to find a sample code to do it but could not find. Not sure if I am using the right keywords to search for what I am looking for.
Any links to sample code or which exact keywords to look for to search my issue solution or suggestions will also be appreciated.
Thanks in advance.
In order to add new Views to another at runtime, you can use the View.add method. So, in order to make the above table "dynamic", you can alter your layout file to just contain the TableLayout. And later, at runtime you programmatically add TableRows to the TableLayout.
Basically, there are two options how to add a TableRow then.
First, you can construct your TableRow, e.g.:
TextView tvTitle = new TextView(...);
TextView tvDueOn = new TextView(...);
Button btnRenew = new TextView(...);
TableRow tr = new TableRow(...);
tr.add(tvTitle);
tr.add(tvDueOn);
tr.add(btnRenew);
TableLayout lytTable = (TableLayout)findViewById(...);
lytTable.add(tr);
This is just a minimal version, but with adding the views weight, layout_width and layout_height, you can achieve this.
Second, you can design your TableRow in a layout XML file, which you can then load and add to the TableLayout at runtime using LayoutInflater.
lytTableRow.xml
<TableRow
android:id="+#id/lytTableRow"
android:background="#607D8B"
android:padding="5dp">
<TextView
android:id="+#id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="+#id/tvDueOn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="+#id/btnRenew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
</TableRow>
code in Activity
TableLayout lytTable = (TableLayout)findViewById(R.id.lytTable);
View tableRow = getLayoutInflater().inflate(R.layout.lytTableRow, null);
TextView tvTitle = (TextView)tableRow.findViewById(R.id.tvTitle);
TextView tvDueOn = (TextView)tableRow.findViewById(R.id.tvDueOn);
Button btnRenew = (Button)tableRow.findViewById(R.id.btnRenew);
tvTitle.setText(...);
Both code-parts can be put into a loop for instance, in order to add your multiple rows - but pay attention to set tags/ids to your views using view.setTag in order to be able to distinguish them later in the Button click listener for instance.
Concerning the data, depending on what kind of XML parser you use, you can loop through every item in the data and add them to your TableLayout using one of the options shown above. According to your question, you use a DOM parser. You can loop through the items using a NodeList retrieved from doc.getElementsByTagName("parentnodename") where parentnodename is the element name which contains "title", "dueon" etc.

Adding TableRow programmatically in Android

I'm working in an Android application and I want to add a TableRow programmatically in my TableLayout.
I have this TableLayout:
<TableLayout
android:id="#+id/details_table"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow>
<TextView
android:text="4686"
android:layout_width="wrap_content"
android:layout_column="0"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
<TextView
android:text="sdhiuf osdfh isdhf ihdf"
android:layout_width="wrap_content"
android:layout_column="1"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
<TextView
android:text="2"
android:layout_width="wrap_content"
android:layout_column="2"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
<TextView
android:text="UN"
android:layout_width="wrap_content"
android:layout_column="3"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
</TableRow>
and I want to add this exactly TableRow programmatically.
I'm trying something like this:
TableLayout detailsTable = (TableLayout) l.findViewById(R.id.details_table);
for(Nfce_Product nfceProduct : nfceProducts){
TableRow tableRow = new TableRow(getActivity());
TextView tvProductCode = new TextView(getActivity());
tvProductCode.setLayoutParams(new TableRow.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT, 1f));
tvProductCode.setText(nfceProduct.getProduct_code());
tvProductCode.setTextSize(TypedValue.COMPLEX_UNIT_PX, productDetailsTextSize);
tvProductCode.setTextColor(getResources().getColor(R.color.black));
TextView tvProductDescription = new TextView(getActivity());
tvProductDescription.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT, 1f));
tvProductDescription.setText(nfceProduct.getProduct_description());
tvProductDescription.setTextSize(TypedValue.COMPLEX_UNIT_PX, productDetailsTextSize);
tvProductDescription.setTextColor(getResources().getColor(R.color.black));
TextView tvProductAmount = new TextView(getActivity());
tvProductAmount.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT, 1f));
tvProductAmount.setText(String.valueOf(nfceProduct.getAmount()));
tvProductAmount.setTextSize(TypedValue.COMPLEX_UNIT_PX, productDetailsTextSize);
tvProductAmount.setTextColor(getResources().getColor(R.color.black));
TextView tvProductMetric = new TextView(getActivity());
tvProductMetric.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT, 1f));
tvProductMetric.setText(nfceProduct.getProduct_metric());
tvProductMetric.setTextSize(TypedValue.COMPLEX_UNIT_PX, productDetailsTextSize);
tvProductMetric.setTextColor(getResources().getColor(R.color.black));
tableRow.addView(tvProductCode);
tableRow.addView(tvProductDescription);
tableRow.addView(tvProductAmount);
tableRow.addView(tvProductMetric);
detailsTable.addView(tableRow);
}
Here is my own answer to my own dynamically created TableRow question. I think my answer is detailed enough, you should have no problems taking it as your own! My issue involved not only dynamically creating TableRows, but also being able to touch each row and have something happen. I've gone further than that nowadays to make each CELL separately clickable.
Edit: You need to have a separate TableRow XML file that you can access, separate from the actual TableLayout you're trying to dynamically populate.
Edit2: I should probably try to make an actual solution for you, so that you see what I'm talking about:
First, create (or keep) your XML file containing your TableLayout. Second, Create a separate TableRow XML file.
(This is your potential tablerow.xml file)
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:focusable="true" >
<TextView
android:id="#+id/tableCell1"
android:layout_width="wrap_content"
android:layout_column="0"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
<TextView
android:id="#+id/tableCell2"
android:layout_width="wrap_content"
android:layout_column="1"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
<TextView
android:id="#+id/tableCell3"
android:layout_width="wrap_content"
android:layout_column="2"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
<TextView
android:id="#+id/tableCell4"
android:layout_width="wrap_content"
android:layout_column="3"
android:layout_weight="1"
android:textSize="7px"
android:textColor="#color/black" />
</TableRow>
Now... back to your actual code!
for (Nfce_Product nfceProduct : nfceProducts) {
final TableLayout detailsTable = (TableLayout) findViewById(R.id.details_table);
final TableRow tableRow = (TableRow) getLayoutInflater().inflate(R.layout.tablerow, null);
TextView tv;
//Filling in cells
tv = (TextView) tableRow.findViewById(R.id.tableCell1);
tv.setText(nfceProduct.getProduct_code());
tv = (TextView) tableRow.findViewById(R.id.tableCell2);
tv.setText(nfceProduct.getProduct_description());
tv = (TextView) tableRow.findViewById(R.id.tableCell3);
tv.setText(nfceProduct.getAmount());
tv = (TextView) tableRow.findViewById(R.id.tableCell4);
tv.setText(nfceProduct.getProduct_metric());
//Add row to the table
detailsTable.addView(tableRow);
} //End for
If you still need/want to change the text size and color, you can do that after the setText() line and before you do findViewById again. If you want to have column headers that basically say Code, Description, Amount, and Metric, make a TableRow inside the TableLayout like you have currently. The TableRows created programmatically will fall in line after that "header" row.

Table in Android

In my Android application there is a screen with some data to be displayed in table format. This table will have around 5 columns and at least 50 rows.
How do I do I create a table in android?
I searched through and everybody seems to recommend to use TableLayout and textView for each cell. Using this technique seems to be a bit difficult as there are lots of textView Components.
Is there any other solution to this?
TableLayout lTableLayout;
lTableLayout = (TableLayout)findViewById(R.id.tblayout);
for(int i=0;i<10;i++){
TableRow tr1 = new TableRow(this);
tr1.setPadding(0, 5, 0, 0);
lTableLayout.addView(tr1, LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
TextView tv11 = new TextView(this);
tv11.setPadding(2, 0, 0, 0);
tv11.setTextSize(12);
tr1.addView(tv11,LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); // Can give width and height in numbers also.
}
These will create 10 rows and 1 textview in each row in taken table layout.
take one table layout in your xml file like below :
<TableLayout
android:id="#+id/tblayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TableLayout>
Use ListView with Custom adapter , create five textview's in listview item as columns..
create listitem like this
row.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">
<TextView android:text="TextView" android:id="#+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:text="TextView" android:id="#+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:text="TextView" android:id="#+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:text="TextView" android:id="#+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:text="TextView" android:id="#+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</LinearLayout>
Its not necessary to user TableLayout.
you can user Custom ListView And set header of ListView as your Column name
To create custom listview see this example

How to program relativeLayouts in code

I need to create a dinamic table which will be fit with rows of data. The rows I want will have an specific form, like this:
So, to get it, I used relativeLayouts. The problem is that I first tried it with an .xml to see what parameters will have the differents views that it forms, and I get it, but now I cant replicate it in the code.
Here is my code:
TableLayout linkRoutesTable = (TableLayout) findViewById(R.id.layoutLinkRoutes);
//ROW:
TableRow linkRouteRow = new TableRow(this);
linkRouteRow.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
linkRouteRow.setId(i)
//RELATIVELAYOUT:
float px0 = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, r.getDisplayMetrics());
RelativeLayout relativeLayout = new RelativeLayout(this);
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(0, (int)px0)));
//CONTENT:
// BUTTON: ...
// NUMBER:...
// ADDRESS:...
// NAME: ...
relativeLayout.addView(number);
relativeLayout.addView(name);
relativeLayout.addView(address);
relativeLayout.addView(button);
linkRouteRow.addView(relativeLayout);
linkRouteTable.addView(linkRouteRow);
linkRoutesTable.refreshDrawableState();
It doesn't show anything...
The .xml show ok, here it is:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center" android:orientation="vertical">
<TableRow>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/layoutLinkRoutes" >
<Button android:text="Button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/button1" android:layout_alignParentTop="true" android:layout_alignParentRight="true"></Button>
<TextView android:textStyle="bold" android:textSize="45dp" android:text="1" android:id="#+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_marginLeft="22dp"></TextView>
<TextView android:text="TextView" android:id="#+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="#+id/button1" android:layout_toRightOf="#+id/textView1" android:layout_marginLeft="16dp"></TextView>
<TextView android:text="TextView" android:id="#+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_alignParentTop="true" android:layout_alignLeft="#+id/textView3"></TextView>
</RelativeLayout>
</TableRow>
What Am I doing wrong in the code? I need some help, I tried everything.
If I dont use the relativeLayouts and the rows, it shows something but bad... so the problem is the rows and the relativelayout
Really thanks...
You don't have to define the layout in code to fill a table dynamically. You can infalte a layout which you define in xml like a normal layout.
So you define your table row layout one time in a xml file and infalte it multiple times into your table layout.
Check this answer.

How to set view's layout column in code (view is inside tablerow)?

I have a tablelayout in xml. I am also adding some rows to it in code. How can i set some view's column_layout in code?
In xml i have:
android:layout_column="3"
How to achieve the same in code (e.g. for TextView)?
TextView tv = new TextView(this);
tv.setLayoutParams(new TableRow.LayoutParams(3));
I'm not entirely sure I understand the questions, however MyTracks for Android provides some nice example code using a table layout. It can be found here.
Thanks for the comment. I think this is what you are looking for:
< TableLayout xmlns:
android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="3">
<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
<TextView
android:text="String"
android:gravity="right"
android:padding="3dip" />
</TableRow> ...`

Categories

Resources