Styjun

I have a couple of buttons, that are supposed to be squares. But I'm not able to set the height to be the same as the width. How do I do that?

I tried to solve the problem with layout_constraintDimensionRatio, but it didn't work, the height was just 0.

This is the code:

<Button
 android:id="@+id/grid_11"
 style="@style/Widget.AppCompat.Button.Small"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_weight="1"></Button>

And this is what I tried:

<Button
 android:id="@+id/grid_11"
 style="@style/Widget.AppCompat.Button.Small"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 app:layout_constraintDimensionRatio="1:1"
 android:layout_weight="1"></Button>

The reason the height was "0" is because you have not properly set the constraints for your button. Set proper constraints something as below and it will work.

<Button
 android:id="@+id/grid_11"
 style="@style/Widget.AppCompat.Button.Small"
 android:layout_width="0dp"
 android:layout_height="0dp"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintDimensionRatio="1:1"/>

This can be achieved by using values from the dimens file. If it is not present in the res/values folder, then create a XML file called dimens.xml file there. Then add a dimen value stating your value which you want to use for the height and width of the button:

<dimen name="btn_size">100dp</dimen>

Then you can specify it to the button like this:

<Button
 android:id="@+id/grid_11"
 style="@style/Widget.AppCompat.Button.Small"
 android:layout_width="@dimen/btn_size"
 android:layout_height="@dimen/btn_size"
 android:layout_weight="1"></Button>

This will add the same height width to the button.

Change-

android:layout_width="wrap_content"
android:layout_height="wrap_content"

To-

android:layout_width="@dimen/square_button_size"
android:layout_height="@dimen/square_button_size"

and add

<dimen name="square_button_size">50dp</dimen>

in res/values/dimen.xml

If you don't want to put it in a ConstraintLayout (which is the easiest answer, @SirkarReddy already suggested it)- subclass Button and override the onMeasure function so that it will always measure itself as a square. There is no built in way to get the behavior you want in a RelativeLayout or LinearLayout without some hacking in code.