Linear, Table e Relative Layouts com Android Studio

O que seriam das aplicaç�es Android se n�o existissem os layouts? A resposta � bem simples: as aplicaç�es n�o teriam nenhuma interface de comunicaç�o com o usu�rio, perdendo o que se prop�em a fazer, que nada mais � do que facilitar a vida das pessoas que utilizam aplicativos em seus dispositivos m�veis.

Ao desenvolver um aplicativo para Android, o layout � uma das principais preocupaç�es que o desenvolvedor deve ter, pois ele ser� o cart�o de visita de seu aplicativo, dando a primeira impress�o de como ele �.

Existem duas formas de se programar um layout no Android: via XML ou via c�digo Java. � muito recomendado que se faça o layout em XML e o referencie dentro de sua aplicaç�o, pois o Android Studio j� fornece ferramentas visuais para a construç�o de layouts que geram os c�digos XML, mas mesmo assim � interessante que se saiba como o XML funciona.

Para iniciar, na Figura 1 vemos o editor de layouts do Android Studio e alguns componentes que podem ser utilizados no menu do lado esquerdo. Com base neles � que vamos trabalhar.

Figura 1. Editor de Layout do Android Studio

Para usar os componentes que vimos basta apenas clicar sobre o desejado e arrast�-lo para a tela. Assim, o c�digo XML � automaticamente gerado, como mostra a Listagem 1.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Hello World"
     android:id="@+id/textView2"
     android:layout_alignParentTop="true"
     android:layout_alignParentLeft="true"
     android:layout_alignParentStart="true" />

</RelativeLayout>

Listagem 1. C�digo XML de layout simples

O c�digo apresentado define um Relative Layout (tipo de layout utilizado para posicionar os elementos em relaç�o a outro, e que veremos mais a frente) e dentro dele � definido o componente de tela TextView, que mostrar� a mensagem Hello World. Notem que as propriedades mais importantes que devem ser utilizadas quando um layout � definido s�o android:layout_width e android:layout_height porque elas definir�o a altura e a largura do layout em quest�o de tr�s formas:

match_parent: Em vers�es anteriores ao Android 2.2, essa notaç�o tinha o nome de fill_paret, e isso significa que o componente deve ocupar o tamanho definido pelo seu parente (pai). Deve ser utilizada sempre que o layout ocupar toda a tela;
wrap_content: Essa notaç�o diz que o componente deve ocupar apenas o seu tamanho, sem nenhum tipo de refatoraç�o;
Definiç�o manual: Essa � uma das formas utilizadas para definir um tamanho, mas deve-se tomar muito cuidado, pois as telas dos aparelhos m�veis possuem v�rios tamanhos e isso pode tornar seu aplicativo incompat�vel com alguns tamanhos de tela.

Nas pr�ximas seç�es vamos estudar os tipos de layout que est�o no menu da Figura 1.

Relative Layout

O Relative Layout � o tipo de layout utilizado no Android para se posicionar os elementos em relaç�o a outro. Por exemplo, se temos um Text View e o desenvolvedor posicionar o bot�o a sua esquerda, no XML pode-se fazer refer�ncia a esse para que o elemento de tela seja posicionado em um determinado lugar de acordo com sua posiç�o.

A Figura 2 mostra o Relative Layout em aç�o, com os elementos de tela devidamente alinhados.

Figura 2. Relative Layout

Notem quem o Primeiro Text View est� no topo e o segundo logo abaixo dele: isso � feito utilizando a notaç�o XML android:layout_below, que significa para posicionar o elemento abaixo de outro que j� est� definido na tela, que nesse caso, � o primeiro Text View da tela. J� o terceiro Text View est� posicionado ao lado direito do segundo Text View: a notaç�o para completar isso � a android:layout_toRightOfe juntamente com o ID do elemento que se deseja alinhar. A Listagem 2 mostra o c�digo completo da tela demonstrada na Figura 2.


