CODEWITHSUNDEEP
androidandroid-layoutbutton
Twing90
Twing90

Reputation: 417

Layout width equal height

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

Upvotes: 10

Views: 11480

Answers (7)

Android Geek
Android Geek

Reputation: 9225

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:

enter image description here

Upvotes: 4

Deepak Mukka
Deepak Mukka

Reputation: 396

<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

Upvotes: 0

Akanshi Srivastava
Akanshi Srivastava

Reputation: 1500

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>

Upvotes: 0

mVck
mVck

Reputation: 3030

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'

Upvotes: 0

tccpg288
tccpg288

Reputation: 3352

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.

Upvotes: 0

Abdulrahman Abdulkarim
Abdulrahman Abdulkarim

Reputation: 132

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.

Upvotes: 0

Swayam
Swayam

Reputation: 16354

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

Upvotes: 0

Related Questions