Develop Reference

How do I achieve a simple TableLayout in Android?

The table I'm looking for has a number of rows, each of which has several columns which need to have their size automatically generated so that they display at the maximum width required to display them, and one of which needs to expand/contract to fill the remaining space.
I've tried to accomplish this by flagging the expanding/contracting column as shrinkable and stretchable. But this doesn't seem to work - when the table is wider than the available space, the column is not being shrunk, and instead the table is cut off on the right hand side, with several columns not visible.
Any pointers as to where I could be going wrong with this?

Recently I had to face a similar requirement for an app and I finally could get it working. In my case I needed to create one TableLayout and add TableRows dynamically depending on the screen's width. The Views added to the TableRow were TextViews with the layout_weight property set, so I had to play around with the number of items shown per row, and finally could tune up the desired layout.
I'll paste my code and explain what I'm doing at each step:
// The following code block is to dynamically get the width of the screen.
// The width param will be reachable within the `params.width` property
final Display display = getWindowManager().getDefaultDisplay();
final Point size = new Point();
display.getSize(size);
final WindowManager.LayoutParams params = getWindow().getAttributes();
// So now I have to take the TableLayout and add TableRows dynamically. I'll be adding
// TextViews to the row with the texts present at myItems
TableLayout myTableLayout = (TableLayout) findViewById(R.id.table_layout);
TableRow currentRow = new TableRow(this);
int currentWidth = 0;
for (final String item : myItems) {
// Define the TextView
final TextView tv = new TextView(this);
tv.setBackground(getResources().getDrawable(R.drawable.rounded_edges));
tv.setGravity(Gravity.CENTER);
tv.setText(item);
...
// This one line is very important, as you're defining the layout params.
// Make sure that you add the 1f parameter as it represents the weight
// Each TextView will have the same weight so they will have the same width
// within the row
tv.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT, 1f));
...
// Now you check if this cell still fits the TableRow
// I use the 90% because the TableLayout won't ever be 100% of the screen width
if (currentWidth + tv.getWidth() < ((int) params.width * 0.9)) {
// It fits!
currentRow.addView(tv);
currentWidth = currentWidth + tv.getWidth();
}
else {
// It doesn't fit. Just add the current row to the TableLayout and go on.
myTableLayout.add(currentRow);
currentRow = new TableRow(this);
currentRow.addView(tv);
currentWidth = tv.getWidth();
}
}
// It might happen that once I've ended processing the texts, there's still
// a row pending to add, so if it has any child I add it
if (currentRow.getChildCount() > 0)
myTableLayout.add(currentRow);