<?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:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Ola Primeiro"
     android:id="@+id/textView4"
     android:layout_marginTop="41dp"
     android:layout_alignParentTop="true"
     android:layout_alignParentLeft="true"
     android:layout_alignParentStart="true" />

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Ola Segundo"
     android:id="@+id/textView5"
     android:layout_below="@+id/textView4"
     android:layout_alignParentLeft="true"
     android:layout_alignParentStart="true"
     android:layout_marginTop="74dp" />

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Ola Terceiro"
     android:id="@+id/textView6"
     android:layout_alignTop="@+id/textView5"
     android:layout_toRightOf="@+id/textView5"
     android:layout_toEndOf="@+id/textView5"
     android:layout_marginLeft="138dp"
     android:layout_marginStart="138dp" />
</RelativeLayout>

Listagem 2. C�digo do Relative Layout da Figura 2

O c�digo mostra claramente os componentes e como eles s�o alinhados. Destaca-se o exemplo do segundo TextView, onde a notaç�o android:layout_below est� claramente dizendo que ele ficar� abaixo do componente referenciado, que � o textView4.

Pode-se observar em outros elementos de tela o mesmo comportamento, mas com funcionalidades diferentes, como o android:layout_alignTop, que faz o componente alinhar-se seguindo o topo do referenciado.

Linear Layout

O linear layout � um dos tipos de layouts mais utilizados no desenvolvimento com Android, pois possibilita organizar seus componentes de duas formas: alinhados horizontalmente ou alinhados verticalmente.

Para decidir qual ser� a orientaç�o do seu Linear Layout deve-se trabalhar com a notaç�o android:orientation. Utilizando o Android Studio pode-se criar esse layout clicando com o bot�o direito na pasta layout e depois new. Quando abrir o Drop down, clique em Layout Resource File e preencha conforme mostra a Figura 3.

Figura 3. Criando Linear Layout

Repare que o layout � criado vazio, portanto o desenvolvedor deve colocar os componentes. A Figura 4 mostra uma tela criada com dois componentes TextView para demonstrar como eles ser�o alinhados.

Figura 4. Linear Layout

Notem que o layout est� alinhando os componentes verticalmente, graças a tag android:orientation, que recebe como valor �vertical�. A Listagem 3 mostra o c�digo da tela apresentada.


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

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Ola DevMedia"
     android:id="@+id/textView" />

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Tudo bem?"
     android:id="@+id/textView3" />
</LinearLayout>

Listagem 3. C�digo XML linear layout vertical

Agora, para termos o layout da Figura 5, onde os componentes foram alinhados horizontalmente, basta usarmos o c�digo da Listagem 4.

Figura 5. Linear Layout Orientado Horizontalmente


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

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Ola DevMedia"
     android:id="@+id/textView" />

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Tudo bem?"
     android:id="@+id/textView3" />
</LinearLayout>

Listagem 4. C�digo Linear Layout alinhado horizontalmente

Reparou que a tag de orientaç�o sumiu? Por padr�o do Linear Layout, o Android, quando n�o encontra a tag de orientaç�o, assume que a orientaç�o ser� horizontal.

Table Layout

O Table Layout � uma especializaç�o do Linear Layout e � muito utilizado para criar formul�rios e telas de login. Para cri�-lo deve-se seguir os mesmos passos da Listagem 4, mas o root element deve ser mudado para TableLayout, assim, ao criar sua tela estar� vazia, como mostra o c�digo da Listagem 5.


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

Listagem 5. C�digo b�sico Table Layout

Na Figura 6 vemos um exemplo de linhas e colunas criadas utilizando o Table Layout. Seu c�digo � apresentado na Listagem 6.

Figura 6. Table Layout


<TableLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:shrinkColumns="*"  android:stretchColumns="*" 
 android:background="#ffffff">
 <!-- Linha 1 com uma coluna-->
 <TableRow
     android:layout_height="wrap_content"
     android:layout_width="fill_parent"
     android:gravity="center_horizontal">
     <TextView
         android:id="@+id/TextView00"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:textSize="20dp"
         android:text="Linha 1"
         android:layout_span="3"
         android:padding="18dip"
         android:background="#FF0000"
         android:textColor="#000"/>
 </TableRow>
 <!-- Linha 2 com 2 colunas -->
 <TableRow
     android:layout_height="wrap_content"
     android:layout_width="fill_parent"
     android:gravity="center_horizontal">

     <TextView
         android:id="@+id/TextView01"
         android:text="Linha 2 Coluna 1"
         android:layout_weight="1"
         android:background="#00AF00"
         android:textColor="#000000"
         android:padding="18dip"
         android:gravity="center"/>

     <TextView
         android:id="@+id/TextView02"
         android:text="Linha 2 Coluna 2"
         android:layout_weight="1"
         android:background="#00FF00"
         android:textColor="#000000"
         android:padding="18dip"
         android:gravity="center"/>
 </TableRow>
 <!-- Linha 2 com 3 colunas -->
 <TableRow
     android:id="@+id/tableRow1"
     android:layout_height="wrap_content"
     android:layout_width="match_parent">

     <TextView
         android:id="@+id/TextView03"
         android:text="Linha 3 Coluna 1"
         android:layout_weight="1"
         android:background="#0000FF"
         android:textColor="#000000"
         android:padding="20dip"
         android:gravity="center"/>

     <TextView
         android:id="@+id/TextView04"
         android:text="Linha 3 Coluna 2"
         android:layout_weight="1"
         android:background="#0000CF"
         android:textColor="#000000"
         android:padding="20dip"
         android:gravity="center"/>

     <TextView
         android:id="@+id/TextView05"
         android:text="Linha 3 Coluna 3"
         android:layout_weight="1"
         android:background="#0000AF"
         android:textColor="#000000"
         android:padding="20dip"
         android:gravity="center"/>
 </TableRow>
</TableLayout>

Listagem 6. C�digo XML do Table Layout

Notem que o c�digo apresentado � muito parecido com as definiç�es de tabelas do HTML. Primeiro, o TableLayout � definido como um componente interno. A seguir definimos um TableRow e dentro deste os elementos de tela desejados s�o colocados alinhados horizontalmente dentro da linha declarada. Lembre-se que todos os elementos de tela devem estar definidos dentro de um TableRow se quiser que eles estejam alinhados na interface gr�fica, j� que tudo o que estiver dento dele far� parte de uma mesma linha.

Combinaç�o de Layouts

Outra pr�tica interessante que pode ser feita � a combinaç�o entre layouts, onde em uma parte da tela voc� precise de um tipo de alinhamento e em outra parte um outro tipo. O que pode ser feito, por exemplo, � colocar um Linear Layout dentro de um Relative Layout. A Figura 7 mostra um exemplo bem b�sico dessa combinaç�o de layouts.

Figura 7. Combinaç�o entre Linear Layout e Relative Layout

Notem que a tela est� diferenciada e foi alinhada de acordo com seus respectivos layouts. A Listagem 7 mostra o c�digo XML que deu origem a essa tela.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


 <LinearLayout
     android:orientation="horizontal"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_alignParentTop="true"
     android:layout_centerHorizontal="true"
     android:layout_marginTop="98dp"
     android:id="@+id/linearLayout">

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:text="Linear1"
         android:id="@+id/textView" />

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:text="Linear2"
         android:id="@+id/textView3" />

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:text="Linear3"
         android:id="@+id/textView2" />

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:text="Linear4"
         android:id="@+id/textView5" />

 </LinearLayout>

 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Botao Relative"
     android:id="@+id/button"
     android:layout_alignParentTop="true"
     android:layout_alignParentLeft="true"
     android:layout_alignParentStart="true" />

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textAppearance="?android:attr/textAppearanceLarge"
     android:text="Relative"
     android:id="@+id/textView4"
     android:layout_alignBottom="@+id/button"
     android:layout_toRightOf="@+id/button"
     android:layout_toEndOf="@+id/button"
     android:layout_marginLeft="58dp"
     android:layout_marginStart="58dp" />
