Button is not wrapping its content

Question

I am using a simple horizontal LinearLayout to put 3 buttons next to each other, all the same width. I achieve this by the following xml text:

   <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:baselineAligned="false" >

            <Button
                android:id="@+id/help"
                style="android:buttonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/help" />

            <Button
                android:id="@+id/close"
                style="android:buttonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/closemultigame" />

            <Button
                android:id="@+id/ok"
                style="android:buttonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/restartmultigame" />

        </LinearLayout>

Now the layout looks like this:

The button layout_height is defined as wrap_content, but the rightmost button doesn't wrap its content. It looks different on different devices, on some it looks good. What I would actually like to achieve is three buttons, same width and same height, each with its text centered both horizontally and vertically. What approach would you propose?

ADDED: the whole layout as requested:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/activity_horizontal_margin" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:drawableLeft="@drawable/matchandfit"
        android:drawablePadding="@dimen/activity_horizontal_margin"
        android:gravity="center_vertical"
        android:padding="@dimen/activity_horizontal_margin"
        android:text="@string/multigameover"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/status"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="@string/multigameresult"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <LinearLayout
        android:id="@+id/masterresult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/masterresultinfo"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:baselineAligned="false" >

            <Button
                android:id="@+id/help1"
                style="android:buttonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="@string/help" />

            <Button
                android:id="@+id/close1"
                style="android:buttonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="@string/closemultigame" />

            <Button
                android:id="@+id/ok1"
                style="android:buttonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="@string/restartmultigame" />

        </LinearLayout>



    </LinearLayout>
</LinearLayout>

</ScrollView>

As Wasim Ahmed pointed out, it is due to the ScrollView. Now I use the ScrollView to make sure that the buttons stay accessible even in landscape on small devices. (The layout is for a Dialog). Is there an other way to always keep the buttons accessible/visible?

WORKAROUND: The solution or better workaround I found was adding a TextView to the end of the enclosing LinearLayout. This TextView is vertically clipped at about half of its height, But it contains no text, so nobody will notice. Adding some padding to the bottom of the enclosing LinearLayout didn't help

Excurrent

I just Tried your code and its working fine here..there is no issue with your code..i think your LInearLayout is within another Layout..so it is bound to its height.. – Silverstein

yes, you are right, but the outer linear layout also has a wrap_content for it's height. – Excurrent

can you post the whole layout Xml?? :) – Silverstein

yes, appended the whole layout in my post – Excurrent

dear i ckecked it...its just because of scrollview. – Silverstein

So, it is not possible to use a scrollview? I am using scrollview because on small devices in landscape orientation the buttons may get unaccessible, because the dialog becomes too tall and there remains no space for the buttons. – Excurrent

Answer 1

Time and again I've observed that the Button class does not adjust to the text size even if you specify android:layout_height="wrap_content".

You can do one of two things:

1. You can manually set either the text size or the width of your Button until the text fits in properly (simulating the appearance of wrap_content).

2. Use a TextView instead (which does wrap the text correctly when you specify android:layout_height="wrap_content") and you set an onClickListener on the TextView to simulate the behaviour of a button.

Bernice

Same problem with TextView. As Wasim Ahmed pointed out, it is due to the surrounding ScrollView... – Excurrent

Answer 2

Button has minHeight by default. Remove minHeight of Button like so:

android:minHeight="0dp"

Sumy

Answer 3

Do not wrap the height of the button instead use the fill_parent to make the buttons's height identical with each other.

sample:

  <?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:layout_marginTop="@dimen/activity_vertical_margin"
    android:orientation="horizontal"
    android:baselineAligned="false" >

    <Button
        android:id="@+id/help"
        style="android:buttonBarButtonStyle"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="hilfe" />

    <Button
        android:id="@+id/close"
        style="android:buttonBarButtonStyle"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="beenden" />

    <Button
        android:id="@+id/ok"
        style="android:buttonBarButtonStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="neue Pundo" />

</LinearLayout>

result:

Benjamin

Copied your xml text, but still same effect on my system (Android 4.2. layout renderer in eclipse, but same result on my Google nexus 7) – Excurrent

@Excurrent but is it majority of devices?? – Benjamin

It is 50% of my devices :) – Excurrent

@Excurrent change fill to match parent and update me with the result – Benjamin

fill parent and match parent is the same, isn't it? Both evaluate to "-1" – Excurrent

Answer 4

I just tried and it worked:

1) Define in ../res/values/strings.xml:

Line1Line1\nLine2Line2

2) Refer it in the layout file:

<Button
    android:id="@+id/btn_multilines"
    android:text="@string/multilines"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent">
</Button>

Cryosurgery

Answer 5

Was not having luck wrapping text within a toggle button using android:layout_width="wrap_content", etc, so I added backslash n (\n) to the label string where I wanted wraps. For example, "Press to START" became, "Press \nto \nSTART" This worked for me.

Setter

Answer 6

Try using android:layout_width="wrap_content" instead of android:layout_width="0dp" and see id

Cruise

layout_width="wrap_content" makes the buttons have different widths – Excurrent

Then try setting adjusting android:layout_height manually to make all the buttons have same height and no text is cut off!! – Cruise

If I set layout_height manually, it works, but what about different devices? – Excurrent

widht must be match_Parent..in this case – Silverstein

Try adjusting the font size using sp instead of dp. This should change according to the device. – Cruise