Understanding weight and layout_weight, the bigger layout_weight is, more it shrinks in the layout.

Question

I am trying to understand the weight layout with this example.

It is definitely not a rocket science. However, this example making it...

• The weightSum dictate how big the size is and
• Then divide the layout based on layout_weight value for the view in LinearLayout.

In this example I have a layout, weighted with 5, that is then divided between two views:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/transactionRowBackground"
    android:paddingBottom="5dp"
    android:paddingTop="5dp" android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" android:layout_weight="2" >

        <TextView
            android:id="@+id/title"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:clickable="true"
            android:gravity="top"
            android:padding="5dp"
            android:text="Test Title"
            android:textColor="@color/textColor"
            android:textSize="@dimen/subHeadingTextSize"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:clickable="true"
            android:gravity="top"
            android:padding="5dp"
            android:text="This is a test description"
            android:textColor="@color/textColor"
            android:textSize="@dimen/normalTextSize" />

    </LinearLayout>


    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:src="@drawable/ic_launcher"
        android:layout_gravity="top"
        android:contentDescription="" />

</LinearLayout>

The thing that I cannot understand is the bigger number I give to ImageViewer the smallest space it get from the parent. So how it is actually calculating the size for ImageView.

You can try with the above xml. If you change the layout weight of an ImageView to 1 , and child linearlayout to 4, that I believe makes more sense, then the opposite will occur.

ImageView will expend and child linearlayout will shrink. I thought the bigger the number is more you get some space.

Answer 1

With layout_weight you can specify a size ratio between multiple views. E.g. you have a MapView and a table which should show some additional information to the map. The map should use 3/4 of the screen and table should use 1/4 of the screen. Then you will set the layout_weight of the map to 3 and the layout_weight of the table to 1.

To get it work you also have to set the height or width (depending on your orientation) to 0dp. Example

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 space is assigned as follows:

1st text box = 1/(1+1+0)

2nd text box = 1/(1+1+0)

3rd text box = 0/(1+1+0)

Answer 2

Since on your outermost layout you have android:orientation="horizontal", I believe you want to vary the size/space taken by ImageView and internal LinearLayout in horizontal direction. For this case try using

android:layout_width="0dp"

on the layouts where you've put android:layout_weight. If your orientation of the outer layout was vertical, I would have used android:layout_height="0dp" in order for the weights to handle width/height of the layouts.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/transactionRowBackground"
    android:paddingBottom="5dp"
    android:paddingTop="5dp" android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" android:layout_weight="2" >

        <TextView
            android:id="@+id/title"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:clickable="true"
            android:gravity="top"
            android:padding="5dp"
            android:text="Test Title"
            android:textColor="@color/textColor"
            android:textSize="@dimen/subHeadingTextSize"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:clickable="true"
            android:gravity="top"
            android:padding="5dp"
            android:text="This is a test description"
            android:textColor="@color/textColor"
            android:textSize="@dimen/normalTextSize" />

    </LinearLayout>


    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:src="@drawable/ic_launcher"
        android:layout_gravity="top"
        android:contentDescription="" />

</LinearLayout>

Reading over Android docs might help: Layout Weights