Linear Layout and weight in Android

Question

I always read about this funny weight value in the Android documentations. Now I want to try it for the first time but it isn't working at all.

As I understand it from the documentations this layout:

  <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dip"
        weight="1" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dip"
        weight="1" />

  </LinearLayout>

should create two buttons that are horizontally aligned and share the space equally. The problem is the two buttons don't grow to fill the space.

I would like the buttons to grow and fill the whole line. If both buttons are set to match parent only the first button is shown and fills the whole line.

update: android percent support can also do this very well. http://code2concept.blogspot.in/2015/08/android-percent-support-lib-sample.html — Nitesh Tiwari, Nov 06 '15 at 06:12

score 748 · Answer 1 · edited Jul 24 '21 at 16:41

748

3 things to remember:

set the android:layout_width of the children to "0dp"
set the android:weightSum of the parent (edit: as Jason Moore noticed, this attribute is optional, because by default it is set to the children's layout_weight sum)
set the android:layout_weight of each child proportionally (e.g. weightSum="5", three children: layout_weight="1", layout_weight="3", layout_weight="1")

Example:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="5">

    <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="3"
        android:text="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

</LinearLayout>

And the result:

Layout weight example

edited Jul 24 '21 at 16:41

Shubham Suryavanshi

533
9
14

answered Dec 23 '10 at 09:21

Anke

8,535
3
22
25

71

Thanks for the tip about setting width to zero. I also found that setting weightSum on the parent wasn't needed. – Jason Moore Feb 26 '11 at 21:43
30

Good to know, thanks. If so, setting the weightSum can be still useful when you don't want the children to fill 100% of the parent. – Anke Feb 28 '11 at 08:26
13

This is correct for static XML layouts. If you're adding Views dynamically at runtime, you'll need to use addView with layout parameters like `addView(button, new LinearLayout.LayoutParams(0, height, 1));` This is true even if you're inflating layouts with the correct width and weight values. – Nuthatch Sep 03 '11 at 21:41
You say set the android:weightSum of the parent - set it to some value or just put it in, how should that be set? – theJerm Oct 18 '12 at 04:20
theJerm, yes, weightSum should be a value. This value represents 100% of layout's width. So if e.g. weightSum="1" and child's layout_weight="0.3", then the child will take 30% of its parent's width. If weightSum="250" and child's layout_weight="200", then the child will take 80% (because: 200/250 * 100% = 80%), etc... weightSum must be > 0 and the sum of children's layout_weight must be <= weightSum. – Anke Oct 18 '12 at 14:20
I am doing exactly the above with included layouts (using the include tag) and it does not work apparently. Possibly another "great" side effect of those include tags -_- .... – AgentKnopf Jan 07 '13 at 16:41
Zainodis, what exactly did you include? – Anke Jan 07 '13 at 17:30
@Nuthatch, I don't understand what you are getting at. Especially where you say, "This is true even if you are inflating layouts with the correct width and weight values." Can you please clarify? – batbrat Mar 30 '14 at 07:40
@batbrat It's been awhile, but I believe I meant the width and weight values inflated from XML are ignored. So you need to supply the programatically if you're using `addView` – Nuthatch Mar 30 '14 at 17:28
@Nuthatch, thanks for responding quickly. I don't get why one would be using addView() if we're inflating from a layout, unless we're adding some parts of the UI dynamically. In that case, the layout params in the XML won't apply to anything specified with addView and those must be explicitly specified using LayoutParams. Is that what you meant? – batbrat Mar 31 '14 at 10:40
1

@batbrat is correct, I was generating UI dynamically. I sometimes treat XML fragments as templates and then modify or populate at runtime. This trick didn't work for me in this case, I had to re-set the explicit width and weight to get it to work. – Nuthatch Mar 31 '14 at 14:50
Thank you! It's odd that you had to do that even for the inflated views. Very strange. Maybe it is because LinearLayout re-calibrates when you programatically add and needs the info again? I'll look into it. :) Thanks again! – batbrat Mar 31 '14 at 17:18
Also remember to set the layout_width of the LinearLayout not to wrap_content but to match_parent or a fixed value. I just overlooked that for 15 minutes. – Moritur Apr 10 '16 at 21:23

score 171 · Accepted Answer · edited Sep 13 '17 at 16:14

171

You are not setting the layout_weight property. Your code reads weight="1" and it should read android:layout_weight="1".

edited Sep 13 '17 at 16:14

MasterScrat

7,090
14
48
80

answered Apr 23 '10 at 17:08

