Existe um recurso de layout que muitas vezes é esquecido ou ignorado, mas que é extremamente poderoso e nos permite ter um controle muito fino sobre a distribuição e a proporção de componentes na tela: o LinearLayout usando Layout weights (layout_weight).

Vamos começar com um exemplo bem simples. Suponha que queiramos dividir a tela ao meio verticalmente com o layout a seguir:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="match_parent" android:layout_width="match_parent" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="match_parent" android:layout_width="match_parent" />
</LinearLayout>

Não deveria ser uma grande surpresa ver que o primeiro layout “filho” (com o fundo vermelho) preencheu a tela inteira, porque o seu layout_height (altura) está definido para match_parent (que ocupa todo o espaço disponível).

Poderíamos mudar o layout_height para wrap_content (que ocupa somente o espaço necessário), mas isso não faria o que queremos, pois os dois layouts iriam diminuir para altura 0 (height) porque eles não têm “filhos” (conteúdo, como outras views.. imageview, button, textview etc).

Para conseguir o que queremos (dividir a tela ao meio, lembram?), podemos aplicar o parametro layout_weight em ambos os “filhos”:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="match_parent" android:layout_width="match_parent"
        android:layout_weight="1" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="match_parent" android:layout_width="match_parent"
        android:layout_weight="1" />
</LinearLayout>

Agora este layout faz exatamente o que queremos:

Então, o que está acontecendo aqui? Estamos definindo cada um dos layouts “filhos” com um layout_width de match_parent (aquele que ocupa todo o espaço possível), e definindo um valor para layout_weight (ou seja, alterando o valor deste atributo do seu padrão que é 0).

Podemos dizer ao layout pai para dividir o espaço disponível entre os filhos. Neste exemplo, atribuímos o mesmo valor para de layout_weight para ambos os filhos e então será dada uma parte igual do espaço disponível a cada um deles.

Se quisermos dividir o espaço do layout “pai” em partes iguais, basta setar o layout_weight de todos os filhos (nesse caso, são novos LinearLayout’s, mas poderiam ser Buttons, ImageViews, TextViews, etc…) para 1.

Agora, se queremos dividi-los de forma desigual, podemos fazer isso de diversas maneiras. Podemos usar números fracionários que somem 1, ou podemos usar valores inteiros:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="0.66667" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="0.33333" />
</LinearLayout>

ou

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="2" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="1" />
</LinearLayout>

Ambas irão produzir o mesmo resultado:

Espere um segundo. Enquanto certamente estamos vendo uma divisão de dois terços, nós demos ao layout vermelho um peso maior do que ao verde, então esperaríamos ver o vermelho ocupando dois terços do espaço disponível.

Além disso, quando se joga com “pesos” de layout, às vezes é possível ver as coisas funcionando como esperamos – e como já vimos aqui. Esta é uma pegadinha comum com layout_weight e a chave aqui somos nós que instruímos ambos os layouts filhos a tentar preencher o “pai” (usando layout_height = “match_parent“).

Isso faz com que o comportamento seja o oposto do desejado. Nós podemos reverter esse comportamento alterando os layouts filhos setando layout_height = “wrap_content“:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="wrap_content" android:layout_width="match_parent"
        android:layout_weight="2" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="wrap_content" android:layout_width="match_parent"
        android:layout_weight="1" />
</LinearLayout>

E agora sim vemos o que estávamos esperando:

Na segunda parte deste artigo veremos mais alguns truques que podemos fazer com layout_weights e, claro, mais algumas pegadinhas.

Observação: Este texto é uma adaptação do original Layout Weights – Part 1, de Mark Allison, feita sob a expressa autorização do autor.