Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set both min and max size for an ImageView in Android

I would like so specify both min. width/height and max. width/height for an ImageView. The image should be scaled to fit.

Doing this:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="100dp"
    android:maxWidth="200dp"
    android:minHeight="100dp"
    android:maxHeight="200dp"
    android:src="@drawable/ic_launcher" />

the min. width and height perform as they should, but max. width and height are ignored.

If I set android:adjustViewBounds="true":

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    android:minWidth="100dp"
    android:maxWidth="200dp"
    android:minHeight="100dp"
    android:maxHeight="200dp"
    android:src="@drawable/ic_launcher" />

than, the max. width and height perform as they should, but min. width and height are ignored.

Is there a way to have both?

like image 667
muscardinus Avatar asked Mar 28 '12 20:03

muscardinus


People also ask

How do you change the size of a picture on android?

Tap the image you want to adjust. You can adjust the size of an image or rotate it: Resize: Touch and drag the squares along the edges. Rotate: Touch and drag the circle attached to the image.

Can ImageView be clickable?

Using clickable imagesYou can turn any View , such as an ImageView , into a button by adding the android:onClick attribute in the XML layout. The image for the ImageView must already be stored in the drawable folder of your project.

What is adjustViewBounds in android?

android:adjustViewBounds—If set to true, the attribute adjusts the bounds of the ImageView control to maintain the aspect ratio of the image displayed through it.


2 Answers

In the end, I created my own view that extands ImageView and overwrites onMeasure():

public class ResizingImageView extends ImageView {

    private int mMaxWidth;
    private int mMaxHeight;

    public ResizingImageView(Context context) {
        super(context);
    }

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

    public ResizingImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void setMaxWidth(int maxWidth) {
        super.setMaxWidth(maxWidth);
        mMaxWidth = maxWidth;
    }

    @Override
    public void setMaxHeight(int maxHeight) {
        super.setMaxHeight(maxHeight);
        mMaxHeight = maxHeight;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        Drawable drawable = getDrawable();
        if (drawable != null) {

            int wMode = MeasureSpec.getMode(widthMeasureSpec);
            int hMode = MeasureSpec.getMode(heightMeasureSpec);
            if (wMode == MeasureSpec.EXACTLY || hMode == MeasureSpec.EXACTLY) {
                return;
            }

            // Calculate the most appropriate size for the view. Take into
            // account minWidth, minHeight, maxWith, maxHeigh and allowed size
            // for the view.

            int maxWidth = wMode == MeasureSpec.AT_MOST
                    ? Math.min(MeasureSpec.getSize(widthMeasureSpec), mMaxWidth)
                    : mMaxWidth;
            int maxHeight = hMode == MeasureSpec.AT_MOST
                    ? Math.min(MeasureSpec.getSize(heightMeasureSpec), mMaxHeight)
                    : mMaxHeight;

            int dWidth = Helpers.dipsToPixels(drawable.getIntrinsicWidth());
            int dHeight = Helpers.dipsToPixels(drawable.getIntrinsicHeight());
            float ratio = ((float) dWidth) / dHeight;

            int width = Math.min(Math.max(dWidth, getSuggestedMinimumWidth()), maxWidth);
            int height = (int) (width / ratio);

            height = Math.min(Math.max(height, getSuggestedMinimumHeight()), maxHeight);
            width = (int) (height * ratio);

            if (width > maxWidth) {
                width = maxWidth;
                height = (int) (width / ratio);
            }

            setMeasuredDimension(width, height);
        }
    }
}

This view can now be used like:

<my.package.ResizingImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="100dp"
    android:maxWidth="200dp"
    android:minHeight="100dp"
    android:maxHeight="200dp"
    android:src="@drawable/ic_launcher" />

This works as I wanted, but shouldn't there be an easier solution?

like image 200
muscardinus Avatar answered Sep 28 '22 23:09

muscardinus


This used to be pretty much impossible with just XML, but now with ConstraintLayout, it's quite simple.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_min="100dp"
        app:layout_constraintWidth_max="200dp"
        app:layout_constraintHeight_min="100dp"
        app:layout_constraintHeight_max="200dp"
        app:layout_constrainedWidth="true"
        app:layout_constrainedHeight="true"
        android:scaleType="centerCrop" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can use a scaleType of fitXY or centerCrop; others will not force the image to fit the ImageView.

like image 22
Leo Aso Avatar answered Sep 29 '22 00:09

Leo Aso