Layout width equal height

Question

Is there a method to have the height depending from the width in my xml?

I have some Buttons in a linear layout. The button's widths depending from the device because they fill the screen horizontally. I want to have square buttons and this is my problem. Is there one can help me?

<Button
            android:id="@+id/b_0xa"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clickable="false"
            android:text="@string/b_0xa" />

You can set the default dimensions to "wrap_content" via xml initially, and when your Activity starts get the display height and width of the button(s) and programmatically change the dimensions based on device size from there — Jade Byfield, Jan 26 '13 at 19:12

score 4 · Answer 1 · answered Apr 03 '20 at 04:31

To make the height of view equals to width of view, can use ConstraintLayout

 app:layout_constraintDimensionRatio="1:1"

1 before : is for width

1 after : is for height

Please try below code:

<?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="match_parent"
    tools:context=".MainActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Button"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The output of above code is:

Swayam · Answer 2 · 2013-01-26T19:19:29.760

You can do it easily programatically in your Java code.

Get the width of the button dynamically [using int x = mButton.getWidth()], and then use the value returned to set the height [mButton.setHeight(x)].

P.S. : It is advisable to use LayoutParams to set the height and width of any View. So, instead of using setHeight(), you should use setLayoutParams().

mButton.setLayoutParams(new LinearLayout.LayoutParams(x, x));

score 0 · Answer 3 · answered Oct 06 '16 at 15:56

You should change the values given to the android:layout_width and android:layout_height, by assigning fixed values to them

<Button
            android:id="@+id/b_0xa"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:clickable="false"
            android:text="@string/b_0xa" />

Assigning fixed values to them makes sure that no matter the screen size, your button stays the same, since the unit used is the dp. Make sure the values you assign are the same since you want a square.

score 0 · Answer 4 · answered Oct 06 '16 at 16:22

In this scenario, I would recommend using layout_weight for your height attribute, it will then assign a proportional weight to the button that will scale on different screen sizes:

<Button
        android:id="@+id/b_0xa"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".4"
        android:clickable="false"
        android:text="@string/b_0xa" />

In order for this approach to work, you must apply a weight to the height of other views in the layout. The total weight must equal 1, therefore you will have to play around with the layouts and weights to achieve the optimal design.

score 0 · Answer 5 · edited May 23 '17 at 12:24

As I explained here if you want to do it 100% from XML you can use a PercentRelativeLayout and do the following:

<android.support.percent.PercentRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        app:layout_aspectRatio="100%"
        app:layout_widthPercent="100%" />
</android.support.percent.PercentRelativeLayout>

Make sure you include the library in your app gradle file:

compile 'com.android.support:percent:XX.X.X'

score 0 · Answer 6 · answered Oct 01 '19 at 06:54

You can achieve this using Constraint Layout. I am using aspect ratio attribute and an absolute value for width for the button. When my Button hits the constraints as per it's width, it'll accordingly set my height.

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/b_0xa"
        android:clickable="false"
        android:text="@string/app_name"
        android:layout_width="300dp"
        android:layout_height="0dp"
        android:src="@android:drawable/dark_header"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 7 · edited Jan 28 '20 at 08:37

0

<Button
  android:id="@+id/random"
  android:layout_width="60dp"
  android:layout_height="60dp"
  android:layout_weight="1"
  android:text="text view" 
/>

Make sure You give this code or change the height and width manually

edited Jan 28 '20 at 08:37

Kishan Bharda

5,446
3
30
57

answered Jan 28 '20 at 04:01

Deepak Mukka

358
2
6

Layout width equal height

7 Answers7

Linked