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:

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

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á!