Android Layouts (ViewGroups) – (Parte 2 – RalativeLayout )

 

RelativeLayout

Continuando a explicação de como trabalhar com os layouts no Android, iremos abordar agora o RelativeLayout.

 

 

 

O RelativeLayout os componentes visuais (views) do layout  estão dispostos sempre baseado em alguma referência, que pode ser outros componentes ou os lados (esquerda, direita, acima e abaixo) do próprio layout.

Sempre que for utilizar um componente nesse layout deve-se informar como ele estará posicionado em relação a outro componente. Todos os componentes em um RelativeLayout estão de certa forma interligados, seja diretamente ou indiretamente, uma dificuldade que muitos desenvolvedores encontram com esse layout é quando precisa alterar a disposição de um componente e arrasta consigo um outro grupo de componentes. Nesse caso, deve-se ter cuidado e primeiro “isolar” o componente para depois posiciona-lo em outro lugar.

relativelayout

No layout ao lado temos inicialmente o componente textview “Nome:” posicionado na parte superior da tela. As propriedades layout_alignParentTop, layout_alignParentLeft mantém eles posicionados em relação ao parte de cima do layout e à esquerda do mesmo. A propriedade layout_alignParentStart faz com que a borda de início dessa exibição corresponda à borda inicial do pai. O editText abaixo está alinhado ao textView “Nome” pela propriedade layout_below que posiciona a borda superior do editText abaixo do ID de âncora fornecido, que neste caso foi o textView “Nome”. Com base nessa relação foram posicionados os outros componentes.

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

    <TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Nome:"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="13dp" />

    <EditText
    android:id="@+id/edtNome"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="11dp"
    android:layout_below="@+id/textView1"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">
    <requestFocus />
    </EditText>

    <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/edtNome"
    android:layout_alignParentLeft="true"
    android:text="Telefone:" />

    <EditText
    android:id="@+id/edtTelefone"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView2"
    android:layout_alignParentLeft="true"
    />
    <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/edtTelefone"
    android:layout_alignParentLeft="true"
    android:text="Endereço:" />

    <EditText
    android:id="@+id/edtEndereco"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView3"
    android:layout_alignParentLeft="true"
    />

    <Button
    android:id="@+id/btnSalvar"
    android:layout_weight="1"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/edtEndereco"
    android:layout_alignParentLeft="true"
    android:text="Salvar" />

    <Button
    android:id="@+id/btnCancelar"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancelar"
    android:layout_alignBaseline="@+id/btnSalvar"
    android:layout_alignBottom="@+id/btnSalvar"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

    </RelativeLayout>

relativecomlinearExite a opção também de combinar o uso de dois layouts diferentes. No exemplo abaixo, o layout principal é um RelativeLayout e os botões de “Salvar” e “Cancelar” foram envolvidos em um LinearLayout. Depois o LinearLayout foi alinhado ao edtText “Endereco” fazendo com que todos os componentes existente dentro dele também se alinhassem. Perceba que os botões ficam lado a lado por causa da propriedade orientation do LinearLayout está com o valor horizontal. 

 

 

 

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

    <TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Nome:"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="13dp" />

    <EditText
    android:id="@+id/edtNome"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="11dp"
    android:layout_below="@+id/textView1"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">
    <requestFocus />
    </EditText>

    <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/edtNome"
    android:layout_alignParentLeft="true"
    android:text="Telefone:" />

    <EditText
    android:id="@+id/edtTelefone"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView2"
    android:layout_alignParentLeft="true"
    />
    <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/edtTelefone"
    android:layout_alignParentLeft="true"
    android:text="Endereço:" />

    <EditText
    android:id="@+id/edtEndereco"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView3"
    android:layout_alignParentLeft="true"
    />

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_below="@+id/edtEndereco"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    <Button
    android:id="@+id/btnSalvar"
    android:layout_weight="1"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Salvar"/>


    <Button
    android:id="@+id/btnCancelar"
    android:layout_weight="1"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancelar" />

    </LinearLayout>


    </RelativeLayout>

Segue abaixo uma tabela com as propriedades que podem ser utilizadas em um ReativeLayout, maiores informações na documentação do Android.

android:layout_above Posiciona a borda inferior dessa exibição acima da ID de âncora fornecida.
android:layout_alignBaseline Posiciona a linha de base desse modo de exibição na linha de base do ID de âncora fornecido.
android:layout_alignBottom Faz com que a borda inferior dessa exibição corresponda à borda inferior da ID de âncora exibida.
android:layout_alignEnd Faz com que o limite final dessa exibição corresponda à borda final do ID de âncora fornecido.
android:layout_alignLeft Faz com que a margem esquerda dessa vista corresponda à margem esquerda da ID de âncora fornecida.
android:layout_alignParentBottom Se true, faz com que a borda inferior dessa exibição corresponda à borda inferior do pai.
android:layout_alignParentEnd Se true, faz com que a extremidade final dessa exibição corresponda à extremidade final do pai.
android:layout_alignParentLeft Se verdadeiro, faz com que a margem esquerda dessa exibição corresponda à margem esquerda do pai.
android:layout_alignParentRight Se verdadeiro, faz com que a margem direita dessa exibição corresponda à margem direita do pai.
android:layout_alignParentStart Se true, faz com que a borda de início dessa exibição corresponda à borda inicial do pai.
android:layout_alignParentTop Se true, faz com que a borda superior dessa exibição corresponda à borda superior do pai.
android:layout_alignRight Faz com que a margem direita dessa exibição corresponda à borda direita da ID de âncora fornecida.
android:layout_alignStart Faz com que a borda de início dessa exibição corresponda à borda inicial da ID de âncora fornecida.
android:layout_alignTop Faz com que a borda de início dessa exibição corresponda à borda inicial da ID de âncora fornecida.
android:layout_alignWithParentIfMissing Se definido como true, o pai será usado como âncora quando a âncora não puder ser encontrada para layout_toLeftOf, layout_toRightOf, etc.
android:layout_below Posiciona a borda superior dessa exibição abaixo do ID de âncora fornecido.
android:layout_centerHorizontal Se verdadeiro, centra esta criança horizontalmente dentro de seu pai.
android:layout_centerInParent Se verdadeiro, centra esta criança horizontalmente e verticalmente dentro de seu pai.
android:layout_centerVertical Se verdadeiro, centra esta criança verticalmente dentro de seu pai.
android:layout_toEndOf Posiciona a borda de início desta exibição até o final do ID de âncora fornecido.
android:layout_toLeftOf Posiciona a borda direita dessa exibição à esquerda do ID de âncora fornecido.
android:layout_toRightOf Posiciona a margem esquerda dessa exibição à direita do ID de âncora fornecido.
android:layout_toStartOf Posiciona a extremidade de extremidade dessa exibição para o início do ID de âncora fornecido.

 

Deixe uma resposta

Specify Google Client ID and Secret in Super Socializer > Social Login section in admin panel for Google Login to work

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *