Question

I have a ListView whose items are ImageViews, for the sake of discussion. I want the image to scale to the width of the ListView‘s rows, and maintain it’s aspect ratio. here’s a simplified version of the ListView‘s item layout,

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:padding="4dp" >

        <FrameLayout
            android:id="@+id/page_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible" >

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                android:src="@drawable/some_image" />
        </FrameLayout>
    </FrameLayout>

</LinearLayout>

the ImageView‘s width is match_parent, and all ancestors of it are the same. Layout designer shows that the ImageView‘s dimensions span the entire width, but the image inside does not.

The image is scaling correctly. The problem is that the height of the list view row is such that the width can’t scale to the right size. If I use fitXY, it does scale the width, but then the aspect ratio is incorrect.

Any ideas?

Answer 1

I couldn’t find any way to accomplish this without creating a custom view. in a nutshell, the custom view sets it’s own dimensions to the real (not scaled) dimensions of the drawable behind it.

public class ResizableImageView extends ImageView {

    public static interface OnSizeChangedListener {

        void onSizeChanged(int width, int height);
    }

    private OnSizeChangedListener onSizeChangedListener = null;

    public ResizableImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
        setMeasuredDimension(width, height);
        if (onSizeChangedListener != null) {
            onSizeChangedListener.onSizeChanged(width, height);
        }
    }

    public void setOnSizeChangedListener(OnSizeChangedListener listener) {
        this.onSizeChangedListener = listener;
    }
}

In my case I needed to obtain the resized value in order to size the other views, hence the listener interface.