Avoid ImageView from scaling inside a TableRow

Question

Ive got a ImageView inside a TableRow as shown in the xml below. My problem is when ever the row height changes the image would scale up. How do I avoid this ?

I have tried programmatically setting LinearLayout.LayoutParams to no avail. Also tried setting the maxWidth of ImageView as well.

I should also mention I have fixed the header of the table by using the class (using onLayout) as given below.

<?xml version="1.0" encoding="utf-8"?>
<TableRow
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/trTransationTableRow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.ui.components.CustomTextView
        android:id="@+id/tvTRCol1"
        style="@style/transaction_table_row"
        android:layout_width="0dp"
        android:gravity="left|center_vertical"
        android:layout_weight="0.2"/>

    <com.ui.components.CustomTextView
        android:id="@+id/tvTRCol2"
        style="@style/transaction_table_row"
        android:layout_width="0dp"
        android:singleLine="false"
        android:layout_weight="0.4"/>

    <ImageView
        android:id="@+id/ivTRCol3"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_weight="0.2"
        android:maxWidth="10dp"
        android:adjustViewBounds="true"
        android:background="@drawable/table_row_border"/>

    <com.ui.components.CustomTextView
        android:id="@+id/tvTRCol4"
        style="@style/transaction_table_row"
        android:layout_width="0dp"
        android:gravity="right|center_vertical"
        android:layout_weight="0.2"/>

</TableRow>

Scrollable table layout class:

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

    super.onLayout(changed, l, t, r, b);

    List<Integer> colWidths = new LinkedList<Integer>();

    TableLayout header = (TableLayout) findViewById(R.id.tlScrollingTableHeader);
    TableLayout body = (TableLayout) findViewById(R.id.tlScrollingTableBody);

    // Measure content width first
    for (int rownum = 0; rownum < body.getChildCount(); rownum++) {
        TableRow row = (TableRow) body.getChildAt(rownum);
        int countCells = 0;
        for (int cellnum = 0; cellnum < row.getChildCount(); cellnum++) {
            View cell = row.getChildAt(cellnum);
            if (cell.getVisibility() == VISIBLE) {
                Integer cellWidth = cell.getWidth();
                if (colWidths.size() <= countCells) {
                    colWidths.add(cellWidth);
                } else {
                    Integer current = colWidths.get(countCells);
                    if (cellWidth > current) {
                        colWidths.remove(countCells);
                        colWidths.add(countCells, cellWidth);
                    }
                }
                countCells++;
            }
        }
    }

    // Figure out if header needs resizing first based on widths
    TableRow headerRow = (TableRow) header.getChildAt(0);
    for (int count = 0; count < colWidths.size(); count++) {
        if (headerRow.getChildAt(count).getWidth() >= colWidths.get(count)) {
            colWidths.remove(count);
            colWidths.add(count, headerRow.getChildAt(count).getWidth());
        }
    }

    // Then apply to header
    if (colWidths.size() == 4) {
        for (int cellnum = 0; cellnum < headerRow.getChildCount(); cellnum++) {
            View cell = headerRow.getChildAt(cellnum);
            TableRow.LayoutParams params = (TableRow.LayoutParams) cell.getLayoutParams();
            params.width = colWidths.get(cellnum);
        }
    }
}

I'm dynamically setting the ImageView src. As you can see it can be different images. — nixgadget, Nov 09 '15 at 07:25
"when ever the row height changes the image would scale up" - I'm not 100% sure but I think it has to do that, because you set android:height="match_parent". You set a maximum width there, can't you do the same for the height? — Bö macht Blau, Nov 09 '15 at 07:48
or look at this in imageview of your xml.. `android:background="@drawable/table_row_border"` `android:layout_height="match_parent"` If you are using weight than use it like wait as other views by defining width 0 and wait .2 — SRB Bans, Nov 09 '15 at 08:03
cant really set a max height since i made the 2nd column singleLine="false" — nixgadget, Nov 09 '15 at 08:14

score 1 · Accepted Answer · answered Nov 09 '15 at 10:42

After a little bit of trial and error I found the solution as below. The magic is behind scaleType="centerInside" but need to make sure both layout_width and layout_height are set to wrap_content. I also have LinearLayout to get stuff like background working. Hope this helps someone

<LinearLayout
    android:id="@+id/llTRCol3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="0.2"
    android:gravity="center"
    android:visibility="gone"
    android:background="@drawable/table_row_border">
    <ImageView
        android:id="@+id/ivTRCol3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:scaleType="centerInside"/>
</LinearLayout>

Avoid ImageView from scaling inside a TableRow

1 Answers1