Tutorial Android #10 – Ajustando o Layout para Paisagem

Padrão

Olá leitores! Hoje teremos um post curto, mas bastante interessante! Vamos ver como ajustar o layout da nossa Lista de Restaurantes para se adaptar ao layout paisagem (que ocorre quando o usuário virar o celular).

Para isso, dentro da pasta res, vamos criar uma nova pasta chamada layout-land.

Agora, dentro desta pasta recém criada, vamos criar um novo arquivo main.xml. Ele representará o nosso layout do formulário quando o celular estiver em modo paisagem. Seu conteúdo será o seguinte:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <TabWidget android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
        <FrameLayout android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ListView android:id="@+id/restaurantes"
	    		android:layout_width="fill_parent"
	    		android:layout_height="wrap_content"/>
            <TableLayout android:id="@+id/detalhes"
    			android:layout_width="fill_parent"
    			android:layout_height="wrap_content"
    			android:stretchColumns="1,3"
    			android:paddingTop="4dip">
                <TableRow>
        			<TextView android:text="Nome:"
        			    android:paddingRight="2dip"/>
        			<EditText android:id="@+id/nome"
        			    android:maxWidth="140sp"/>
        			<TextView android:text="Endereço:"
        			    android:paddingLeft="2dip"
        			    android:paddingRight="2dip"/>
        			<EditText android:id="@+id/end"
        			    android:maxWidth="140sp"/>
    			</TableRow>
    			<TableRow>
        			<TextView android:text="Tipo:"/>
        			<RadioGroup android:id="@+id/tipos">
            			<RadioButton android:id="@+id/rodizio"
                			android:text="Rodízio"/>
            			<RadioButton android:id="@+id/fast_food"
                			android:text="Fast Food"/>
            			<RadioButton android:id="@+id/a_domicilio"
                			android:text="A Domicílio"/>
        			</RadioGroup>
    			    <TextView android:text="Anotações:"
    			        android:paddingLeft="2dip"/>
    			    <LinearLayout android:layout_width="fill_parent"
    			        android:layout_height="fill_parent"
    			        android:orientation="vertical">
    			    	<EditText android:id="@+id/anotacoes"
    			        	android:singleLine="false"
    			        	android:gravity="top"
    			        	android:lines="3"
    			        	android:scrollHorizontally="false"
    			        	android:maxLines="3"
    			        	android:maxWidth="140sp"
    			        	android:layout_width="fill_parent"
    			        	android:layout_height="wrap_content"/>
    					<Button android:id="@+id/salvar"
        					android:layout_width="fill_parent"
        					android:layout_height="wrap_content"
        					android:text="Salvar"/>
    				</LinearLayout>
    			</TableRow>
            </TableLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

As principais mudanças no layout foram:

  • Mudança para 4 colunas na na tabela, com as colunas 1 e 3 sendo “esticáveis”
  • Colocamos os labels nome e endereço na mesma linha, com as anotações e o botão salvar posicionados com a ajuda do LinearLayout
  • Anotações com 3 linhas em vez de 2
  • Widget EditText limitados a 140 pixels escalares (scaled pixels – sp), de forma que eles não aumentam o tamanho caso seja digitado muito texto
  • Adicionada margem (padding) em alguns elementos para melhorar a aparência

Ao executar sua aplicação no emulador, pressione Ctrl + F11 para alterar para o layout em modo paisagem.

Percebam que definimos o main.xml para o layout paisagem, mas não definimos o linha.xml. Caso o Android não encontre o recurso para o modo paisagem, ele utiliza automaticamente o recurso padrão (layout). Você pode também definir imagens diferentes para utilizar em modo paisagem, criando o diretório drawable-land.

Pronto! Para baixar o projeto, basta clicar aqui.

Aguardem, pois no próximo post vamos trabalhar com persistência de dados! Até lá!

4 comentários sobre “Tutorial Android #10 – Ajustando o Layout para Paisagem

  1. fernando

    boa noite caro Rafael, por acaso saberia me informar como configurar o google maps ou outro apk qualquer do android para abrir sempre no modo paisagem? ignorando a configuração padrão ou auto-rotate?

    • Olá Fernando!

      Para fazer o aplicativo funcionar apenas em modo paisagem, você deve definir a flag android:screenOrientation=”landscape” na sua Activity principal, lá no arquivo AndroidManifest.xml. Já os arquivos XML das outras telas de sua aplicação, você coloca somente na pasta layout-land. 😀

  2. Luís Fernando

    Muito bom cara, to começando agr em android, mas tenho uma certa experiencia em windows mobile, e nele eu usava um banco portatil talvez vc conheça, .SDF já no android to com uma certa dificuldade para entender o SQLite, teria algum tutorial seu ou até mesmo um que tu me indicaria ? Obg.

Deixe uma resposta