How to use the attributes :layout_weight

Posted 2022-08-04 SamDlex

​​LinearLayout​​​ supports assigning a weight to individual children with the ​​android:layout_weight​​ attribute. The value assigned to a view in terms of how much space it should occupy on the screen.Default weight is zero!

​​android:layout_weight​​ indicates that the individual view expands equally to fill the space remaining after all views are measured
I want to show you how to calculate the space of individual view.There are some following steps:

Step1: To measured all views,so each view has their own size.No matter what value the ​​android:layout_width​​​or​​android:layout_height​​​ is.After all views are measured,their size is confirmed.i.e. if the ​​android:layout_width​​​ is ​​0dp​​​,so the width of the view is ​​0dp​​​,if the ​​android:layout_width​​​ is ​​match_parent​​​,so its width is as large as its parent layout.If the ​​android:layout_width​​​ is ​​wrap_content​​​,so its width is as large as its content. Here we know,the method ​​onMeasure​​​ of each view will be called.
Step2: To calculate the space remaining using the size of the parent layout of these views minuses the total size from all these sub views. i.e. To sum up all the width of these views,so that we get a total width size of these views. Then to use the width of their parent layout minuses the total width size.So that we get the width remaining.
Step3: To calculate how much each view with the attribute ​​android:layout_weight​​​ should occupies the space remaining. i.e. There are three fields,their weights are 1,2,3. The first view should occupy space = 1/(1+2+3)*space remaining,and so on.
Step4: At this point,each view with the attribute ​​android:layout_weight​​​ should add their occupied space remaining as their their final size. Their ​​onMeasure​​​ will be called again. As you see. the method ​​onMeasure​​​ of each view with ​​android:layout_weight​​ will be called at least twice.

Summary:
When we setup an individual view in ​​​LinearLayout​​​ with ​​android:layout_weight​​​,Its final size including two parts:one is its original size,the other is the space remaining occupied according to its value of weight.These behavior will trigger the invoke to ​​onMeasure​​​ twice.The space remaining will be distributed among the views with the value of ​​android:layout_weight​​ is bigger than zero.The space remaining equals the size of parent minuses the total size of children views.

Here are examples:

Equal distribution

To create a linear layout in which each child uses the same amount of space on the screen,set the ​​android:layout_width​​​ of each view to ​​0dp​​​ or the ​​android:layout_height​​​ of each view to ​​0dp​​​. Then set the ​​android:layout_weight​​​ to ​​1​​.

Example 1:

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="111"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/holo_green_light"
            android:text="222"
            android:textSize="20sp" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/holo_green_light"
            android:text="333"
            android:textSize="20sp" />
</LinearLayout>

Unequal distribution

Example 2:

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="555"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="22255555555" />
</LinearLayout>

In this example,their weights are both ​​1​​​, so that the total weight is 1+1 = 2. The first component is smaller than the second one. Because the width of the first one pluses 1/2 of space remaining is smaller than the second one.If their attribute ​​android:layout_weight​​​ are both ​​0dp​​,so that they can allocate the space remaining equally.

Example 3:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <TextView
            android:layout_width="40dp"
            android:layout_height="wrap_content"
            android:text="111" />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="222"/>
        <TextView
            android:layout_width="40dp"
            android:layout_height="wrap_content"
            android:text="333" />
</LinearLayout>

In this example,the total weight is 1. The Button will occupy all the space remaining.

Example 4:
I think this one is the most exciting example.

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

        <TextView
          android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="@android:color/black"
            android:text="111"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/holo_green_light"
            android:text="222"
            android:textSize="20sp" />
        <TextView
            android:id="@+id/tv2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="@android:color/holo_green_light"
            android:text="333"
            android:textSize="20sp" />
</LinearLayout>

Their widths are both as large as their parent layout with ​​android:layout_​​​.Keep in mind:the final size of a component with ​​android:layout_weight​​​ includes its original size and part of the space remaining .
Let s calculate the space remaining.
**space remaining = parent layout width - 3*(parent layout width) **
so space remaining equals ​​​-2*(parent layout width)​​​.
space remaining = match_parent - 3 * match_parent = -2 * match_parent
so,

• the width of tv1 = 1*match_parent + 2/5 * (-2*match_parent) = 1/5*match_parent
• the width of button1 = 1*match_parent + 1/5 * (-2*match_parent) = 3/5*match_parent
• the width of tv2 = 1*match_parent + 2/5 * (-2*match_parent) = 1/5*match_parent

If I change the weight of tv1 to 3.Now it is changed from 2 to 3. What would happen?

space remaining = match_parent - 3 * match_parent = -2 * match_parent
so,

• the width of tv1 = 1*match_parent + 3/6 * (-2*match_parent) = 0
• the width of button1 = 1*match_parent + 1/6 * (-2*match_parent) = 2/3*match_parent
• the width of tv2 = 1*match_parent + 2/6 * (-2*match_parent) = 1/3*match_parent

As you see,tv1 is gone.