Two buttons of same width with several words in one line

Question

I want to draw two Buttons in one line with equal width. Say, they have captions: "Sample text" and "Extra text". They should occupy as low space as possible, but all words should be written.

Now it looks so:

I wrote this code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:maxLines="1"
        android:text="Sample text"
        android:textAllCaps="false" />

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:maxLines="1"
        android:text="Extra text"
        android:textAllCaps="false" />

</LinearLayout>

If I remove android:maxLines="1" and set wrap_content to width, Buttons write a text, but fill different widths.

This could help you ;) https://stackoverflow.com/questions/10185874/how-to-put-two-buttons-on-same-line-in-android — Samuel Senigl, Feb 09 '18 at 14:51
@CoolMind, then another option to have fix size for both buttons. — Rumit Patel, Feb 09 '18 at 14:59
@Rumit, I agree with you. I think will calculate a size programmatically. — CoolMind, Feb 09 '18 at 15:03

score 0 · Answer 1 · answered Feb 09 '18 at 14:53

0

If you want to locate two buttons on one line, you need to set match_parent to layout_width of LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:maxLines="1"
        android:text="Sample text"
        android:textAllCaps="false" />

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:maxLines="1"
        android:text="Extra text"
        android:textAllCaps="false" />

</LinearLayout>

answered Feb 09 '18 at 14:53

kimkevin

2,202
1
26
48

Sorry, this solution requires full width for a layout, while I want it to occupy as little place as possible, but both buttons are of the same width and in one line. – CoolMind Feb 09 '18 at 14:57
1

@CoolMind I see. why don't you set fixed width? – kimkevin Feb 09 '18 at 14:59
1

Thanks for your support. Possibly I will set widths programmatically (after measuring). I thought there was a solution, for instance, with custom views. The problem is that I can change a text after application start. – CoolMind Feb 09 '18 at 15:05

score 0 · Answer 2 · answered Feb 09 '18 at 15:10

0

Add layout weight to both buttons. So, it will assure you have the same dimensions for both.

android:layout_weight="1"

Also get screen size and set the size programmatically.

Get Screen width and height

Fixing particular button size will effect small size screens.

answered Feb 09 '18 at 15:10

surya teja

61
2

Congratulate you with your debut in SO! Possibly this can lead to a solution, but I hope there is an easy method. – CoolMind Feb 09 '18 at 15:19

CoolMind · Accepted Answer · 2018-02-28T16:39:17.327

Let you want to resize second button.

If a button contains an icon, center it with How to center icon and text in a android button with width set to "fill parent". For instance, move a Button inside a FrameLayout or create a LinearLayout with ImageView and TextView.

If your case is custom view and a button is a FrameLayout with icon, override the following event:

boolean isButtonResized;

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);

    if (!isButtonResized) {
        int buttonWidth = firstButton.getWidth();
        if (buttonWidth != 0) {
            isButtonResized = true;
            ViewGroup.LayoutParams lp = secondButton.getLayoutParams();
            lp.width = buttonWidth;
            secondButton.setLayoutParams(lp);
        }
    }
}

If you have a button without an icon, only text, a resizing will be simplier:

secondButton.setWidth(firstButton.getWidth());

Two buttons of same width with several words in one line

3 Answers3