How do I specify the height of a view relative to its width in Android Studio?

Question

Problem

I have a button with the following XML:

<Button
    android:id="@+id/firstNumber"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="@string/firstNumber"
    app:layout_constraintEnd_toStartOf="@+id/secondNumber"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Currently, the button's layout_width is set to match_constraint (which is the reason why it shows as "0dp," I think).

I want to make the button a square, where its width would be equal to its height. Here are the solutions that I have found so far:

Solution 1:

I could do something similar to this answer, where I would change the XML layout_width and layout_height values to a specific value @dimen/box_size:

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

However, this would not be ideal as it is basically hard-coding the button width, which would not adjust well for different screen sizes (as opposed to using match_constraint).

Solution 2:

I could write some Java code to do it (source):

public class SquareButton extends Button {

    public SquareButton(Context context) {
        super(context);
    }

    public SquareButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
    }
}

This would work, but I'd rather do this within XML. Is there a way?

Nirav Bhavsar · Accepted Answer · 2018-08-06T06:10:19.053

Try below approach and check

You can also define one dimension of a widget as a ratio of the other one. In order to do that, you need to have at least one constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), and set the attribute layout_constraintDimensionRatio to a given ratio.

<Button
    android:id="@+id/firstNumber"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="First Number"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toStartOf="@+id/secondNumber"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Please refer below code, for put four square button in horizontal line

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">


    <Button
        android:id="@+id/firstNumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="FN"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/secondNumber"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/secondNumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="SN"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/firstNumber"
        app:layout_constraintRight_toLeftOf="@+id/thirdnumber"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/thirdnumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TN"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/secondNumber"
        app:layout_constraintRight_toLeftOf="@+id/fourtnumber"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/fourtnumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp"
        android:text="FON"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/thirdnumber"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

For more refer the Ratio in this Link

Four dynamic square imageview in horizontal

It got the ratio right, but for some reason, the width shrunk. Now it isn't really matching the constraint :/. — Frank, Aug 06 '18 at 04:37
@Frank, have you added app:layout_constraintDimensionRatio ??, and can you please post full xml code. — Nirav Bhavsar, Aug 06 '18 at 04:38
I basically just have 4 buttons that are similar to the one above all in a horizontal chain. The only thing I have added is `app:layout_constraintDimensionRatio="1:1"` on each of the buttons. — Frank, Aug 06 '18 at 04:44
@Frank, i have updated my answer, i have wriiten code for arranging four button in horizontal with square size. — Nirav Bhavsar, Aug 06 '18 at 04:54
Just figured out the exact same solution a minute ago. Thanks! — Frank, Aug 06 '18 at 04:55

score 0 · Answer 2 · answered Aug 06 '18 at 04:19

0

Use Square Image in ImageView instead of Button. Use that ImageView instead of Button.

answered Aug 06 '18 at 04:19

Parth Suthar

123
4

I just tried it, but the problem is, the `layout_height` is still limiting it from expanding to fill up the `layout_width`. Basically there is a lot of white space on the sides. Also, if there was a way to do this within a button (there has to be right?!), I would prefer that. Thanks for the help anyways! :) – Frank Aug 06 '18 at 04:24
for white space in imageview, put the attribute adjustViewBouds="true" for that. – Parth Suthar Aug 06 '18 at 04:26
i don't think other way in the button. – Parth Suthar Aug 06 '18 at 04:26
Okay, that worked. Thanks. Still going to see if I can get it done with just a button though (if not I'll accept your answer). – Frank Aug 06 '18 at 04:31

How do I specify the height of a view relative to its width in Android Studio?

Problem

Solution 1:

Solution 2:

2 Answers2