layout_weight meaning in the case of nested LinerLayout

Question

In this layout definition:

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

    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="7"
            android:id="topLayout"
            android:background="@android:color/holo_green_light">

    </LinearLayout>

    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal"
            android:layout_weight="2"
            android:id="bottomLayout"
            android:background="@android:color/holo_orange_light">

    </LinearLayout>
</LinearLayout>

I don't understand why the named "bottomLayout" is higher than the topLayout. You can see a commented screenshot of the result in Android Studio.

Answer 1

First of all fix your xml and change layout_height to 0dp.This is because your are using weights to manage height and at the same time your are instructing it to fill parent. Second, if you'll experiment by giving weights as 1 for each you'll notice that both the layouts are now divided equally.What I assume is that weight is the calculation of available space that's left after adding the view i.e The weight is calculated according to the available space.

Check in your preview by clicking on the outline for any overflowing of layouts out of screen, you might find that some part of your layout is out of screen. To get some clarity either use your weights according to percentage for example instead of giving in 2 and 7 try with 0.2 and 0.8, this will balance the weigts. Or you can use the attribute "weight_sum" to declare total available weight and then distribute it evenly, for example with weight_sum 100 you can follow a percentage based approach.

See this link for further clarity.

Answer 2

LinearLayout children are laid out in order they are declared.

layout_weight mechanism only distributes any remaining space to elements in proportion to their weight, it doesn't affect the ordering.

This is unlike some other environments where a "weight" parameter affects an item's position in a container.

Answer 3

If you make your code to like this then you can find solution

    <LinearLayout
        android:![enter image description here][1]orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="7"
        android:id="topLayout"
        android:background="@android:color/holo_green_light">

</LinearLayout>

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="3"
        android:id="bottomLayout">

    <Button
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="b"
            android:id="@+id/button4"
            android:layout_gravity="center"
            android:background="@android:color/holo_orange_light"/>

</LinearLayout>

Answer 4

if you want to use layout_weight in linearlayout then you have to add weightSum in parent LinearLayout

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="10"
        android:orientation="vertical"
    >

        <--70% of free space in parent LinearLayout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7"
        >
        </LinearLayout>
        <--30% of free space in parent LinearLayout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
        >
        </LinearLayout>

    </LinearLayout>

in xml comments i wrote 70% of free space in parent LinearLayout if you add some layout with exact height then both your linearlayouts will occupy 70% and 30% of left height in that particular linearlayout for example if height of your parent linearlayout is 100dp

your child layouts will be drawn first one 70dp and the second one will be 30dp tall but if you add some imageview with height 50dp then your first child linearlayout will be about 35dp tall and 15dp for second one