Clever Geek Handbook

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

I am trying to understand weight layout with this example.

This is definitely not rocket science. However, this example does it ...

  • Weight Sum dictates how large and
  • Then split the layout based on the layout_weight value for the view in LinearLayout.

In this example, I have a layout weighted with 5, which then divides into two:

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

What I can't figure out is the larger number I give the ImageViewer the smallest space it gets from the parent. So how does it actually calculate the size for the ImageView.

You can try with the above xml. If you change the weight of the ImageView to 1 and the child linearlayout to 4, which I think makes more sense, then the opposite will happen.

The ImageView will be consumed and the child linearlayout will shrink. I thought that the larger the number, the more you get some space.

+3


source to share


2 answers


Since your outer layout is android:orientation="horizontal"

, I believe you want to change the size / space occupied by the ImageView

inner LinearLayout

in the horizontal direction as well. For this case, try using

android:layout_width="0dp"

on the layouts you put on android:layout_weight

. If the orientation of the outer layout was vertical I would use the android:layout_height="0dp"

weights to handle the 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 Android Docs Can Help: Layout Layout

+3


source


With, layout_weight

you can specify the size ratio between several views. For example. you also have a MapView

table that should display some additional information on the map. The map should use 3/4 of the screen and the table should use 1/4 of the screen. Then you set the layout_weight of the map to 3 and the layout_weight

table to 1.

To get it working, you also need to set the height and width (depending on your orientation) to 0dp

. Example



If there are three text boxes and two of them declare weight 1 and the third is not assigned weight (0), then the remaining space is assigned as follows:

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

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

Third text block = 0 / (1 + 1 + 0)

+1


source






More articles:


All Articles