Android Layouts: Aprendendo t�cnicas de Layout no Android

A maioria dos programadores tem uma certa dificuldade em criar layout legais, bonitos, com cores que combinem, pois de fato n�o � uma tarefa f�cil e exige bastante esforço e criatividade.

Saiba mais: Meu primeiro aplicativo Android

Um fato que dificulta muito a criaç�o de layout � a aus�ncia de materiais dispon�veis para designers na web e nas documentaç�es oficiais do Google. Por isso, este artigo tem o intuito de auxiliar programadores com poucas experi�ncias em layouts a criarem sistemas com interfaces modernas e agrad�veis aos olhos dos usu�rios.

Aprenda mais sobre Android atrav�s do nosso Guia

Algumas Regras

Primeiro passo para criar um bom aplicativo � conhecer muito bem a plataforma que se est� trabalhando. No nosso caso � o sistema operacional Android.
O segundo passo � conhecer a anatomia da interface do Android e no que ela difere de outros sistemas operacionais, como iOS e Windows Phone.
N�o misture diversas forma de navegaç�o em uma �nica aplicaç�o, pois isso poder� confundir o usu�rio.
Nunca reutilize layouts do mesmo sistema em outras plataformas. Para cada plataforma que for desenvolver crie um layout pr�prio que se adapta ao designer nativo do sistema operacional.
Jamais utilize o mesmo layout para todos os seus aplicativos; para cada cliente desenhe um novo layout.

Aprenda mais sobre as principais opç�es de layout no Android

M�ltiplas telas no Android

O android possui suporte a m�ltiplas telas, dependendo do layout que voc� ir� desenvolver ter� que criar layout individuais para cada tela, de forma que possa se adequar conforme ao tamanho da tela do dispositivo. A Figura 1 demonstra como � feita a divis�o dos layout por tamanho de tela.

Figura 1. Divis�o dos layouts

Caso voc� tenha que desenha um layout para cada tipo tela, ter� que criar uma pasta de layout para cada tipo de tela que for utilizar, um exemplo seria "layout-small" para celulares com tela menores que 426dp x 320dp. Isso permite que o sistema evite ter que se preocupar com mudanças no tamanho das telas. Abaixo segue as meditas de cada tela.

layout-xlarge telas de ao menos 960dp x 720dp
layout-large telas de ao menos 640dp x 480dp
layout-normal telas de ao menos 470dp x 320dp
layout-small telas de ao menos 426dp x 320dp

Caso deseje aprofundar mais no assunto de m�ltiplas telas, veja o Guia da API do Google Android em Compatibilidade com v�rias telas

Saiba mais sobre a classe Intent

Tipos de Dimens�es no Android

No Android as dimens�es s�o medidas por:

Tipo	Descriç�o
px (pixels)	Correspondente ao n�mero de pixels da tela
in (polegadas)	Baseado no tamanho f�sico da tela
mm (mil�metros)	Baseado no tamanho f�sico da tela
pt(pontos)	1/72 de uma polegada, baseado no tamanho f�sico da tela
dpoudip	(Density-independent Pixels) Essa unidade � relativa � resoluç�o da tela. Por exemplo se a resoluç�o da tela � de 160 dpi, significa que um dp representa 1 pixel em um total de 160.
sp	(Scale-independent Pixels) Igual ao dp, mas tamb�m considera o tamanho da fonte que o usu�rio est� utilizando. � recomendado que use essa unidade quando especificar o tamanho de uma fonte, para que esta seja automaticamente ajustada conforme as prefer�ncias da tela do usu�rio.

Tabela 1. Dimens�es

Escolha das Cores

A escolha das cores � muito importante. Na Figura 2 segue uma tabela b�sica de cores.

Figura 2. Tabela de cores

Tente combinar sempre as cores da logo com as cores do layout.
Cuidado com as cores: nunca misture duas cores quentes no mesmo aplicativo (ex. "vermelho com laranja"). Al�m de deixar a est�tica do sistema muito carregada, essas cores causam dores de cabeça e n�useas quando o usu�rio � exposto por muito tempo. Tente usar cores mais agrad�veis e suaves para o fundo do sistema e nos detalhes pode utilizar cores mais fortes.
Tente usar cores da mesma escala ou mesma tabela de cores, sempre tom e sobre tom.

Tamanho do Objetos na Tela

