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" />

Answer 1

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:

Answer 2

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) ].

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

Answer 3

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.

Answer 4

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.

Answer 5

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'

Answer 6

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>

Answer 7

<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