Vou iniciar uma série de tutorias a respeito de layout, hoje começarei com o LinearLayout, esse que é o mais básico de todos os tipos de layout utilizados no Android.
Atualmente existem duas variações do LinearLayout, que são:
1. Horizontal -> todos os widgets adicionados dentro desse layout são colocados um do lado do outro.
2. Vertical -> todos os widgets adicionados dentro de layout são colocados um abaixo do outro.
Dentro de um LinearLayout podemos conter vários widgets, e inclusive conter outros LinearLaytouts que contenham outros widgets.
As principais propriedades do layout LinearLayout são:
1. layout_width -> largura do layout
2. layout_height -> altura do layout
3. orientation -> vertical ou horizontal
4. layout_gravity -> define se o layout será exibido no topo, rodapé, centralizado, etc...
Abaixo temos um exemplo de LinearLayut aninhado, que pode ser utilizado como base para cadastro qualquer:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/linearLayout1"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/tvCodigo"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="right"
android:text="Código :" />
<EditText
android:id="@+id/etCodigo"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="4"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/tvNome"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="right"
android:text="Nome :" />
<EditText
android:id="@+id/etNome"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="4"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
<Button
android:id="@+id/btnConfirmar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Confirmar" />
<Button
android:id="@+id/btnCancelar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar" />
</LinearLayout>
</LinearLayout>
Como resultado temos a seguinte imagem:
Abaixo temos uma pequena variação do exemplo acima, a mudança é que agora os botões estão alinhados ao rodapé da tela, e que também eles estão ocupando toda a largura da tela.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/linearLayout1"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/tvCodigo"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="right"
android:text="Código :" />
<EditText
android:id="@+id/etCodigo"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="4"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/tvNome"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="right"
android:text="Nome :" />
<EditText
android:id="@+id/etNome"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="4"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom" >
<Button
android:id="@+id/btnConfirmar"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Confirmar" />
<Button
android:id="@+id/btnCancelar"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Cancelar" />
</LinearLayout>
</LinearLayout>
Como resultado temos a imagem abaixo:
O exemplo abaixo mostra como criar uma tela de menu principal ou dashboard.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:baselineAligned="false"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"
android:weightSum="6"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/lin1"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="Opções:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/btnIncluir"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Incluir" />
<Button
android:id="@+id/btnConsultar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Consultar" />
<Button
android:id="@+id/btnAlterar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Alterar" />
<Button
android:id="@+id/btnExcluir"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Excluir" />
</LinearLayout>
</LinearLayout>
Como resultado temos a seguinte imagem:
A seguir mais um exemplo de como criar uma tela de cadastro.
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#2a2a2a"
android:orientation="horizontal" >
<Button
android:id="@+id/btnConfirmar"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Confirmar" />
<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>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Codigo:" />
<EditText
android:id="@+id/edtCodigo"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nome:" />
<EditText
android:id="@+id/edtNome"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Endereço:" />
<EditText
android:id="@+id/edtEndereco"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Como resultado temos a seguinte imagem:Esse é o início para montar uma tela em Android, em breve estarei apresentando outros tipos de layouts e quem sabe aumentando os exemplos utilizados nesse tutorial.
Posts relacionados:
RelativeLayout - http://escoladeandroid.blogspot.com.br/2012/04/android-layout-relativelayout.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!





