How to achieve automatic width of Button in Androi

Question

I have a few Button listed vertically and I need all of them to have the same width, but also to display all text inside.

Basically I need width for all of them as a wrapped width of the largest one.

Hope I explained it well.

Now... I already have one layout that is working on my Samsung Galaxy S2 (4.1.2), but on friend's phone - Samsung GT-N7100 (note2) and android 4.4.2 - it is not working - some text is not displayed in the Button.

This is my layout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="word"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:textSize="30sp"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:id="@+id/word"/>

    <TextView
        android:text="14/36\nM: 1"
        android:layout_width="fill_parent"
        android:layout_height="80dp"
        android:id="@+id/score"
        android:layout_toRightOf="@+id/word"
        android:gravity="right|center"
        android:paddingRight="10dp"/>

    <LinearLayout
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/adapter">

        <Button
            android:text="1"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt1"/>

        <Button
            android:text="2"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt2" />

        <Button
            android:text="3"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt3" />

        <Button
            android:text="4"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt4" />

        <Button
            android:text="5"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt5" />
    </LinearLayout>

    <Button
        android:text="Next"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:id="@+id/next"/>

</RelativeLayout>

Answer 1

I have done this using XML only (no code) - for two TextViews. But the same technique should work for arbitrary number of buttons as well.

• Say we have two TextViews A and B.
• Wrap each TextView in a LinearLayout (with only one element inside) - La and Lb.
• Set each TextView (A,B) width to 'wrap_content', set background transparent
• Set the LinearLayouts (La,Lb) widths to 'match_parent', set background to whatever color/shape you want
• Wrap La and Lb inside another Vertical LinearLayout container L, set the width/height of L to be 'wrap_content', height to 'wrap_content'
• set padding on each TextView's LinearLayout (La, Lb) to make it look good
• set margins on (La, Lb) to create spacing
• That should do it.
  Note: Make sure the background color/shape for each TextView is set via its background of individual layout container and not on the TextView itself.

I know this question was asked 3 years ago - but I think I saw same/similar questions elsewhere for a solution that involves XML only. So hope this helps someone in the future.

Answer 2

Try setting android.width="auto"

Answer 3

You can extend the LinearLayout to force all its childs to have the max width:

// LinearLayoutButtonsHolder.java
package github.yaa110.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

public class LinearLayoutButtonsHolder extends LinearLayout {

    public LinearLayoutButtonsHolder(Context context) {
        super(context);
    }

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

    public LinearLayoutButtonsHolder(Context context, AttributeSet attrs,
                                     int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        if (getChildCount() == 0) return;

        getChildAt(getChildCount() - 1).addOnLayoutChangeListener(new OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                v.removeOnLayoutChangeListener(this);

                for (int i = 0; i < getChildCount(); i ++) {

                    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                            LinearLayout.LayoutParams.MATCH_PARENT,
                            getChildAt(i).getMeasuredHeight());

                    getChildAt(i).setLayoutParams(lp);
                }
            }
        });
    }

}

Now in the xml file of your layout, use LinearLayoutButtonsHolder rather than LinearLayout. Do not forget to set the android:layout_width of each Button to wrap_content:

<github.yaa110.widget.LinearLayoutButtonsHolder
    android:id="@+id/adapter"
    android:layout_width="wrap_content"
    android:orientation="vertical"
    android:layout_centerInParent="true"
    android:layout_height="wrap_content">

    <Button
        android:text="Long text for test"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:id="@+id/opt1"/>

    <Button
        android:text="2"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:id="@+id/opt2" />

    <Button
        android:text="3"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:id="@+id/opt3" />

    <Button
        android:text="4"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:id="@+id/opt4" />

    <Button
        android:text="5"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:id="@+id/opt5" />

</github.yaa110.widget.LinearLayoutButtonsHolder>

Answer 4

use linearlayout like this

    <LinearLayout
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:id="@+id/adapter">