Search code examples
androidandroid-layoutandroid-imageviewandroid-imageandroid-drawable

How proportionally scale any image (of imageview) with width equal to "match_parent"?


I may have different drawables (large or small) and I always spans the width (match_parent) and increase or decrease the height proportionally. Maintaining the ratio.

How is this possible?

I tried with:

<ImageView
            android:id="@+id/iv_TEST"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
android:adjustViewBounds="true"
            android:scaleType="fitXY"
            android:src="@drawable/test" />

The problem is that it increases or decreases the width and it looks bad.

enter image description here


Solution

  • Fixed. To correct this problem you need to do:

    1. Custom ImageView
    2. Set drawable to "android:src", from code (imageview.setImageResource())

    Replace ImageView by ResizableImageView:

    <"the name of your package".ResizableImageView
                android:id="@+id/iv_test"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                />
    

    ResizableImageView.class

        public class ResizableImageView extends ImageView {
            public ResizableImageView(Context context, AttributeSet attrs) {
                super(context, attrs);
            }
    
            public ResizableImageView(Context context) {
                super(context);
            }
    
            @Override
            protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
                Drawable d = getDrawable();
                if (d == null) {
                    super.setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
                    return;
                }
    
                int imageHeight = d.getIntrinsicHeight();
                int imageWidth = d.getIntrinsicWidth();
    
                int widthSize = MeasureSpec.getSize(widthMeasureSpec);
                int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    
                float imageRatio = 0.0F;
                if (imageHeight > 0) {
                    imageRatio = imageWidth / imageHeight;
                }
                float sizeRatio = 0.0F;
                if (heightSize > 0) {
                    sizeRatio = widthSize / heightSize;
                }
    
                int width;
                int height;
                if (imageRatio >= sizeRatio) {
                    // set width to maximum allowed
                    width = widthSize;
                    // scale height
                    height = width * imageHeight / imageWidth;
                } else {
                    // set height to maximum allowed
                    height = heightSize;
                    // scale width
                    width = height * imageWidth / imageHeight;
                }
    
                setMeasuredDimension(width, height);
            }
        }
    

    Solution: I need to size the imageView inside my table row programatically