Why do buttons stretch to cover all the layout_weight allocated

Question

I am trying to get 3 buttons aligned (left, center, right). I know that it can probably be done with gravity but I wam trying to understand the layout_weight concept here. I am using this code:

<LinearLayout
id=..
layout_width =  "wrap_content"
layout_height = "wrap_content"
orientation="Horizonta"
>
 <Button
  id=1
  layout_width =  "wrap_content"
  layout_height = "wrap_content"
  layout_weight = "1"
  text= "text" />

 <Button
  id=2
  layout_width =  "wrap_content"
  layout_height = "wrap_content"
  layout_weight = "1"
  text= "text" />

 <Button
  id=3
  layout_width =  "wrap_content"
  layout_height = "wrap_content"
  layout_weight = "1"
  text= "text" />
</LinearLayout>

However, I am getting the TOP portion of the image below. Which is correct. The question is why is button stretched to cover all the area it is allocated while I am using wrap_content?How can make it like the BOTTOM image?

enter image description here

Thank you

Thank you! I've been working on this for two hours now! – SMBiggs Mar 10 '16 at 00:52 — SMBiggs, Mar 10 '16 at 00:52

score 6 · Accepted Answer · answered Mar 19 '12 at 21:48

The layout_weight is used to indicate how the extra free space on the screen should be divided up among the widgets. In this case we have three buttons with the same layout_weight and hence so will the buttons grow equally much until all the free space is gone.

Must try something else to get original size buttons and the alignment that what we want (left - center - right). One problem is that the horizontal LinearLayout is not completely collaborative when it comes to respecting layout_gravity parameters. We will be able to use layout_gravity parameters that affect vertical alignment but horizontal are ignored by the parent LinearLayout, sigh another dead end.

A solution is to put something in between the button's that pushes the them into right place in the screen. The Space view was introduced in API 14 (Ice Cream Sandwich) and is suitable to be used for this.

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

     <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight = "1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight = "1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

The Space views can also be replaced with a couple of empty TextViews to get the design to work on devices that run earlier API-levels.

<TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1.0"
    android:text="" />

score 2 · Answer 2 · answered Mar 19 '12 at 19:52

2

When the weight is used, the layout_width is ommited and only the weight algorithm is used and then stretch the element.

answered Mar 19 '12 at 19:52

Pascal Piché

600
2
13

score 1 · Answer 3 · edited May 23 '17 at 11:53

Your buttons fill the space because you use layout_weight="1" that tells the buttons to take the extra space available, also because the layout_weight attribute is 1 for all buttons they will take the same space and have the same size. You can't obtain that bottom layout by using the layout_weight, use the layout_gravity to position them (here is another question about this What does android:layout_weight mean?).

If you want the bellow image try this:

<LinearLayout
id=..
layout_width =  "wrap_content"
layout_height = "wrap_content"
orientation="Horizonta"
>
 <Button
  id=1
  layout_width =  "wrap_content"
  layout_height = "wrap_content"
  android:layout_gravity="left"
  text= "text" />

 <Button
  id=2
  layout_width =  "wrap_content"
  layout_height = "wrap_content"
  android:layout_gravity="center_horizontal"
  text= "text" />

 <Button
  id=3
  layout_width =  "wrap_content"
  layout_height = "wrap_content"
  android:layout_gravity="right"
  text= "text" />
</LinearLayout>

Why do buttons stretch to cover all the layout_weight allocated

3 Answers3