Set button height equal to the button width

Question

I've seen this question a lot on the internet, but all solutions didn't work for me..

So this is the problem. I want a button that has 50% width of the screen (that works fine).

But now I want it to have the same height the as the width.

Somehow this doesn't work:

Button button1 = (Button) findViewById(R.id.button1);
int btnSize = button1.getLayoutParams().width;
button1.setLayoutParams(new LinearLayout.LayoutParams(btnSize, btnSize));

See this for the code:

Activity1.java:

package nl.jesse.project1;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.LinearLayout;


public class Activity1 extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_activity1);

        Button button1 = (Button) findViewById(R.id.button1);
        int btnSize = button1.getLayoutParams().width;
        System.out.println(btnSize);
        //button1.setLayoutParams(new LinearLayout.LayoutParams(btnSize, btnSize));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_activity1, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}

Activity_activity1.xml:

<LinearLayout 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"
    tools:context=".Activity1"
    android:weightSum="1.0" >


    <Button
        android:layout_height="wrap_content"
        android:layout_weight=".5"
        android:layout_width="0dip"
        android:text="@string/button1"
        android:id="@+id/button1" />

</LinearLayout>

I've already tried this and parts of it, without success.

So what am I doing wrong?

does int btnSize = button1.getLayoutParams().width; give the same result as int btnSize = button1.getWidth; ??? — matty357, Apr 17 '15 at 14:16
I don't know, probably. But btnSize doesn't get any value. Not with getLayoutParams().width or with getWidth. — Hedva, Apr 17 '15 at 14:58
try doing it programmatically like in my answer. Ive used it to size many things. — matty357, Apr 17 '15 at 14:59

score 5 · Accepted Answer · edited Nov 12 '17 at 23:11

Ok I know this may not be the most efficient way to do it, but it is guaranteed to work.

You create this ResizableButton class :

import android.content.Context;
import android.util.AttributeSet;
import android.widget.Button;

public class ResizableButton extends Button {

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        setMeasuredDimension(width, width);
    }
}

and on your Activity_activity1.xml, you put :

<LinearLayout 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"
    android:weightSum="1.0"
    tools:context=".Activity1">

    <com.example.stackoverflow.ResizableButton
        android:id="@+id/button1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight=".5"
        android:text="Test" />

</LinearLayout>

Then you have a button that always has the same height as width and if you want to play with the button, on your main activity you will have to decalre a ResizableButton object and not a Button. Meaning :

 ResizableButton button1 = (ResizableButton) findViewById(R.id.button1);

And Voilà.

Finally something that works for me. Thank you so much! – Hedva Apr 17 '15 at 15:06 — Hedva, Apr 17 '15 at 15:06

score 1 · Answer 2 · answered Apr 17 '15 at 14:23

Can you not just do width and height programmatically ? Instead of setting it in the layout?

Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics displayMetrics = Main.this.getResources().getDisplayMetrics();
Point size = new Point();
display.getSize(size);
int width = size.x;

button1.setWidth(width/2);
button1.setHeight(width/2);

Main.this would be your context.

mVck · Answer 3 · 2017-02-11T23:45:20.703

One easy solution that is less known to get a Square Layout is using the PercentRelativeLayout, you can do it 100% in XML:

<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'

score 0 · Answer 4 · answered Mar 27 '18 at 05:57

Here is the kotlin version of Mohamed Hamdaoui's answer.

import android.content.Context
import android.util.AttributeSet
import android.widget.Button

public class ResizableButton(context: Context, attrs: AttributeSet) : Button(context, attrs) {

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val width = MeasureSpec.getSize(widthMeasureSpec)
        setMeasuredDimension(width, width)
    }

}

Set button height equal to the button width

4 Answers4

Linked