CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayout
Vivek Kumar
Vivek Kumar

Reputation: 5040

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

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>

Upvotes: 1

Views: 3690

Answers (4)

dipdipdip
dipdipdip

Reputation: 2556

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);

Upvotes: 3

m.sajjad.s
m.sajjad.s

Reputation: 821

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);
}

Upvotes: 0

Jakub Piga
Jakub Piga

Reputation: 104

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

Upvotes: 0

jqpubliq
jqpubliq

Reputation: 11904

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>

Upvotes: 2

Related Questions