JeremyFromEarth

14,344
4
33
47

score 55 · Answer 3 · edited Jul 16 '13 at 15:51

55

It's android:layout_weight. Weight can only be used in LinearLayout. If the orientation of linearlayout is Vertical, then use android:layout_height="0dp" and if the orientation is horizontal, then use android:layout_width = "0dp". It'll work perfectly.

edited Jul 16 '13 at 15:51

Geobits

22,218
6
59
103

answered Sep 12 '12 at 16:38

Manoj Seelan

686
5
5

score 29 · Answer 4 · edited Mar 15 '18 at 10:06

29

This image summarizes the Linear layout.

You can follow this link for more information on the topic. Just Maths - Views, View Groups and Layouts

Video Tutorial For Linear Layout : Width, Height & Weights

Android Linear Layout Tutorial

edited Mar 15 '18 at 10:06

Prags

2,457
2
21
38

answered Nov 19 '15 at 07:24

Cheezy Code

1,685
1
14
18

score 18 · Answer 5 · edited Jul 14 '16 at 11:16

18

Try setting the layout_width of both buttons to "0dip" and the weight of both buttons to 0.5

edited Jul 14 '16 at 11:16

Aditya Vyas-Lakhan

13,409
16
61
96

answered Apr 23 '10 at 14:16

jqpubliq

11,874
2
34
26

