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.

Cuirassier

update: android percent support can also do this very well. code2concept.blogspot.in/2015/08/… – Periscope

Answer 1

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

Deferral

Answer 2

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:

Reider

Thanks for the tip about setting width to zero. I also found that setting weightSum on the parent wasn't needed. – Mannose

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. – Reider

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. – Tl

You say set the android:weightSum of the parent - set it to some value or just put it in, how should that be set? – Arbitrate

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. – Reider

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 -_- .... – Garygarza

Zainodis, what exactly did you include? – Reider

@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? – Adamina

@Adamina 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 – Tl

@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? – Adamina

@Adamina 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. – Tl

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! – Adamina

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. – Diocese

Answer 3

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.

Slinkman

Answer 4

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

Politick

Answer 5

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

Hereditament

Now both buttons are vanished from screen – Cuirassier

okay, then set the layout width on both to fill_parent and weights to 0.5 – Hereditament

take a look at this and this. I'm A little confused as to why this still isn't working but maybe this will give you som ideas. – Hereditament

Answer 6

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) 

Fearfully

Answer 7

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.

Immotile

Answer 8

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>

Biomass

Answer 9

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.

Deferral

this only pushes the right button out of the screen and shows only the first button. – Cuirassier

Answer 10

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

Hanuman

Now I'd rather suggest using layout_weight="50" and layout_width="0px" – Hanuman

Answer 11

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

Epiphenomenalism

Answer 12

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

Kuhn

Why is that needed? Why is the layout weight of 2 important? Why not 20 or 200? – Stanton

Answer 13

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

Ectomorph

Answer 14

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

Streamway

Answer 15

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

Tourbillion

Answer 16

Substitute wrap_content with fill_parent.

Compassionate

Answer 17

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>

Alduino

So is it "weight" or "layout_weight"?? – Fichu

It is android:layout_weight – Kurdistan

Answer 18

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

Transarctic

Answer 19

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!

Choke