Mbio

Technology & business for life & change

Android, LinearLayout Distribution Explained (weight and sizes)

with 10 comments

So this is one of the most bothering issues I have faced during my experience in Android. Besides it has been difficult to find a solution through the internet and in Android Developers it is not as detailed as expected so I feel that this post shall give you a hand to all of you who are still struggling.

I will focus on the main problem as I am sure all of you are familiar with the basic theory.

The problem: How in the world can I control the distribution of the elements in a LinearLayout? Yes, I have seen some examples using widths and heights of  0 dip and weights but, what does that mean exactly?

Weight: This has been the way of the Android team to achieve proportional distribution of elements within a LinearLayout. Others did that by using the classic percentages which might be more straightforward. Anyway, the idea here is the same with the only difference that weights are factors and percentages are…percentages. Let’s use a simple example:

Say you have a horizontal LinearLayout and you need to put 2 buttons and an image inside so that the buttons take the half of the space:

This layout from a percentage layout system may have the following configuration (W=weight/wi=width):

Button A: wi= 25% / Button B: wi= 25% / Image: wi= 50%

While in Android:

Button A: W=1 / Button B: W=1 / Image: W=2 (wi for all = 0 dip)

The conversion is the following % = item_weight / weight_sum (Button A: % = 1/4 = 0,25 = 25%).

Of course, if we don’t specify any weight for one of our elements it’ll behave as expected: wrap_content/fill_parent. (Examples below)

Crystal-clear so far?

But in Android there is another variable which is part of the game, and specially the combination of the former and the latter (weight and size).

Width and height: As you may know well, there are three values that are commonly used here (wrap_content, match_parent/fill_parent or a fixed size). I will obviate the explanation of these concepts when they are used just to determine width and height. Instead, let’s see what happens when we use them along with weight.

As you have seen in the previous example, if we set to 0 dip the value of the dimension which we are playing with (width in this example) we are telling the system to not to take care about the content but to focus on the whole size of the element, having an equitable distribution of our elements according to our weight values. This is the most common way to organize your layout.

Nevertheless, there is another possibility by using a combination of wrap_content and weight. It may result tricky but the key point is that with this configuration, the system will only take care about the free space left to distribute it according to the specified weight. Our example will help us with that. Note that I did not put the same text in the buttons, and check that the free space left by them is not the same since the text of the first button is longer. What it will happen if we change our width values to “wrap_content” is that our buttons may look longer since there have to be the same free space for every of our elements according to their weight. So that:

Button A: W=1, wi=wrap_content / Button B: W=1, wi=wrap_content / Image: W=2, wi = 0 dip

To make it clearer I’m sharing a template explaining the concept of distributable space:

 And some examples with different common configurations:

Hope it helps!

PD.: Before explaining it, I had to understand it. I did it thanks to this post:

References: Android Tales: How weight in LinearLayout works

About these ads

Written by joseluisugia

19, January.2012 at 14:32

10 Responses

Subscribe to comments with RSS.

  1. Reblogged this on srachels and commented:
    Aticle about android:layout_weight and layout_width

    srachels

    5, February.2012 at 19:33

  2. You can go look at LinearLayout.java in the source and see what it’s doing. This is (approximately) the algorithm:

    1. Set the initial size of components. If it’s wrap, use the contents. If it’s match, use the parent size. If it’s a set size (like 0dp), use that.
    2. Calculate how much space is remaining. This can be a negative number if the calculated sizes are too big for the screen.
    3. Use weights to distribute the extra space (or negative space) proportionally. Items with no weight have zero weight, so they stay the same size.

    There are lots of edge cases in their code, but this algorithm seems to explain all the results you got.

    Gene

    11, February.2012 at 19:53

    • This is a great approach Gene. Finally, it is what i’ve ended up by understanding.
      Hope I’ve explained it well. If not, please correct me.
      :)

      joseluisugia

      11, February.2012 at 23:12

  3. very nice this article clear a main layout issue. thanks

    Aamir Ali

    19, April.2012 at 08:34

  4. Thank’s, really good post! :D

    rosarguez

    1, June.2012 at 21:28

  5. Reblogged this on The Wordsmith and commented:
    LinearLayout distribution #android

    anonymouse

    20, July.2012 at 08:59

  6. Nice article with clear explanation. Linked to my bookmark :)

    Halis

    18, August.2013 at 22:09

  7. ミネトンカ 楽天

    ミネトンカ とは

    26, September.2013 at 05:42

  8. […] Por ejemplo: Un linearlayout con peso 3 y otro con 1, ocuparán respectivamente: 3 / (3+1) = 75% y 1/ (3+1) = 25%. Si queréis más información sobre el tema os recomiendo este artículo y este otro. […]

    Desarrollando Android #5

    22, November.2013 at 16:32


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 530 other followers

%d bloggers like this: