Table row Image size problems - android

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>

Related

android - setting LayoutParams to View elements programmatically

I want that the buttons had identical sizes and table was fully filled the buttons. But the buttons have a different size, what do I wrong in?
My xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="horizontal" >
<LinearLayout
</LinearLayout>
<TableLayout
android:id="#+id/mainTableL"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="40dp" >
</TableLayout>
</LinearLayout>
My code:
layoutParams = new TableRow.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1.0f);
mainTableLayout = (TableLayout) findViewById(R.id.mainTableL);
tableRow = new TableRow[VALUE_ROWS];
btn = new Button[VALUE_ROWS*VALUE_COLUMNS];
for (int indexRow = 0; indexRow < VALUE_ROWS; indexRow++){
tableRow[indexRow] = new TableRow(this);
tableRow[indexRow].setLayoutParams(new TableRow.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1.0f));
for (int indexColumn = 0; indexColumn < VALUE_COLUMNS; indexColumn++){
btn[countBtn] = new Button(this);
btn[countBtn].setLayoutParams(layoutParams);
btn[countBtn].setId(countBtn);
btn[countBtn].setBackgroundResource(R.drawable.fon);
tableRow[indexRow].addView(btn[countBtn],layoutParams);
countBtn++;
}
mainTableLayout.addView(tableRow[indexRow], layoutParams);
}
I am sorry for my pure english.
Thank you
I'm not sure if changing this will help you, but this definitely should be fixed. For table rows you should set TableLayout.LayoutParams instead of TableRow.LayoutParams:
tableRow[indexRow].setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1.0f));
and later when you add a row, don't specify layoutParams:
mainTableLayout.addView(tableRow[indexRow]);
Also note that specifying size for rows doesn't have any effect, their width is set to MATCH_PARENT and the height - to WRAP_CONTENT (see the doc). And similar with buttons, TableRow sets their width to WRAP_CONTENT and the height - to MATCH_PARENT regardless of what you specify in the layout params.

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?)

Positioning ImageView in two lines programmatically

I have a code which generate several ImageView and put it on Layout.
for (int i = 0; i < NUMBER_OF_MATCHES; i++) {
imageView = new ImageView(this);
if (random.nextBoolean()) {
imageView.setImageResource(R.drawable.match);
} else {
imageView.setImageResource(R.drawable.match_inverse);
}
gameLinearLayout.addView(imageView, 0, params);
}
But all images are in one line. I want to place it in two lines. Which layout to use and how to fix code for working correctly?
If I understand correctly, you want 2 seperate rows of images.
So we need a base LinerLayout with a vertical orientation to hold each row, while each row consists of a LinerLayout with a horizontal orientation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</LinearLayout>
look here for explanation why it is happening:
Place two ImageViews programmatically
and look here for explanation to the last answer in this thread which talking about RelativeLayout Rules:
How to set RelativeLayout layout params in code not in xml
Try out as below:
//LinearLayOut Setup
LinearLayout linearLayout= new LinearLayout(this);
linearLayout.setOrientation(LinearLayout.VERTICAL);
linearLayout.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
for (int i = 0; i < NUMBER_OF_MATCHES; i++)
{
//ImageView Setup
ImageView imageView = new ImageView(this);
//setting image resource
if (random.nextBoolean()) {
imageView.setImageResource(R.drawable.match);
} else {
imageView.setImageResource(R.drawable.match_inverse);
}
//setting image position
imageView.setLayoutParams(linearLayout);
//adding view to layout
linearLayout.addView(imageView);
}

How can I get an Android TableLayout to fill the parent in landscape mode?

I am using a TableLayout in my application. It contains four TableRows each containing four ImageViews. The behavior I want is to scale the layout to fit the shortest dimension.
It works fine in portrait mode but fails miserably in landscape mode.
From the documentation it looks like this is because the TableRow layout_height is always set to WRAP_CONTENT. While I can set the dimensions of the individual Views, the TableLayout won't render at all if I set the View layout_height to FILL_PARENT.
I feel like there is something simple I am missing. Is there a way to get the TableLayout with TableRows to scale to fit the height in landscape mode?
XML Layout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="*">
</TableLayout>
Java:
public class Example extends Activity {
private TableLayout mTable;
private int[] mDrawableIds = { R.drawable.draw01, R.drawable.draw02, R.drawable.draw03, R.drawable.draw04, R.drawable.draw05, R.drawable.draw06, R.drawable.draw07, R.drawable.draw08, R.drawable.draw09, R.drawable.draw10, R.drawable.draw11, R.drawable.draw12, R.drawable.draw13, R.drawable.draw14, R.drawable.draw15, R.drawable.draw16 };
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mTable = (TableLayout)findViewById(R.id.table);
for (int j=0; j<4; j++) {
TableRow tr = new TableRow(this);
tr.setLayoutParams(new ViewGroup.LayoutParams( LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
for (int i=0; i<4; i++) {
ImageView iv = new ImageView(this);
iv.setImageResource(mDrawableIds[j*4+i]);
iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
iv.setAdjustViewBounds(true);
tr.addView(iv);
}
mTable.addView(tr);
}
}
}
Change your XML layout to:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table"
android:layout_width="fill_parent"
android:layout_height="160dp"
android:shrinkColumns="*">
</TableLayout>
That should make it take up whole screen's height regardless of orientation. See density independent pixels
I did figure out how to do this. Basically, the part that wasn't working the way I wanted was the TableRows. When I changed to landscape, the first two TableRows weren't resizing at all and the third was consuming the remainder of the space. The fourth row wasn't displaying at all.
I figured out that I needed to set the layout_weight of the TableRows to equal values. But, there is no method to do that at runtime, so I built the following layout file, which I called row.xml:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/trow"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1">
</TableRow>
Then I used a LayoutInflater to build the row at runtime with the properties I wanted:
mTable = (TableLayout)findViewById(R.id.table);
LayoutInflater inflater = getLayoutInflater();
for (int j=0; j<4; j++) {
View row = inflater.inflate(R.layout.row, mTable,false);
TableRow tr = (TableRow)row.findViewById(R.id.trow);
for (int i=0; i<4; i++) {
View image = inflater.inflate(R.layout.image, tr, false);
ImageButton ib = (ImageButton)image.findViewById(R.id.image);
ib.setAdjustViewBounds(true);
ib.setImageResource(mCardIds[j*4+i]);
tr.addView(ib);
}
mTable.addView(tr);
}
Now the TableRows are resizing properly on rotation. I changed the ImageViews to ImageButtons because I decided to add some onClick behavior and I am building those buttons via a separate xml file, but I don't think those details are relevant to the resizing issue.
I tried the accepted solution here but it did not work. What worked is as below:
TableRow tr = new TableRow(this);
TableLayout.LayoutParams pRowTop = new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT);
pRowTop.weight = 1;
mTable.addView(tr, pRowTop);

Categories

Resources