Square ImageView

Question

I am trying to show an ImageView which is always square in shape inside a dialog. The dimensions may vary depending upon the resolution of the display(Width in portrait to be precise) but the ImageView is required to form the largest Square possible to accomodate a square image inside it. This is my XML code for the same.

<ImageView
    android:id="@+id/dialog_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerInside"
    android:adjustViewBounds="true"
    />

But the problem is that the Square image is set dynamically at runtime and the ImageView ends up being a rectangle with breadth as the Square Image size. What can i do to achieve the same?

EDIT: To give an idea of what i am trying to achieve is like what is shown when a contact is selected in contacts application and the profile picture is clicked. It zooms out and remains as a square on top of the activity.

Solution 1

Set the Image view height at run time but first get the display width with this code

Display  display = getWindowManager().getDefaultDisplay();
int swidth = display.getWidth();

and now set the height of image view like this

LayoutParams params = eventImage.getLayoutParams();
params.width = LayoutParams.FILL_PARENT;
params.height = swidth ;
eventImage.setLayoutParams(params);

Solution 2

Create a separate class for defining the size dynamically for your ImageView that should inherit ImageView class as shown below:

public class SquareImageView extends ImageView {

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

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

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

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

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

}

}

The setMeasuredDimension(width, width); will automatically set your height as the width.

In xml file use this class as a view in place of ImageView as shown below:

  <com.packagepath.SquareImageView
        android:id="@+id/Imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

Solution 3

you can use :

app:layout_constraintDimensionRatio="1:1"

in this way:

<android.support.constraint.ConstraintLayout
      android:id="@+id/lyt_img_cover"
      android:layout_width="@dimen/image_top_episode"
      android:layout_height="match_parent"
      android:layout_centerInParent="false"
      android:elevation="0dp"
      android:foregroundGravity="center">

        <ImageView

          android:id="@+id/img_episode"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:elevation="7dp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintDimensionRatio="1:1"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          />
    </ImageView>

its layout should be ConstraintLayout

Comments

[Shakti]

Thank you very much for the response. Works like a charm.