# Mbio

Technology & business for life & change

## Android, LinearLayout Distribution Explained (weight and sizes)

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:

Written by joseluisugia

19, January.2012 at 14:32

Posted in Android

### 16 Responses

1. Reblogged this on srachels and commented:

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

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

9. […] 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. […]

10. thanks a lot very helpfull for me

zeeshan

25, February.2014 at 06:04

11. nice explaination really great job .

Aasim pervaiz

13, September.2014 at 21:21

12. […] For a great explanation of this, have a look at this link: http://ugiagonzalez.com/2012/01/19/android-linearlayout-distribution-explained-weight-and-sizes/ […]

13. Clear explanation… thanks !! ( added to bookmark ;) )