Android - Layout LinearLayout

Olá, Pessoal

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!