Adding a dynamic TableLayout with borders in an Android app

I am creating an Android application. This Android application will have objects that are dynamic. These objects are Places with an address or Lat / Long and the distance from the current location and ETA. I would like to add objects with TableLayout with borders, but I need to be able to dynamically add rows as the number of places increases.

I understand a little how to do this for a fixed, fixed number of elements in xml, but what would be the best way when the number of objects comes from an Activity.java file?

Below is a screenshot of the TableLayout that I would like:

Table layout

Thus, the object will be a place with an address, distance and direction.

+7
source share
2 answers

but I need to be able to dynamically add rows as the number of places increases.

It is not difficult, when you have a new object, add a TableRow with data to the TableLayout .

I understand a little how to do this for a fixed, fixed number of elements in xml, but what would be the best way when the number of objects comes from an Activity.java file?

I do not think that there is a better way (or what you think is the best way). You either:

  • Insert fake views to act as delimiters. It would be easier to implement visually, but it will also increase the memory consumption of your application, with bad consequences if the number of lines is large. (one)
  • Or use drawables for the background to simulate borders (for example, an image with nine patches). This would be easier than inserting additional views, but you need a bit more talent to make them look good. (2)

Some examples for your image:

(one)

 private static final int DIVIDER_SIZE = 2; // rowsCount the number of rows to add to the TableLayout private void buildOldSchool(TableLayout table, int rowsCount) { View divider; for (int i = 0; i < rowsCount; i++) { TableRow row = new TableRow(this); for (int j = 0; j < 7; j++) { if (j % 2 == 0) { divider = new View(this); divider.setLayoutParams(new TableLayout.LayoutParams( DIVIDER_SIZE, TableLayout.LayoutParams.MATCH_PARENT)); divider.setBackgroundColor(Color.GREEN); row.addView(divider, new TableRow.LayoutParams( DIVIDER_SIZE, TableRow.LayoutParams.MATCH_PARENT)); continue; } TextView tv = new TextView(this); tv.setText("DX"); // dummy data row.addView(tv, new TableRow.LayoutParams( TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT)); } divider = new View(this); divider.setLayoutParams(new TableLayout.LayoutParams( TableLayout.LayoutParams.MATCH_PARENT, DIVIDER_SIZE)); divider.setBackgroundColor(Color.GREEN); if (i == 0) { table.addView(divider); divider = new View(this); divider.setLayoutParams(new TableLayout.LayoutParams( TableLayout.LayoutParams.MATCH_PARENT, DIVIDER_SIZE)); divider.setBackgroundColor(Color.GREEN); } table.addView(row); table.addView(divider); } } 

(2) or with images:

 private void buildWithDrawables(TableLayout table, int rowsCount) { for (int i = 0; i < rowsCount; i++) { TableRow row = new TableRow(this); row.setBackgroundResource(i == 0 ? R.drawable.firstrow : R.drawable.normalrow); for (int j = 0; j < 3; j++) { TextView tv = new TextView(this); tv.setBackgroundResource(j == 2 ? R.drawable.extra : R.drawable.cell); tv.setText("DX"); row.addView(tv, new TableRow.LayoutParams( TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT)); } table.addView(row); } } 

If the images:

  • R.drawable.cell :

  • R.drawable.extra (visually transparent drawing that repeats the nine patch described above):

  • R.drawable.normalrow :

  • R.drawable.firstrow :

Ignore my design skills.

If you anticipate a large number of rows, I would advise you to use a ListView , which you could easily make to look like a table with borders.

+7
source

Could not determine the vertical line, but you can rely on

 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ScrollView sv = new ScrollView(this); TableLayout ll=new TableLayout(this); HorizontalScrollView hsv = new HorizontalScrollView(this); for(int i=1;i<5;i++) { TableRow tbrow=new TableRow(this); for(int j=1;j<=3;j++) { TextView tv1=new TextView(this); tv1.setText("Element :"+ i + "" + j); tbrow.addView(tv1); } ll.addView(tbrow); View v = new View(this); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 5); v.setLayoutParams(params); v.setBackgroundColor(getResources().getColor(android.R.color.white)); ll.addView(v); } hsv.addView(ll); sv.addView(hsv); setContentView(sv); } 
+1
source

All Articles