You can try using the layout weight for the cells. Something like shown below
private static int COLUMN_WEIGHT_1 = 3;
private static int COLUMN_WEIGHT_2 = 1;
private static int COLUMN_WEIGHT_3 = 2;
// this column will stretch to fill the space
private static int COLUMN_WEIGHT_4 = 0;
private void populatePriceTable(){
TableLayout prices = (TableLayout)findViewById(R.id.pricetable);
prices.setStretchAllColumns(true);
prices.bringToFront();
TableRow tr = new TableRow(this);
TextView c1 = new TextView(this);
c1.setText("A cell");
TextView c2 = new TextView(this);
c2.setText("A large cell");
c2.setGravity(Gravity.CENTER_HORIZONTAL);
TextView c3 = new TextView(this);
c3.setText("Another large cell");
TextView c4 = new TextView(this);
c4.setGravity(Gravity.RIGHT);
c4.setText("Filler");
c1.setLayoutParams( new TableRow.LayoutParams( 0 , android.view.ViewGroup.LayoutParams.WRAP_CONTENT, COLUMN_WEIGHT_1) );
c2.setLayoutParams( new TableRow.LayoutParams( 0 , android.view.ViewGroup.LayoutParams.WRAP_CONTENT, COLUMN_WEIGHT_2) );
c3.setLayoutParams( new TableRow.LayoutParams( 0 , android.view.ViewGroup.LayoutParams.WRAP_CONTENT, COLUMN_WEIGHT_3) );
c4.setLayoutParams( new TableRow.LayoutParams( 0 , android.view.ViewGroup.LayoutParams.WRAP_CONTENT, COLUMN_WEIGHT_4) );
tr.addView(c1);
tr.addView(c2);
tr.addView(c3);
tr.addView(c4);
tr.setLayoutParams(new TableRow.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
prices.addView(tr);
}

You can just have a ListView and have a seperate xml layout file which is actually a Table layout.
so as in listview you can handle as much rows you want and table layout will make it elastic.

Write Seperate XML layout for row like this....and use wrap content/fill parent attribute according to text size
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:background="#FFFFFF"
android:id="#+id/row_calender">
<TextView
android:id="#+id/tv_ac_sn"
android:layout_width="35dp"
android:layout_height="fill_parent"
android:background="#drawable/border"
android:gravity="center"
android:padding="5dp"
android:textColor="#000000" />
<TextView
android:id="#+id/tv_ac_day"
android:layout_width="85dp"
android:layout_height="fill_parent"
android:background="#drawable/border"
android:gravity="center"
android:padding="5dp"
android:textColor="#000000" />
<TextView
android:id="#+id/tv_ac_date"
android:layout_width="85dp"
android:layout_height="fill_parent"
android:background="#drawable/border"
android:gravity="center"
android:padding="5dp"
android:textColor="#000000" />
<TextView
android:id="#+id/tv_ac_event"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/border"
android:gravity="center"
android:padding="5dp"`
android:textColor="#000000" />
</TableRow>

TableLayout inside HorizontalScrollView adds padding when multiple rows are added to the Table

I have a TableLayout inside a HorizontalScrollView. When I add a single row of images, the images are side by side, no extra padding.
But when I add another row, and the images scale down, the TableLayout creates extra padding horizontally around each cell, but not vertically.
Here is my code:
TableLayout grid = (TableLayout) deckBuilder.findViewById(R.id.grid);
for (int j = 0; j < 3; ++j) {
TableRow testRow = new TableRow(this);
\\Each row has the same weight
testRow.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.MATCH_PARENT, 1f));
for (int i = 0; i < 20; ++i) {
ImageView testImage = new ImageView(this);
testImage.setImageResource(R.test_image);
testRow.addView(testImage);
}
grid.addView(testRow);
}
And here is my xml:
<HorizontalScrollView
android:id="#+id/horizontalscroll"
android:layout_width="wrap_content"
android:layout_height="1dip"
android:scrollbars="none"
android:overScrollMode="never">
<TableLayout
android:id="#+id/grid"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
</TableLayout>
</HorizontalScrollView>

Edit:
Sorry mis-read the code.
Solution:
set the width/height of your image views to wrap_content. You do this via the
LayoutParams object:
http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
See this question for an example:
Show ImageView programmatically
//ImageView Setup
ImageView imageView = new ImageView(this);
//setting image resource
imageView.setImageResource(R.drawable.play);
//setting image position
imageView.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
Look at the docs here:
http://developer.android.com/reference/android/widget/ImageView.html
Specifically look at scaleType:
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I think one of the options there should resolve this (maybe...fitXY?)

access the weight attribute in code

I have the following code within my layout xml file
<RelativeLayout
android:id="#+id/contentTextViewLayout"
android:layout_weight="9"
android:layout_width="fill_parent"
android:layout_height="0dip">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
How do I fetch the value of layout_weight attribute of the RelativeLayout in my code?

Why not instead just get the width of the relative layout, then set the width of the edittext to a percentage of the layout width.
int i = relativelayout.getWidth();
int x = //any number, depending on how wide you what your text view
textview.setWidth(i/x);

You have to use RelativeLayout.LayoutParams
Try the following :
RelativeLayout r = ((RelativeLayout)(findViewById(R.id.contentTextViewLayout)));
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT);
params.weight = 1.0f;
r.setLayoutParams(params);
params.weight = 1.0f can be changed as per your desire.

Android set dynamically elements in RelativeLayout

Hi I got a problem with the RelativeLayout. The idea is to define a title bar in the XML code on top of the screen and then add a textview element BELOW this bar on the left side but when I add this TextView in the java code it is always displayed in the top left corner of the display (means it is set over the title bar). Anyone know what I'm doing wrong?
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/main">
<Button
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
</ScrollView>
RelativeLayout rl = (RelativeLayout) this.findViewById(R.id.main);
for (int i=0; i<=5; i++) {
TextView tv = new TextView(this);
tv.setId(i);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT );
if (i == 0)
params.addRule(RelativeLayout.BELOW, R.id.title);
else
params.addRule(RelativeLayout.BELOW, i-1);
rl.addView(tv, params);
}

I think you have to add an ID to the textview as well, even though you won't have to reference it. Also you can addView and set parameters in one call:
tv.setId(123);
params.addRule(RelativeLayout.BELOW, R.id.title);
rl.addView(tv, params);

Table row Image size problems

I want to put one image on the beginning of each row in my application . The problem is that it shrinks the image too much . I want to make it occupy the whole space .
main.xml :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:scrollbars="vertical"
>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:id="#+id/tableView"
android:layout_height="fill_parent"
android:layout_weight=".90"
android:stretchColumns="1"
></TableLayout>
</ScrollView>
This is how I add the image :
TableLayout tableView = (TableLayout) findViewById(R.id.tableView);
TableRow row = new TableRow(this);
ImageView im;
Bitmap bmp;
im = new ImageView(this);
bmp=getbmp(s);
im.setImageBitmap(bmp);
row.addView(im, new TableRow.LayoutParams(70, 30));
tableView.addView(row, new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
If I change the parameters from TableRow.LayoutParams(70, 30)); the image stays the same , only the row gets bigger/smaller. Also , the image could get smaller if I make those parameters small enough but that is not what I want to do . I don't need necessarily the whole picture , a cropped zoomed in one that fills that space would be nice too . This is an example image from the website . If I put the image like this : row.addView(im); the image gets too big , and there is no more space for the text .

May be it's helpful to you
TableLayout tableView = (TableLayout) findViewById(R.id.tableView);
TableRow row = (TableRow) inflater.inflate(R.layout.tablerow, tableView, false);
ImageView imgDis = (ImageView) row.findViewById(R.id.spinnerEntryContactPhoto);
imgDis.setPadding(5, 5, 5, 5);
imgDis.setAdjustViewBounds(true);
// set row height width
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.FILL_PARENT, 50);
params.topMargin = 0;
params.bottomMargin = 0;
params.leftMargin = 0;
params.rightMargin = 0;
// If you want to set margin of row
tableView.addView(row, params);
tablerow.xml
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/spinnerEntryContactPhoto"
android:layout_gravity="center_vertical"
android:layout_width="70dip"
android:layout_height="30dip"/>
</TableRow>