How to achieve equal layout_width and layout_height

Question

What I am trying to achieve is to put 4 buttons next to each other, with some margins, and make them square (without supplying fixed sizes)

I basically have a wrapper LinearLayout that holds 4 buttons, which I want them to be square shaped.

<LinearLayout
        android:id="@+id/photos_photoWrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orienation="vertical">

        <Button
            android:id="@+id/photos_photoButton1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
                />


        <Button
            android:id="@+id/photos_photoButton2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            />
        <Button
            android:id="@+id/photos_photoButton3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            />

        <Button
            android:id="@+id/photos_photoButton4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            />
    </LinearLayout>

I tried this code

        Button iv = (Button)findViewById(R.id.photos_photoButton1);
        boolean bPost = iv.post(
                new Runnable()
                {
                    public void run()
                    {
                        Button iv = (Button)findViewById(R.id.photos_photoButton1);
                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)iv.getLayoutParams();
                        params.width = findViewById(R.id.photos_photoButton1).getWidth();
                        params.height = params.width;
                        iv.setLayoutParams(params);
                    }
                });

        if (bPost == false)
        {
            throw new RuntimeException("runnable not posted");
        }

Yet it just seemed to double up the scale of buttons, still with same proportions.

bmat · Accepted Answer · 2015-03-04T03:39:04.383

4

You can create a custom subclass of Button and override onMeasure, for example:

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

To use SquareButton in your layout file, change your Button declarations to the following:

<your.package.name.SquareButton
    android:id="@+id/photos_photoButton1"
    android:layout_width="[DESIRED WIDTH]dp"
    android:layout_height="0dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    />

edited Mar 04 '15 at 03:39

answered Mar 04 '15 at 03:28

bmat

2,084
18
24

and how would I declare that my buttons are subclasses of square buttons? – Bartu Mar 04 '15 at 03:36
@Bartu I updated my answer to include an explanation. This answer may be helpful as well: http://stackoverflow.com/questions/3260876/custom-view-in-xml-layout – bmat Mar 04 '15 at 03:40
this fixes my issue. but it feels terrifying to subclass a button just to make it square and support all dimensions :) thanks for the update. I am sure it will help others as well. – Bartu Mar 04 '15 at 03:43

How to achieve equal layout_width and layout_height

1 Answers1

Linked