Android: set button height same as width

Question

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 screen size. I have tried ton of solutions but nothing works as I want to. Then also I need to have the text dynamic as the buttons so it everytime fills the button width. Is there any solution? I am trying this for weeks.

<TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp">

            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:text="@string/r1960"
                android:textColor="#ffffff"
                android:textSize="@dimen/loptatext"
                android:shadowColor="#000000"
                android:shadowRadius="7"
                android:layout_weight="1"
                android:background="@drawable/tlacitko_stav" />

            <Button
                android:id="@+id/button5"
                android:layout_width="match_parent"
                android:text="@string/r1964"
                android:textColor="#ffffff"
                android:textSize="@dimen/loptatext"
                android:shadowColor="#000000"
                android:shadowRadius="7"
                android:layout_weight="1"
                android:background="@drawable/tlacitko_stav" />

            <Button
                android:id="@+id/button6"
                android:layout_width="match_parent"
                android:text="@string/r1968"
                android:textColor="#ffffff"
                android:textSize="@dimen/loptatext"
                android:shadowColor="#000000"
                android:shadowRadius="7"
                android:layout_weight="1"
                android:background="@drawable/tlacitko_stav" />

            <Button
                android:id="@+id/button7"
                android:layout_width="match_parent"
                android:text="@string/r1972"
                android:textColor="#ffffff"
                android:textSize="@dimen/loptatext"
                android:shadowColor="#000000"
                android:shadowRadius="7"
                android:layout_weight="1"
                android:background="@drawable/tlacitko_stav" />
        </TableRow>

What you are asking sounds impossible. If they are the width of the screen, how could they be perfect squares? Also, how could multiple buttons be in a row if they are all the width of the screen? This makes no sense. — NoChinDeluxe, May 02 '16 at 20:53
I mean it together. Row will fit any screen width. 4 buttons next to each other. I have edited the question. — user1182960, May 02 '16 at 21:08

score 3 · Answer 1 · answered May 02 '16 at 21:15

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

score 0 · Answer 2 · answered May 02 '16 at 22:35

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.

score 0 · Answer 3 · answered May 03 '16 at 13:10

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 .

score 0 · Answer 4 · answered May 03 '16 at 13:14

0

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.

answered May 03 '16 at 13:14

Hiren Patel

52,124
21
173
151

Android: set button height same as width

4 Answers4

Linked