Android - Layout RelativeLayout

Olá, Pessoal

Seguindo a série sobre layout vou apresentar agora mais um tipo de layout, o RelativeLayout.

Com ele podemos posicionar os componentes um em relação ao outro, ou seja, adicionamos um textview na tela e depois podemos adicionar um edittext, abaixo, acima, ou do lado desse textview.

Abaixo seguem as principais propriedades que podemos utilizar com esse tipo de layout.

android:layout_below = posiciona o componente abaixo do componente indicado
android:layout_above = posiciona o componente acima do componente indicado
android:layout_toRightOf = posiciona o componente a direita do componente indicado
android:layout_toLeftOf = posiciona o componente a esquerda do componente indicado
android:layout_alignParentTop = posiciona o componente no topo do componente indicado
android:layout_alignParentBottom = posiciona o componente abaixo do componente indicado

Abaixo seguem alguns exemplos de utilização.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Código" />

    <EditText
        android:id="@+id/etCodigo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/textView1" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/etNome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/etCodigo"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/etCodigo" />

    <TextView
        android:id="@+id/tvNome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/etNome"
        android:text="Nome" />

    <Button
        android:id="@+id/btnConfirmar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/etNome"
        android:text="Confirmar" />

    <Button
        android:id="@+id/btnCancelar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btnConfirmar"
        android:layout_alignBottom="@+id/btnConfirmar"
        android:layout_toLeftOf="@+id/btnConfirmar"
        android:text="Cancelar" />

</RelativeLayout>

Como resultado temos a seguinte imagem.

Abaixo outro exemplo de relative layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/tvCodigo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Código" />


    <EditText
        android:id="@+id/etCodigo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/tvCodigo" >

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/tvNome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/etCodigo"
        android:text="Nome" />


    <EditText
        android:id="@+id/etNome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/tvNome" />

    <TextView
        android:id="@+id/tvObs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/etNome"
        android:text="Observação" />


    <EditText
        android:id="@+id/etObs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/tvObs" />

</RelativeLayout>

Como resultado temos a seguinte imagem.

Abaixo segue um exemplo apenas para visualizar as possibilidades.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Button4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Button5" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button5"
        android:layout_toLeftOf="@+id/button5"
        android:text="Button6" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button5"
        android:layout_toRightOf="@+id/button5"
        android:text="Button7" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button5"
        android:layout_toLeftOf="@+id/button5"
        android:text="Button9" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button5"
        android:layout_toRightOf="@+id/button5"
        android:text="Button8" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button9"
        android:layout_alignRight="@+id/button7"
        android:layout_below="@+id/button7"
        android:text="Button10" />

</RelativeLayout>

Abaixo segue o resultado.

Por enquanto é isso pessoal, assim que eu fizer exemplo mais interessantes sobre RelativeLayout eu posto aqui no blog.


Posts relacionados:
LinearLayout - http://escoladeandroid.blogspot.com.br/2012/03/android-layout-linearlayout.html


Desenvolvi o jogo Circus Puzzle Free ele é um quebra-cabeça e está publicado no Android Market, agradeço a todos que baixarem, jogarem e comentarem.

Desenv com qualidade!