Android: Set Button Height Same As Width

This is part of my layout. I need buttons to be perfect squares. There will be 4 buttons in row. There will be more rows in scrollview. Every row will fit the screen width for any

Solution 1:

You could extend Button and force it to be square, like this:

public class SquareButton extends Button {
    public SquareButton(Context context) {
        super(context);
    }

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public SquareButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

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

Solution 2:

I had a very similar problem where I needed to add buttons dynamically on the screen dependent on the size of an arrayList. As far as I gathered you cannot do this using xml and would have to program the View in the activity (or fragment)

Button Strings example:

   ArrayList<String> trending = new ArrayList<String>() {
    {
        add("one"); add("two"); add("three"); add("four"); add("five"); add("six"); add("eleven");
        add("seven"); add("eight"); add("nine");add("ten");
    }
};

Here are the buttons within a programmed Layout (mine were toggle buttons)

  //LAYOUT SETTINGS 5
    TableLayout rLayout5 = new TableLayout(getActivity());
    rLayout5.setOrientation(TableLayout.VERTICAL);
    LayoutParams param7 = new LayoutParams(
            LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT);
    param7.addRule(RelativeLayout.BELOW, rLayout4.getId());
    rLayout5.setBackgroundColor(Color.parseColor("#EEEBAA"));

    rLayout5.setLayoutParams(param7);
    // List<ToggleButton> togButtStore = new ArrayList<ToggleButton>();

    int i = 0 ;
    while (i < trending.size()){
        if (i % 3 == 0){
            tr = new TableRow(getActivity());
            rLayout5.addView(tr);
        }
        ToggleButton toggleBtn = new ToggleButton(getActivity());
        toggleBtn.setText(trending.get(i));
        toggleBtn.setId(i);
        toggleBtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    Context context = getActivity().getApplicationContext();

                    CharSequence text = "Hello toast!";
                    int duration = Toast.LENGTH_SHORT;
                    Toast toast = Toast.makeText(context, text, duration);
                    toast.show();
                } else {
                    // The toggle is disabled
                }
            }
        });
        tr.addView(toggleBtn);
        i++;
    }

You need to add each of the layouts you programmed to the view

  root.addView(rLayout5);
  getActivity().setContentView(root);

and then of course do not forget to return the view (as you would normally).

I thought to give you one lay out setting with the Button settings, this then might be helpful to start programming the Layout using Java rather then the xml. And just to add, any layout and text setting you do in xml can also be set in Java, and its more flexible.

Solution 3:

Set your Button height and width programatically works awesome,Hope it helps ..

Enter below code to your class file .

    DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);

    int screenHeight = displaymetrics.heightPixels;

    int btnHeight = (int) (screenHeight * 0.25);
    int btnWidth = (int) (screenHeight * 0.25);

    button1.getLayoutParams().height = btnHeight;
    button1.getLayoutParams().width = btnWidth;

    button2.getLayoutParams().height = btnHeight;
    button2.getLayoutParams().width = btnWidth;

    button3.getLayoutParams().height = btnHeight;
    button3.getLayoutParams().width = btnWidth;

    button4.getLayoutParams().height = btnHeight;
    button4.getLayoutParams().width = btnWidth;

We used Displaymetrics here which will change your button size according to device's screen size here button width and height is 25% of screen height which you can change according to your convenience .

Solution 4:

You should do this way:

Button button = (Button) findViewById.(R.id.button);

int buttonWidth = button.getLayoutParams().width;
button.setLayoutParams(new LayoutParams(buttonWidth, buttonWidth));

Hope this will help you.