What does android:layout_weight mean?
I don't understand how to use this attribute. Can anyone tell me more about it?
With layout_weight
you can specify a size ratio between multiple views. E.g. you have a MapView
and a table
which should show some additional information to the map. The map should use 3/4 of the screen and table should use 1/4 of the screen. Then you will set the layout_weight
of the map
to 3 and the layout_weight
of the table
to 1.
To get it work you also have to set the height or width (depending on your orientation) to 0px.
In a nutshell, layout_weight
specifies how much of the extra space in the layout to be allocated to the View.
LinearLayout supports assigning a weight to individual children. This attribute assigns an "importance" value to a view, and allows it to expand to fill any remaining space in the parent view. Views' default weight is zero.
Calculation to assign any remaining space between child
In general, the formula is:
space assigned to child = (child's individual weight) / (sum of weight of every child in Linear Layout)
Example 1
If there are three text boxes and two of them declare a weight of 1, while the third one is given no weight (0), then remaining space is assigned as follows:
1st text box = 1/(1+1+0)
2nd text box = 1/(1+1+0)
3rd text box = 0/(1+1+0)
Example 2
Let's say we have a text label and two text edit elements in a horizontal row. The label has no layout_weight
specified, so it takes up the minimum space required to render. If the layout_weight
of each of the two text edit elements is set to 1, the remaining width in the parent layout will be split equally between them (because we claim they are equally important).
Calculation:
1st label = 0/(0+1+1)
2nd text box = 1/(0+1+1)
3rd text box = 1/(0+1+1)
If, instead, the first one text box has a layout_weight
of 1, and the second text box has a layout_weight
of 2, then one third of the remaining space will be given to the first, and two thirds to the second (because we claim the second one is more important).
Calculation:
1st label = 0/(0+1+2)
2nd text box = 1/(0+1+2)
3rd text box = 2/(0+1+2)
Source article
adding to the other answers, the most important thing to get this to work is to set the layout width (or height) to 0px
android:layout_width="0px"
otherwise you will see garbage
If there are multiple views spanning a LinearLayout
, then layout_weight
gives them each a proportional size. A view with a bigger layout_weight
value "weighs" more, so it gets a bigger space.
Here is an image to make things more clear.
Theory
The term layout weight is related to the concept of weighted average in math. It is like in a college class where homework is worth 30%, attendance is worth 10%, the midterm is worth 20%, and the final is worth 40%. Your scores for those parts, when weighted together, give you your total grade.
It is the same for layout weight. The Views
in a horizontal LinearLayout
can each take up a certain percentage of the total width. (Or a percentage of the height for a vertical LinearLayout
.)
The Layout
The LinearLayout
that you use will look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- list of subviews -->
</LinearLayout>
Note that you must use layout_width="match_parent"
for the LinearLayout
. If you use wrap_content
, then it won't work. Also note that layout_weight
does not work for the views in RelativeLayouts (see here and here for SO answers dealing with this issue).
The Views
Each view in a horizontal LinearLayout
looks something like this:
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
Note that you need to use layout_width="0dp"
together with layout_weight="1"
. Forgetting this causes many new users problems. (See this article for different results you can get by not setting the width to 0.) If your views are in a vertical LinearLayout
then you would use layout_height="0dp"
, of course.
In the Button
example above I set the weight to 1, but you can use any number. It is only the total that matters. You can see in the three rows of buttons in the first image that I posted, the numbers are all different, but since the proportions are the same, the weighted widths don't change in each row. Some people like to use decimal numbers that have a sum of 1 so that in a complex layout it is clear what the weight of each part is.
One final note. If you have lots of nested layouts that use layout_weight
, it can be bad for performance.
Extra
Here is the xml layout for the top image:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android:layout_weight="
android:textSize="24sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android:layout_weight="
android:textSize="24sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:text="10" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:text="20" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:text="10" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android:layout_weight="
android:textSize="24sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:text=".25" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50"
android:text=".50" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:text=".25" />
</LinearLayout>
</LinearLayout>
layout_weight
tells Android how to distribute your View
s in a LinearLayout
. Android then first calculates the total proportion required for all View
s that have a weight specified and places each View
according to what fraction of the screen it has specified it needs. In the following example, Android sees that the TextView
s have a layout_weight
of 0
(this is the default) and the EditText
s have a layout_weight
of 2
each, while the Button
has a weight of 1
. So Android allocates 'just enough' space to display tvUsername
and tvPassword
and then divides the remainder of the screen width into 5 equal parts, two of which are allocated to etUsername
, two to etPassword
and the last part to bLogin
:
<LinearLayout android:orientation="horizontal" ...>
<TextView android:id="@+id/tvUsername"
android:text="Username"
android:layout_width="wrap_content" ... />
<EditText android:id="@+id/etUsername"
android:layout_width="0dp"
android:layout_weight="2" ... />
<TextView android:id="@+id/tvPassword"
android:text="Password"
android:layout_width="wrap_content" />
<EditText android:id="@+id/etPassword"
android:layout_width="0dp"
android:layout_weight="2" ... />
<Button android:id="@+id/bLogin"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Login"... />
</LinearLayout>
It looks like:
and