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.

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.

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.

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.


<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.

Tecnologias:

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Allan Em 2016

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Rogerio Conceicao

N�vel

Excelente Artigo. Claro, did�tico e muito simples de entender. Parab�ns!!!

há +1 ano

Douglas

N�vel 0

Agradecemos pelo seu elogio, Rogerio! xD

há +1 ano

Estev�o Dias

N�vel 21

Parab�ns!

há +1 ano

Douglas

N�vel 0

Ol� Estevao, tudo bem?

Agradecemos o seu coment�rio e elogio.

Qualquer d�vida estamos � disposi��o.

Um abra�o.

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Linear, Table e Relative Layouts com Android Studio

Conheceremos nesse artigo os tr�s principais tipos de layout do ambiente Android.

Relative Layout

Linear Layout

Table Layout

Combina��o de Layouts

Criando Layout em Java

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Perguntas frequentes

Nossos casos de sucesso