O tamanho dos objetos na tela � muito importante, pois os dispositivos mobile n�o utilizam recursos como mouse e teclado e sim as pontas dos dedos. � importante que os �cones sejam de acordo com a dimens�o da ponta de um dedo, que � de aproximadamente 9mm - o que corresponde a cerca de 48dp. Utilize esse tamanho como base para que seu layout funcione de maneira adequada e os �cones e bot�es sejam tocados com precis�o. Para que os objetos n�o fique colados no canto da tela � bom dar uma margem de 8dp.

Tamanho dos �cones

LAUNCHER: Importante criar um Launcher no tamanho 512x512px para ser reutilizado na Google Play.
�CONES DE AÇ�O: Os �cones da barra de aç�o precisam ter 32dp.
�CONES CONTEXTUAIS: Tamanho ideal 16dp e �rea focal 12dp.
�CONES DE NOTIFICAÇ�O: Devem ter 24dp, sendo que a �rea focal deve ser 22dp.

Saiba mais sobre a API do Google Android

Organizar os Assets

Organizar os arquivos com prefixo facilita muito para encontrar algo que se deseja e � uma forma de padronizar seus projetos. Observe a Tabela 2.

Tipo de asset	Prefixo	Exemplo
�cone	ic_	ic_devmedia.png
Launcher	ic_launcher	ic_launcher_ nomedoapp.png
�cones da action bar	ic_menu	ic_menu_busca.png
�cones da barra de status	ic_stat_notificar	ic_stat_notificar_msg.png
�cones das tabs	ic_tab	ic_tab_recente.png
�cones de dialogo	ic_dialog	ic_dialog_info.png

Tabela 2. Padr�o de organizaç�o.

J� conhecemos um pouco de teoria e tudo mais, agora iremos para pr�tica.

Tela na Horizontal e na Vertical

Iremos criar um aplicativo que ter� dois layouts diferentes: um para quando o dispositivo estiver com a tela em portrait e outro para quando o dispositivo estiver com a tela em landscape. Podemos resolver esse problema criando um main.xml (Listagem 1) na pasta layout e outro main.xml (Listagem 2) na pasta layout-land.

<?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_height="0dp" android:layout_weight="1"
               android:gravity="center" android:layout_width="match_parent"
               android:text="DevMedia 1" />
            <TextView android:layout_height="0dp" android:layout_weight="1"
               android:gravity="center" android:layout_width="match_parent"
               android:text=" DevMedia 2" />
      </LinearLayout>

Listagem 1. Main.XML (portrait) - Dentro da Pasta Layout<

<?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="horizontal" >
         <TextView android:layout_height="match_parent" android:layout_weight="1"
             android:gravity="center" android:layout_width="0dp"
             android:text=" DevMedia  1" />
         <TextView android:layout_height="match_parent" android:layout_weight="1"
             android:gravity="center" android:layout_width="0dp"
             android:text=" DevMedia 2" />
      </LinearLayout>

Listagem 2Main.XML (landscape) - Dentro da Pasta layout-land

Saiba mais sobre Fragments

Criando Degrades no Android

Os recursos de degrade no Android s�o bastante interessantes e �teis para criaç�o de layout mais robustos. Crie sempre os arquivos XML de Layout dentro das pastas Drawable. Abaixo veja alguns tipos de degrades e o respectivo c�digo para criaç�o.

RADIAL (Figura 3)

Figura 3. Degrade radial

<?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
       
      <gradient
          android:startColor="#33414b"
          android:endColor="#242424"
          android:gradientRadius="326"
          android:type="radial"/>
      </shape>

Listagem 3. Degrade radial

LINEAR (Figura 4)

Figura 4. Degrade Linear

<?xml version="1.0" encoding="UTF-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" >
       
          <gradient
              android:angle="90"
              android:startColor="#33414b "
              android:endColor="#242424"
              android:type="linear" />
       
      </shape>

Listagem 4. Degrade Linear.

Criando Bot�o com Borda e Degrade

Crie sempre os arquivos XML de Layout dentro das pastas Drawable. Veja um exemplo de bot�o na Figura 5. Na Listagem 5 vemos a codificaç�o do mesmo e que serve para os botaonormal.XML|botaoselecionado.XML|botaofoco.XML.

Figura 5. Bot�o DevMedia.

<?xml version="1.0" encoding="utf-8"?>
      <selector xmlns:android="http://schemas.android.com/apk/res/android" >
                      <item android:state_pressed="true" android:drawable="@drawable/botaoselecionado" />
                      <item android:state_focused="true"  
      android:drawable="@drawable/botaofoco" />   
                      <item android:drawable="@drawable/botaonormal"/>
      </selector>

