Remove arbitrary gap between TableRow in TableLayout

Question

I am using a TableLayout to print nine pictures. For some reason, I am getting a big gap between rows as shown in the image below. I set the background to green so the gaps are easy to see. My TableLayout is created programmatically. How do I fix this problem so that the gap between rows is not so big?

I have already tried tableRowParams.setMargins(0,0,0,0).

BTW: No I don't want to use ListView, etc.

I have been messing around with the code a lot trying to fix the problem. Below is simply the current state of the code:

EDIT: CORRECT IMAGE:

EDIT: the code now will work fine (thanks to @Guian):

public class FacialExpressionImagesTable extends TableLayout {

    public FacialExpressionImagesTable(Context context, List<Bitmap> imageList, int sideDimension, int tableWidth, int tableHeight) {
        super(context);
        setLayoutParams(new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        setBackgroundColor(Color.BLUE);
        setContent(imageList, context, sideDimension);

    }

    private void setContent(List<Bitmap> imageList, Context context, final int sideDimension) {
        final int iHeight = imageList.get(0).getHeight();
        final int iWidth = imageList.get(0).getWidth();
        int ndx = 0;

        for (int r = 0; r < sideDimension; r++) {
            TableRow tableRow = new TableRow(context);
            TableLayout.LayoutParams forRow = new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
            tableRow.setLayoutParams(forRow);
            tableRow.setBackgroundColor(Color.RED);
            TableRow.LayoutParams elementLayout = new TableRow.LayoutParams(iWidth, LayoutParams.WRAP_CONTENT, 1);
            tableRow.requestLayout();
            for (int c = 0; c < sideDimension; c++) {
                    ImageView element = new ImageView(context);
                    element.setLayoutParams(elementLayout);

                    element.setAdjustViewBounds(true);
                    element.setPadding(0, 0, 3, 3);
                    element.setBackgroundColor(Color.GREEN);
                    element.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                    element.setImageBitmap(imageList.get(ndx++));
                    element.requestLayout();
                    tableRow.addView(element);

            }
            addView(tableRow);
        }

    }

}

Answer 1

first : be aware that you exchange width and height in :

new TableRow.LayoutParams(iHeight, iWidth);

But anyway, you can't give your table itesm the size of the bitmap's getHeight and getWidth since they will be resized ( depending on the screen size, screen density etc ... you would have to compute the new size according to density... )

here I think they are reduced. that's why the height of the row is too big.

set your layout params so the element take wrap_content in height and 0dip with a layout_weight to 1 in width;

TableRow.LayoutParams elementLayout = new TableRow.LayoutParams(0, LayoutParams.WRAP_CONTENT, 1 );

then the table row take wrap content as height :

TableLayout.LayoutParams forRow = new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);

if image are not scaled as needed, you'll may have to set a scale type to your ImageViews : ( using setScaleType )

elementLayout.setScaleType(ScaleType.CENTER_INSIDE); // or FIT_CENTER... not quite sure

It should be good, tell if its not.

hope that helps.