How to add new row dynamically to table layout - android

In my android app, I have a table layout. I want to dynamically insert rows. But the problem is the rows are being added horizontally. I want each tablerow to be stacked vertically. I have this so far:
TableLayout mytable = (TableLayout)findViewById(R.id.studentContainer);
TableRow tablerow = new TableRow(this);
tablerow.setOrientation(TableRow.VERTICAL);
EditText g = new EditText(this);
g.setText("AAAAAAAAA");
g.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
EditText g2 = new EditText(this);
g2.setText("BBBBBBBBBB");
g2.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
tablerow.addView(g);
tablerow.addView(g2);
mytable.addView(tablerow, new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT));
TableRow tablerow2 = new TableRow(this);
tablerow2.setOrientation(TableRow.VERTICAL);
EditText g4 = new EditText(this);
g4.setText("AAAAAAAAA");
g4.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
EditText g5 = new EditText(this);
g5.setText("BBBBBBBBBB");
g5.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
tablerow.addView(g4);
tablerow.addView(g5);
mytable.addView(tablerow2, new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT));
XML
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/studentContainer" >
</TableLayout >
Does anyone know whats wrong here?
Thanks

Try to put the first row in the xml and rotate the entire table, edit the text_views if necessary. Like this
XML
<TableLayout
android:id="#+id/list_tableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:rotation="-90"
android:stretchColumns="0,1,2,3" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Column1"
android:textColor="#000000"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Column2"
android:textColor="#000000"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Column3"
android:textColor="#000000"/>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Column4"
android:textColor="#000000"/>
</TableRow>
</TableLayout>
and then code like this
TableRow tr = new TableRow(this);
tr.setPadding(0,20,0,20);
tr.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
TextView tv_item1 = new TextView(this);
TextView tv_item2 = new TextView(this);
TextView tv_item3 = new TextView(this);
TextView tv_item4 = new TextView(this);
tv_item1.setText(M_Number);
tv_item1.setGravity(Gravity.CENTER);
tv_item2.setText(M_Number);
tv_item2.setGravity(Gravity.CENTER);
tv_item3.setText(M_Number);
tv_item3.setGravity(Gravity.CENTER);
tv_item4.setText(M_Number);
tv_item4.setGravity(Gravity.CENTER);
tr.addView(tv_item1);
tr.addView(tv_item2);
tr.addView(tv_item3);
tr.addView(tv_item4);
Table.addView(tr, new TableLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));

Better you have a table row item in XML, inflate in as a new view and set data accordingly.
then add that view to the table layout

Related

Android table layout adding single column row that spans table width in java

I am trying to add a single textview row to a table in android
the row should merge and center the width of the table
I am able to achieve this using XML
<TableLayout>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/red_cell_shape"
android:text="code"
android:textAlignment="center"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/red_cell_shape"
android:padding="5dp"
android:text="desc"
android:textAlignment="center"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/red_cell_shape"
android:text="status"
android:textAlignment="center"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tremptyrow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/red_cell_shape">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/no_fg_scanned"
android:padding="5dp"
android:layout_span="6"
android:textAlignment="center"
android:textColor="#color/red" />
</TableRow>
</TableLayout>
this is what it should look like
but I want to do it dynamically in java and tried this but did not work
You can implement the above layout programmatically like below:
1.Create an empty TableLayout in xml like below:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TableLayout>
2.Get the TableLayout reference from xml and create two TableRows each one having TextView children:
//get the TableLayout
TableLayout tableLayout = findViewById(R.id.tableLayout);
//create the first TableRow
TableRow tableRow1 = new TableRow(this);
tableRow1.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT));
tableRow1.setBackgroundColor(ContextCompat.getColor(this, android.R.color.white));
//add 3 TextViews in TableRow1 and add TableRow1 to TableLayout
tableRow1.addView(getTextView(android.R.color.holo_purple, android.R.color.black, "Code"));
tableRow1.addView(getTextView(android.R.color.holo_red_light, android.R.color.black,"Desc"));
tableRow1.addView(getTextView(android.R.color.holo_green_dark, android.R.color.black,"Status"));
tableLayout.addView(tableRow1);
//create the second TableRow
TableRow tableRow2 = new TableRow(this);
tableRow2.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT));
tableRow2.setBackgroundColor(ContextCompat.getColor(this, android.R.color.white));
//add 1 TextView in TableRow2 and add TableRow2 to TableLayout
tableRow2.addView(getTextView(android.R.color.black, android.R.color.holo_red_light,"No records"));
tableLayout.addView(tableRow2);
with the below helper function to create each TextView in TableRow programmatically. The key point here is to use layoutParams.weight = 1 on TextView TableRow.LayoutParams to be able to get equal width between all columns in TableRow:
private TextView getTextView(int backgroundColorId, int textColorId, String text){
TextView tv = new TextView(this);
tv.setBackgroundColor(ContextCompat.getColor(this, backgroundColorId));
tv.setTextColor(ContextCompat.getColor(this, textColorId));
tv.setText(text);
tv.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
tv.setTypeface(tv.getTypeface(), Typeface.BOLD);
int padding = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics());
tv.setPaddingRelative(padding, padding, padding, padding);
TableRow.LayoutParams layoutParams = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.MATCH_PARENT);
layoutParams.weight = 1; //this is mandatory to get equal width between all columns in TableRow
tv.setLayoutParams(layoutParams);
return tv;
}
Result:

Android XML vs code tablelayout differences

I want to use code to generate a very large TableLayout. XML works great but the file is getting huge and making changes would be tedious down the road. The final layout will have a HorizontalScrollview on the right but my problem is best illustrated as follows.
The XML file is this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Table 1"/></TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Table 1"/></TableRow>
</TableLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Table 2"/></TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Table 2"/></TableRow>
</TableLayout>
</LinearLayout>
this outputs like this (sorry, can't post screenshot)
Table 1 Table 2
Table 1 Table 2
When I use code this this
LinearLayout ll = new LinearLayout(this);
ll.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT));
TableLayout table1 = new TableLayout(this);
table1.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.MATCH_PARENT));
for (int x = 0;x < 2;x++) {
TableRow row = new TableRow(this);
row.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT,TableRow.LayoutParams.WRAP_CONTENT));
TextView tv = new TextView(this);
tv.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT,TableRow.LayoutParams.WRAP_CONTENT));
tv.setText("Table 1");
row.addView(tv);
table1.addView(row);
}
TableLayout table2 = new TableLayout(this);
table2.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.MATCH_PARENT));
for (int x = 0;x < 2;x++) {
TableRow row = new TableRow(this);
row.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT,TableRow.LayoutParams.WRAP_CONTENT));
TextView tv = new TextView(this);
tv.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT,TableRow.LayoutParams.WRAP_CONTENT));
tv.setText("Table 2");
row.addView(tv);
table2.addView(row);
}
ll.addView(table1);
ll.addView(table2);
setContentView(ll);
it shows output like
Table 1
Table 1
I lose the second tablelayout. How can I change the code style to view that second tablelayout?
I didn't find out why the second table doesn't work in code but I was able to fix my problem by
Setting up the LinearLayout and the TableLayouts in XML.
Then referencing the TableLayouts and adding the TableRows in code.

Programmatically add content to a TableLayout on Android

I am trying to add rows to a table after a click to a button (so after the generation of the activity).
My XML code is:
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1"
android:id="#+id/result_table">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
style="#style/MyHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Col1" />
<TextView
style="#style/MyHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Col2" />
</TableRow>
</TableLayout>
So when I load the activity I have my table with my only row. Then when I click on my button I do:
resultTable = (TableLayout)findViewById(R.id.result_table);
LayoutParams rowLayoutParams = new TableRow.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
LayoutParams cellLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
TableRow tableRow;
TextView cellValue;
for(Asdf a : as) {
tableRow = new TableRow(this);
tableRow.setLayoutParams(rowLayoutParams);
cellValue = new TextView(this);
cellValue.setText(a.getText());
cellValue.setLayoutParams(cellLayoutParams);
cellValue.setTextAppearance(this, R.style.MyText);
tableRow.addView(cellValue);
cellValue = new TextView(this);
cellValue.setText("asdf");
cellValue.setLayoutParams(cellLayoutParams);
cellValue.setTextAppearance(this, R.style.MyText);
tableRow.addView(cellValue);
resultTable.addView(tableRow);
}
resultTable.invalidate();
But it doesn't add anything, and I am sure about that the loop iterates. I don't get any warning/exception in the logcat.
Can you help me please ??
Try to change the LayoutParams for the added Views like this:
TableLayout.LayoutParams rowLayoutParams = new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.WRAP_CONTENT);
TableRow.LayoutParams cellLayoutParams = TableRow.new LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT);

RelativeLayout Elements are incorrectly overlapping

I'm trying to build a part of a Android View Programmatically, but unfortunately I'm having some problems with the RelativeLayout. it makes my Elements overlay on eachother
This is my Code:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.insertnew_layout);
LinearLayout ll = (LinearLayout) findViewById(R.id.container);
ll.setOrientation(LinearLayout.VERTICAL);
TableLayout tl = new TableLayout(this);
tl.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
// fill content
for (int i = 0; i < 3; i++) {
TableRow tr = new TableRow(this);
tr.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
RelativeLayout rl = new RelativeLayout(this);
rl.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
TextView score = new TextView(this);
score.setText(""+i);
RelativeLayout.LayoutParams lpScore = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.FILL_PARENT);
lpScore.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
score.setLayoutParams(lpScore);
TextView description = new TextView(this);
description.setText("this is my description");
RelativeLayout.LayoutParams lpDescription = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.FILL_PARENT);
lpDescription.addRule(RelativeLayout.RIGHT_OF, score.getId());
description.setLayoutParams(lpDescription);
CheckBox checkbox = new CheckBox(this);
RelativeLayout.LayoutParams lpCheckbox = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.FILL_PARENT);
lpCheckbox.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
checkbox.setLayoutParams(lpCheckbox);
rl.addView(score);
rl.addView(description);
rl.addView(checkbox);
tl.addView(rl);
}
ll.addView(tl);
This is what it looks like:
As you can see, the "description" is on top of of the "score".
Here is the same code in xml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/tableLayoutTextEntry" >
<TableRow
android:id="#+id/tableRowTextEntry"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="score" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/score"
android:text="description" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="select" />
</RelativeLayout>
</TableRow>
</TableLayout>
And here is what it looks like in xml:
As you can see, in xml, the toRightOf-command works as expected - the description is to the right of the score
How is that possible? Shouldnt the line
lpDescription.addRule(RelativeLayout.RIGHT_OF, score.getId());
do the same thing?
At the moment you are calling it, score.getId() will return -1 (invalid), because it has not been added yet to the screen with the whole layout processed.
You will have to set the id manually with setId() before calling getId() and it should all work fine.

Programmatically adding TableRow to TableLayout not working

I'm trying to add table rows programmatically following the code here
/* Find Tablelayout defined in main.xml */
TableLayout tl = (TableLayout) findViewById(R.id.SaleOrderLines);
/* Create a new row to be added. */
TableRow tr = new TableRow(this);
tr.setLayoutParams(new TableRow.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
/* Create a Button to be the row-content. */
Button b = new Button(this);
b.setText("Dynamic Button");
b.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
/* Add Button to row. */
tr.addView(b);
/* Add row to TableLayout. */
//tr.setBackgroundResource(R.drawable.sf_gradient_03);
tl.addView(tr, new TableLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
But but nothing is drawn to the screen. (same as one mentioned here)
When i added tr.setBackgroundResource(R.drawable.sf_gradient_03);, the row with the background image is drawn but not the button
Here is my Layout
<!-- Sale Order Lines START -->
<LinearLayout android:id="#+id/SaleOrderLinesArea" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="10dip" android:background="#drawable/sf_gradient_11" >
<LinearLayout android:id="#+id/subHeaderArea" android:padding="10dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
>
<TextView android:id="#+id/screenTitle"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textColor="#color/title_sub" android:textStyle="bold"
android:text="Order Lines" />
</LinearLayout>
<TableLayout android:id="#+id/SaleOrderLines"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="10dip" android:stretchColumns="*">
<TableRow
android:background="#drawable/sf_gradient_13" android:padding="10dip"
>
<TextView android:id="#+id/order_ref_label"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:textColor="#color/fg_prime" android:text="bLA bLA" />
<TextView android:id="#+id/product_label"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textColor="#color/fg_title"
android:text="#string/product" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textColor="#color/fg_title"
android:text="#string/product_quantity" />
</TableRow>
<TableRow android:background="#drawable/sf_gradient_03"
android:paddingLeft="10dip" android:paddingRight="10dip"
>
<TextView android:id="#+id/order_ref_label"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:textColor="#color/fg_prime" android:text="Fooo" />
<Spinner android:id="#+id/product_spinner"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:prompt="#string/customer_prompt">
</Spinner>
<EditText android:id="#+id/product_uom_qty"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:singleLine="true" android:fadingEdge="horizontal" />
</TableRow>
</TableLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:paddingTop="5dip" android:paddingBottom="5dip">
<Button android:id="#+id/add_button" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Add Lines" />
</LinearLayout>
</LinearLayout>
<!-- Sale Order Lines END -->
Got it, every LayoutParams should be of android.widget.TableRow.LayoutParams except one that supplied to tl.addView(...)
/* Find Tablelayout defined in main.xml */
TableLayout tl = (TableLayout) findViewById(R.id.SaleOrderLines);
/* Create a new row to be added. */
TableRow tr = new TableRow(this);
tr.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.FILL_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
/* Create a Button to be the row-content. */
Button b = new Button(this);
b.setText("Dynamic Button");
b.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.FILL_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
/* Add Button to row. */
tr.addView(b);
/* Add row to TableLayout. */
//tr.setBackgroundResource(R.drawable.sf_gradient_03);
tl.addView(tr, new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
Please do note that, may be your code is perfect but the classes you are using are not proper. You may have used import android.view.ViewGroup.LayoutParams , where as the correct class is available from following import statement :
import android.widget.TableRow.LayoutParams
In my case, I changed the width from TableRow.LayoutParams.WRAP_CONTENT to TableRow.LayoutParams.MATCH_PARENT, then it works.
TableRow tableRow = new TableRow(this);
tableRow.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));

Categories

Resources