How do I make android imageview square?

Question

I'm using an ImageView in an Android project.

Width: match_parent Height: wrap_content

then I scale it to fill_XY, but the image is not square yet... what can I do?

Answer 1

I want to make a small addition to the accepted answer. In my case, the goal was:

1. to display a square image by filling the ConstraintLayout
2. An image with W > H with padding above and below
3. An image with H > W with padding right and left To achieve this this line was missing:

app:layout_constraintBottom_toBottomOf="parent"

The complete section:

<androidx.cardview.widget.CardView
    android:id="@+id/preview_img_cv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentEnd="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">

    <ImageView
        android:id="@+id/attached_image_iv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scaleType="fitCenter"
        android:src="@drawable/placeholder_horizontal"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

It could be done like this:

<?xml version="1.0" encoding="utf-8"?>

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

<ImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Answer 3

The best way for square image is use ConstraintLayout with constraintDimensionRatio Without give fix height/width.

  <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

Answer 4

Create your own imageView. Here is one example

public class SquareImageView extends AppCompatImageView {
    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int size;
        if(MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY ^ MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY) {
            if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY)
                size = width;
            else
                size = height;
        }
        else
            size = Math.min(width, height);
        setMeasuredDimension(size, size);
    }
}

Answer 5

You can always try setting your own dimensions:

android:width="50dp"
android:height="50dp"

You'll force it to be exact square that way but you'll need to find the right dimensions yourself. You could also try adding:

android:scaleType="fitXY"

Additional info

Actually setting scaleType to fitXY is usually very bad. Please check out ImageView documentation and use the ScaleType that is most suitable for your use case. If you're not sure which one is best for you, try them all and see how they affect your Image.

Answer 6

Determine your width/height (for example 40dp), & use a centerCrop scaleType

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop" 
/>

Answer 7

Try creating your own imageview by extending ImageView. This is how I do it:

Icon.java file

public class Icon extends ImageView {

public Icon(final Context context) {
    super(context);
}

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

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

@Override
protected void onMeasure(int width, int height) {
    super.onMeasure(width, height);
    int measuredWidth = getMeasuredWidth();
    int measuredHeight = getMeasuredHeight();
    if (measuredWidth > measuredHeight) {
        setMeasuredDimension(measuredHeight, measuredHeight);
    } else {
        setMeasuredDimension(measuredWidth, measuredWidth);

    }

}

}

xml file

<com.mypackage.Icon
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:src="@drawable/screen" />

Answer 8

Use a custom view and override the onMeasure() method.

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

    int width = getMeasuredWidth();
    setMeasuredDimension(width, width);
}

Answer 9

Use

android:scaleType="fitCenter"

or

imageView.setScaleType(ScaleType.FIT_CENTER);