Android layout_weight comportment

Question

I am trying to build an android layout using layout_weight to fit all sizes of devices and I have some trouble understanding its comportment.

I noticed that changing the layout_width/layout_height influenced the layout_weight comportment, but I don't understand how.

Let's say for example I want to have a vertical LinearLayout divided in three inners LinearLayout such that the one at the top and the one at the bottom are filling 25% of the screen, and the on in the middle 50%, and that should not depend of the content of the inner layouts. (If the content of a inner LinearLayout is too big, it should not shift the others layouts)

In order to do this, should I set the layout_height attribute of the inner LinearLayout to fill_parent or to wrap_content?

Thanks!

EDIT: It looks like the layout_weight is inversely proportional to the size the layout will occupate.

3 examples:

Weight 1/1/1 (working as I expected)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#FF0000"/> //RED
        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#00FF00"/> //GREEN
        <LinearLayout
            android:id="@+id/layout3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#0000FF"/> //BLUE
</LinearLayout>

Results: enter image description here

Weight 1/2/1 (Why, oh why?)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#FF0000"/> //RED
        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2"
            android:background="#00FF00"/> //GREEN
        <LinearLayout
            android:id="@+id/layout3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#0000FF"/> //BLUE
</LinearLayout>

Results: enter image description here

**Weight 3/2/3 (What I entended to do with 1/2/1):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="3"
            android:background="#FF0000"/> //RED
        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2"
            android:background="#00FF00"/> //GREEN
        <LinearLayout
            android:id="@+id/layout3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="3"
            android:background="#0000FF"/> //BLUE
</LinearLayout>

Results: enter image description here

score 3 · Answer 1 · edited Oct 24 '12 at 18:22

3

You can try to set layout_height = 0dp

edited Oct 24 '12 at 18:22

Luca

9,259
5
46
59

answered Oct 24 '12 at 18:04

Ziwei Zeng

691
5
21

score 3 · Answer 2 · answered Dec 06 '12 at 09:46

For the layout_weight to work as expected (and documented) you must not set the layout_height to neither fill_parent nor match_parent.

The example to the right on http://developer.android.com/guide/topics/ui/layout/linear.html#Weight shows an example where layout_height is set to 0dp. However not setting it at all or setting it to wrap_content also makes the layout_weight work as expected.

score 1 · Accepted Answer · answered May 11 '11 at 18:18

1

You should set the layout_height of all three inner layouts to "fill_parent" and then change their weights to make them look like you want.

answered May 11 '11 at 18:18

Egor

39,695
10
113
130

@Egor: I tried to do this, but I don't understand how the `layout_weight` acts in this case: If I put 1/1/1, the three parts will be equal. But if I put 1/2/1, I don't see the second one, and the screen is just divided with 50% of the first layout and 50% of the third layout. How does it work? – nbarraille May 11 '11 at 19:07
@nbarraille : you should post the layout in question so we can better assess what is wrong in that particular case, because the space should be distributed as you specify. – dmon May 11 '11 at 19:14
2

@Enbarraille: You could also do a weight of 2:1:2, rather than 3:2:3. I also find it strange how the weights are inversely proportional. Seems anti-intuitive – Spidy May 11 '11 at 19:45
1

@nbarraille: Nice samples! Yeah I think you were getting it wrong, the **lower** the number the **higher** the importance. That said, I still don't know why 1/2/1 gets rid of the middle container completely. I think it might have something to do with it having no content. Have you tried with three buttons, with text, see if the middle one still disappears? – dmon May 11 '11 at 21:33
@dmon: Having a button in the layout doesn't help, the second one doesn't show up for 1/2/1. – nbarraille May 12 '11 at 13:44
@Spidy: I agree, it would have been soooo much simpler to just allocate (weight/sum_of_weights)*100 % of the layout to each element using weights... I think there are not even inversely proportional (otherwise 2/1/2 and 3/2/3 wouldn't be the same). Did you manage to come up with some kind of formula to transform weight into %? – nbarraille May 12 '11 at 13:46

Android layout_weight comportment

3 Answers3

Linked