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?

Thank you

Answer 1

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="" />     

Answer 2

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