</RelativeLayout>

Listagem 7. C�digo XML de combinaç�o de layouts

O desenvolvedor pode se perguntar: se existem dois tipos de layouts com suas peculiaridades, como o Android sabe o que � de quem? A resposta � bem simples: os elementos espec�ficos t�m que estar contidos dentro das tags relativas ao seu layout, ou seja, se est� contido dentro de � um componente linear aceito, e o mesmo deve acontecer com os demais layouts utilizados.

Ao fazer essa combinaç�o entre dois tipos de layouts deve-se tomar muito cuidado, pois � um processo muito custoso quando se vai renderizar essa tela no dispositivo. O m�todo onCreate do Java, ao fazer a invocaç�o do m�todo setContentView(R.layout.<referencia_nosso_layout>), vai inflar o layout criado, ou seja, ele ir� localizar a refer�ncia passada e pegar o layout em quest�o e recursivamente ir� converter o XML para o objeto Java. Ap�s essa convers�o ele est� apto a mostrar na tela o layout desenvolvido.

Para saber mais sobre como criar o layout diretamente no Java, acompanhe a seç�o a seguir.

Criando Layout em Java

No Android, os layouts podem tamb�m ser criados em Java dentro da Activity, mas esse n�o � um processo muito recomendado, pois o desenvolvedor pode perder muito tempo criando um layout via c�digo, enquanto j� existem ferramentas que fazer isso sem o menor esforço, como vimos nos exemplos anteriores.

Vamos usar o exemplo da Figura 4 e a Listagem 3, que foi escrita em XML, agora � escrita em Java, como mostra a Listagem 8.


package br.com.devmedia.appdevmedia;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     LinearLayout layout = new LinearLayout(this);
     layout.setOrientation(LinearLayout.VERTICAL);
     layout.setLayoutParams(new LinearLayout
     .LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, 
     LinearLayout.LayoutParams.FILL_PARENT));

     TextView titleView = new TextView(this);
     LinearLayout.LayoutParams lparams = new 
     LinearLayout.LayoutParams(
     LinearLayout.LayoutParams.WRAP_CONTENT, 
     LinearLayout.LayoutParams.WRAP_CONTENT);
     titleView.setLayoutParams(lparams);
     titleView.setText("Ola DevMedia");
     layout.addView(titleView);

     TextView titleView2 = new TextView(this);
     LinearLayout.LayoutParams lparams2 = new 
     LinearLayout.LayoutParams(
     LinearLayout.LayoutParams.WRAP_CONTENT, 
     LinearLayout.LayoutParams.WRAP_CONTENT);
     titleView2.setLayoutParams(lparams2);
     titleView2.setText("Tudo bem?");
     layout.addView(titleView2);

     setContentView(layout);
 }
}

Listagem 8. Linear layout em Java

As Listagens 3 e 8 t�m a mesma funç�o, mas a codificaç�o em Java permite que o layout seja definido dentro da pr�pria Activity.

Observe que � um c�digo simples, mas muito trabalhoso para se desenvolver, mas imagine em uma aplicaç�o onde se trabalha com muitas Activities: o c�digo ficaria praticamente ileg�vel e, al�m do mais, sempre que quis�ssemos ver como est� a tela, teria que recompilar e exibir no emulador, enquanto o Android Studio j� fornece um renderizador de XML para poder mostrar em tempo real como est� o layout que o programador est� desenvolvendo.

Com isso, conclu�mos que � muito mais f�cil trabalhar com o XML do que o Java. Deixe que a convers�o do XML seja feita automaticamente, afinal de contas, � uma das principais vantagens de se trabalhar com o Android Studio.

E n�o perca tempo usando um layout para definir outro. Cada um tem suas propriedades e n�o adianta reescrever o c�digo, pois � perda de tempo.

E como vimos, cuidado com a combinaç�o de layouts, pois � muito f�cil, mas precisamos de atenç�o para n�o referenciar um elemento dentro do layout errado.