Two buttons of same width with several words in one line

155 Views Asked by At

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: enter image description here

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.

3

There are 3 best solutions below

0
CoolMind On BEST ANSWER

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());
3
kimkevin On

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>
1
surya teja On

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.