Setting view height dependent on its width in android in layout xml

Question

Is it possible that a view should make it height same as it's width?

or any other layout for this purpose, because for vector image it's compulsory to provide width and height.

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/googleLoginBtn"
            android:orientation="horizontal"
            android:layout_centerVertical="true">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">


                <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="<height should be equal to the width>"
                    app:srcCompat="@drawable/simple"
                    tools:ignore="MissingPrefix"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Snappy"
                    android:textColor="#FF4081"
                    android:textSize="30dp"
                    android:singleLine="true"
                    android:gravity="center"
                    android:layout_margin="10dp"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Type less, do more. Fastest way to transfer money &amp; make other transactions."
                    android:layout_margin="10dp"/>

            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/simple"
                    tools:ignore="MissingPrefix"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Smart"
                    android:textColor="#FF4081"
                    android:textSize="30dp"
                    android:gravity="center"
                    android:layout_margin="10dp"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Type less, do more. Fastest way to transfer money &amp; make other transactions."
                    android:layout_margin="10dp"/>

            </LinearLayout>
</LinearLayout>

Possible duplicate of [making grid view items square](http://stackoverflow.com/questions/6557516/making-grid-view-items-square) — petey, Apr 19 '16 at 20:25

dipdipdip · Answer 1 · 2020-12-09T09:10:26.000

3

Update:

I would use a ConstraintLayout today and use the property app:layout_constraintDimensionRatio="1:1"

Old Answer:

It's not possible entirely in xml without using a custom ImageView. This would be a solution:

public class SquareImageView extends ImageView {
  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = getMeasuredWidth();
    setMeasuredDimension(width, width);
  }
}

However if your Image is already Square you can use the normal ImageView:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true" />

A third solution would be setting the width and height directly in your Code:

LayoutParams params = imageView.getLayoutParams();
params.height = params.width ;
imageView.setLayoutParams(params);

edited Dec 09 '20 at 09:10

answered Apr 19 '16 at 20:24

dipdipdip

2,326
1
21
31

I am using Vector Image, that's why second solution doesn't fit. – Vivek Kumar Apr 19 '16 at 20:29
One simple question, Does `onMeasure()` function is called everytime the size is changed? – Vivek Kumar Apr 19 '16 at 20:30
`onMeasure` is called every time the parent view needs to change its layout. So yes. It even can be called several times. – dipdipdip Apr 20 '16 at 10:50

score 2 · Answer 2 · answered Apr 19 '16 at 21:00

You should be able to use the Percent support library for this. You can either replace the LinearLayout the ImageViewis inside of with a PercentRelativeLayout and have the other views android:layout_belowor wrap the ImageView in a PercentFrameLayout.

I'm going to assume you've already defined the app namespace in this file as xmlns:app="http://schemas.android.com/apk/res-auto" since I see you using the namespace.

Once you've included the appropriate support library, the PercentFrameLayout approach would look something like this:

   <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

          <android.support.percent.PercentFrameLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="fill_parent"
                app:layout_aspectRatio="100%"
                app:srcCompat="@drawable/simple"
                tools:ignore="MissingPrefix"/>
            </android.support.percent.PercentFrameLayout>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Snappy"
                android:textColor="#FF4081"
                android:textSize="30dp"
                android:singleLine="true"
                android:gravity="center"
                android:layout_margin="10dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Type less, do more. Fastest way to transfer money &amp; make other transactions."
                android:layout_margin="10dp"/>

        </LinearLayout>

score 0 · Answer 3 · answered Oct 17 '19 at 22:31

Just a little update: The PercentFrameLayout class was deprecated in API level 26.1.0. Consider using ConstraintLayout and associated layouts instead. More information here: https://developer.android.com/reference/android/support/percent/PercentFrameLayout

score 0 · Answer 4 · answered Dec 24 '19 at 09:42

use this

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
       int myWidth = (int) (parentHeight * 0.5);
       super.onMeasure(MeasureSpec.makeMeasureSpec(myWidth, MeasureSpec.EXACTLY), heightMeasureSpec);
}

Setting view height dependent on its width in android in layout xml

4 Answers4