Listagem 5. botao.XML.

Para alterar as cores do degrade e o layout do bot�o basta usar o c�digo das Listagens 6 e 7.

<?xml version="1.0" encoding="UTF-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" >
       
          <gradient
              android:angle="270"
              android:startColor="#2e8fc2 "
              android:endColor="#006599"/>
       
          <stroke
              android:width="3dp"
              android:color="#00679e " />
       
          <corners android:radius="10dp" />
       
          <padding
              android:bottom="10dp"
              android:left="10dp"
              android:right="10dp"
              android:top="10dp" />
       
      </shape>

Listagem 6. Alteraç�o de cores.

 <Button
                  android:id="@+id/btDevmedia"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_margin="10dp"
                  android:layout_weight="1"
                  android:background="@drawable/botao"
                  android:onClick="OnClick"
                  android:text="DevMedia"
                  android:textColor="#FFFFFF"
                  android:textSize="25sp"
                  android:text />

Listagem 7. Objeto Button Layout.

Criando menu com ListView

Observe como ficar� menu na Figura 6. A codificaç�o do mesmo est� presente nas Listagens 8 e 9.

Figura 6. Menu.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#ebebeb"
          android:orientation="vertical" >
      <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@drawable/fundo_degrade"
                android:orientation="vertical" >
       
              <LinearLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="5dp"
                  android:background="@drawable/degrade_title"
                  android:orientation="vertical" >
       
                  <TextView
                      android:id="@+id/textView"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_marginLeft="10dp"
                      android:text="Menu DevMedia"
                      android:textAppearance="?android:attr/textAppearanceLarge"
                      android:textColor="#FFFFFF"
                      android:textSize="25sp"
                      android:text />
       
              </LinearLayout>
       
              <ListView
                  android:id="@+id/list"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_marginBottom="10dp"
                  tools:listitem="@layout/listview_item" >
       
              </ListView>
      </LinearLayout>
      </LinearLayout>

Listagem 8. Objetos Layout.

<?xml version="1.0" encoding="utf-8"?>
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="50dp"
          android:background="@drawable/degrade_fundo_lista" >
       
          <LinearLayout
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:layout_alignParentBottom="true"
              android:layout_toLeftOf="@+id/ivImg"
              android:orientation="vertical"
              android:padding="5dip" >
       
              <TextView
                  android:id="@+id/title"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:singleLine="true"
                  android:textSize="28sp"
                  android:text />
       
          </LinearLayout>
       
          <TextView
              android:id="@+id/tvMsg"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentRight="true"
              android:layout_centerVertical="true"
              android:layout_marginRight="10dp"
              android:textColor="@color/vermelho"
              android:textSize="20sp"
              android:text />
       
      </RelativeLayout>

Listagem 9. listview_item.xml.

Background com Imagem

Usando o background com imagem � melhor, pois n�o distorce ao virar a tela do dispositivo. Esse modelo esta ativado o modo de repetir a imagem. Veja a codificaç�o na Listagem 10.

<?xml version="1.0" encoding="utf-8"?>
      <bitmap xmlns:android="http://schemas.android.com/apk/res/android"     
      android:src="@drawable/imagemdefundo"
      android:tileMode="repeat"
      android:dither="true" />

Listagem 10. background.

Curso relacionado: Curso de Android: Como criar minha primeira aplicaç�o em Android

Alguns Modelos de Layout

Na Figura 7 segue alguns modelos de Layout para que voc� tenha uma base de como devem ser as cores, os �cones, as fontes e etc...

Figura 7. Modelos de layout.

Saiu na DevMedia!

#partiu programar para Android?:
Aprenda a programar e depurar aplicativos no Android Studio. Com os cursos desta s�rie voc� saber� quais s�o as principais classes do Android SDK e conhecer� os componentes de aplicativo, criando os seus primeiros projetos.

Saiba mais sobre Android ;)

Curso Gr�tis de Android:
Neste curso iremos aprender a fazer um aplicativo de signos no Android Studio.
Curso de Android SDK - Dominando a API:
Neste curso de Android SDK ser� mostrado as principais classes da API do Android. A ideia � mostrar desde as classes mais b�sicas, para criaç�o de Activity e exibiç�o de mensagens at� classes mais avançada como BroadCastReceiver, Service, AlarmManager, Notification entre outros.
Criando uma Loja Virtual com Android Studio:
Neste curso de Android Studio iremos a aprender a usar o Android Studio para criar uma loja virtual completa para Android.