Percentual Layout

Olá povo,

Quase sempre, quando vou ministrar aula de Android, sempre tem alguém que pergunta: “Professor tem como definir o tamanho de um componente usando percentual?”. Normalmente quem faz essa pergunta é algum desenvolvedor web, onde utilizar valores percentuais para elementos de UI é algo bem comum no front-end de uma aplicação.
Mas no caso do Android, a resposta era sempre não, mas podíamos resolver esse problema utilizando o LinearLayout e definir nas views filhas a propriedade android:layout_weight como mostrei nesse post aqui.
Mas finalmente o Google criou para nós, gerenciadores de layout que suportam medidas percentuais. São eles: PercentFrameLayout e PercentRelativeLayout.

Para utiliza-los, basta adicionar a seguinte dependência no build.gradle.

dependencies {
...
compile 'com.android.support:percent:23.1.1'
}

Depois é só utilizar no arquivo de layout.

<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<View
android:id="@+id/centered_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF0000"
app:layout_heightPercent="@fraction/fifty_percent"
app:layout_widthPercent="@fraction/fifty_percent"/>

<TextView
android:id="@+id/caption"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/centered_image"
android:background="#00FF00"
android:text="Texto"
app:layout_marginRightPercent="@fraction/twentyfive_percent"
app:layout_marginLeftPercent="@fraction/twentyfive_percent"
app:layout_widthPercent="50%"/>

Perceba que para evitar problemas de compilação adicionamos a largura e altura do componente como 0dp, mas as propriedades que realmente definirão o tamanho do componente são app:layout_heightPercent e app:layout_widthPercent.
Estamos utilizando uma referência para @fraction ao invés do valor hard-coded. Desta forma defina esses valores, por exemplo, no res/values/dimens.xml.

...
25%
50%

Outro detalhe importante é que podemos definir margens utilizando valores percentuais, recurso que não conseguíamos no LinearLayout.
O resultado ficará como a seguir:

Se tiver dúvidas, consulte a documentação oficial:

Ou deixe seus comentários aqui :)

4br4ç05,
nglauber