Now both buttons are vanished from screen – Janusz Apr 23 '10 at 14:22
okay, then set the layout width on both to fill_parent and weights to 0.5 – jqpubliq Apr 23 '10 at 14:36
take a look at [this](http://groups.google.com/group/android-developers/browse_thread/thread/cdeed934041650a/ff2c8f6a5c0085ca?lnk=gst&q=weight+romain#ff2c8f6a5c0085ca) and [this](http://groups.google.com/group/android-developers/browse_thread/thread/28787df685b68acb/37f2dc2441e00ec7?lnk=gst&q=weight+0+romain#37f2dc2441e00ec7). I'm A little confused as to why this still isn't working but maybe this will give you som ideas. – jqpubliq Apr 23 '10 at 14:59

score 7 · Answer 6 · answered Jul 26 '13 at 13:11

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. Default weight is zero

calculation to assign any Remaining/Extra space between child. (not the total space)

space assign to child = (child 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/Extra space assign to

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 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)

score 7 · Answer 7 · answered Mar 03 '14 at 17:52

In the width field of button, replace wrap-content with 0dp.
Use layout_weight attribute of a view.

android:layout_width="0dp"

This is how your code will look like:

<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">

 <Button
    android:text="Register"
    android:id="@+id/register"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="10dip"
    android:layout_weight="1" />

 <Button
    android:text="Not this time"
    android:id="@+id/cancel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="10dip"
    android:layout_weight="1" />    

</LinearLayout>

layout_weight is used to distribute the whatever left space into proportions. In this case, the two buttons are taking "0dp" width. So, the remaining space will be divided into 1:1 proportion among them, i.e. the space will be divided equally between the Button Views.

score 7 · Answer 8 · edited May 23 '17 at 11:54

Like answer of @Manoj Seelan

Replace android:layout_weight With android:weight.

When you use Weight with LinearLayout. you must add weightSum in LinearLayout and according to orientation of your LinearLayout you must setting 0dp for Width/Height to all LinearLayout`s Children views

Example :

If The orientation of Linearlayout is Vertical , then Set Width of all LinearLayout`s Children views with 0dp

 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:weightSum="3">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="2" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" />

  </LinearLayout>

If the orientation Linearlayout of is horizontal , then Set Height of all LinearLayout`s Children views with 0dp.

 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:weightSum="3">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="10dip"
        android:layout_weight="2" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="10dip"
        android:layout_weight="1" />

  </LinearLayout>

JeremyFromEarth · Answer 9 · 2010-04-23T17:00:42.687

Perhaps setting both of the buttons layout_width properties to "fill_parent" will do the trick.

I just tested this code and it works in the emulator:

<LinearLayout android:layout_width="fill_parent"
          android:layout_height="wrap_content">

    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="hello world"/>

    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="goodbye world"/>

</LinearLayout>

Be sure to set layout_width to "fill_parent" on both buttons.

this only pushes the right button out of the screen and shows only the first button. — Janusz, Apr 23 '10 at 14:19

score 4 · Answer 10 · answered Feb 23 '11 at 13:35

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/logonFormButtons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="true"       
        android:orientation="horizontal">

        <Button
            android:id="@+id/logonFormBTLogon"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            android:text="@string/logon"
            android:layout_weight="0.5" />

        <Button
            android:id="@+id/logonFormBTCancel"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            android:text="@string/cancel"
            android:layout_weight="0.5" />
    </LinearLayout>

Now I'd rather suggest using layout_weight="50" and layout_width="0px" — Yar, Jun 07 '12 at 12:19

Akshay Chopra · Answer 11 · 2018-04-17T18:00:43.393

Below are the changes (Marked in BOLD) in your code:

<LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="0dp" //changes made here
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" /> //changes made here

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="0dp" //changes made here
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" /> //changes made here

  </LinearLayout>

Since your LinearLayout has orientation as horizontal, therefore you will need to keep your width only as 0dp. for using weights in that direction . (If your orientation was vertical, you would have kept your height only 0dp).

Since there are 2 views and you have placed android:layout_weight="1" for both the views, it means it will divide the two views equally in horizontal direction (or by width).

score 2 · Answer 12 · edited May 13 '15 at 19:19

2

Plus you need to add this android:layout_width="0dp" for children views [Button views] of LinerLayout

edited May 13 '15 at 19:19

ahmed hamdy

5,096
1
47
58

answered Dec 11 '12 at 21:11

Rebeka

283
1
2
13

score 2 · Answer 13 · edited May 02 '11 at 07:01

2

In the above XML, set the android:layout_weight of the linear layout as 2: android:layout_weight="2"

edited May 02 '11 at 07:01

Aman Alam

11,231
7
46
81

answered Aug 18 '10 at 05:35

Priyanka

21
1

3

Why is that needed? Why is the layout weight of 2 important? Why not 20 or 200? – Conrad Frix Dec 14 '12 at 17:40

score 2 · Answer 14 · answered Oct 06 '16 at 11:20

You have to write like this its Working for me

<LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
            android:weightSum="2">

         <Button
            android:text="Register"
            android:id="@+id/register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_weight="1" />

         <Button
            android:text="Not this time"
            android:id="@+id/cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_weight="1" />

score 1 · Answer 15 · answered Sep 08 '15 at 08:51

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Button 2" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 3" />

    </LinearLayout>

score 0 · Answer 16 · edited May 13 '15 at 19:28

0

Substitute wrap_content with fill_parent.

edited May 13 '15 at 19:28

ahmed hamdy

5,096
1
47
58

answered Apr 23 '10 at 18:01

Humberto Pinheiro

1,082
1
13
19

score 0 · Answer 17 · answered Feb 17 '17 at 12:20

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="#008">

            <RelativeLayout
                android:id="@+id/paneltamrin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"

                >
                <Button
                    android:id="@+id/BtnT1"
                    android:layout_width="wrap_content"
                    android:layout_height="150dp"
                    android:drawableTop="@android:drawable/ic_menu_edit"
                    android:drawablePadding="6dp"
                    android:padding="15dp"
                    android:text="AndroidDhina"
                    android:textColor="#000"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/paneltamrin2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                >
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="150dp"
                     android:drawableTop="@android:drawable/ic_menu_edit"
                    android:drawablePadding="6dp"
                    android:padding="15dp"
                    android:text="AndroidDhina"
                    android:textColor="#000"
                    android:textStyle="bold" />

            </RelativeLayout>
        </LinearLayout>

score 0 · Answer 18 · edited Sep 06 '11 at 10:55

0

This is perfect answer of your problem

  <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:text="Register" android:id="@+id/register"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:padding="10dip" weight="1" />
     <Button 
        android:text="Not this time" android:id="@+id/cancel"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:padding="10dip" weight="1" />
  </LinearLayout>

edited Sep 06 '11 at 10:55

Vaibhav Jani

12,428
10
61
73

answered Jul 06 '11 at 12:47

Rahul Mandaliya

738
1
12
36

3

So is it "weight" or "layout_weight"?? – IgorGanapolsky Apr 05 '12 at 20:38
It is android:layout_weight – Mahendra Gunawardena Dec 29 '13 at 18:09

score 0 · Answer 19 · answered Feb 24 '22 at 01:52

Here is some examples

Horizontal orientation with equal weights

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


    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="3" />

</LinearLayout>

Horizontal orientation with unequal weights

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


    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="2"
        android:text="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="3" />

</LinearLayout>

Vertical orientation with equal weights

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:text="3" />

</LinearLayout>

Hope you helpful!

Linear Layout and weight in Android

19 Answers19

Linked

Related