Desenvolvimento Android: Layouts

Aprenda o básico para montar um arquivo de layouts em XML.

As aplicações em android são compostas por dois códigos padrões: As instruções em Java, e os arquivos de layouts em XML.  Onde as ações de nosso aplicativo serão feitas através do Java, e a aparência da nossa tela através de tags especiais em um arquivo XML.

Mas o que é XML?

O acrônimo XML vem do termo inglês “eXtensible Markup Language” que significa linguagem de marcação extensível. Resumidamente é uma espécie de HTML, onde o usuário pode criar e desenvolver suas próprias “tags” com seus mais variados atributos e anotações, para formatar os dados que serão inseridos nesse arquivo. Contudo, devemos lembrar que quando se trabalha com android, esses tags especiais já foram criadas, e só nos restas saber com elas iram afetar o leiaute de nossa aplicação na prática.

Como eu monto um arquivo de layout?

No diretório do seu projeto, dentro da pasta “res” você irá encontar uma pasta escrita layouts. Adicione um arquivo com o nome desejado mais a extensão “.xml”. Você também pode fazer essa ação clicando com o botão direito do mouse sobre a passa, selecionado a opção “New” e indo em “Other...” pelo Eclipse. Então procure na barra de pesquisa pelo termo “xml” e selecione a opção “Android XML Layout”. Então de um nome para o arquivo e selecione um layout. No caso iremos utilizar o “RelativeLayout” que fica em baixo de uma opção com uma estrela verde escrito: RatingBar.

Opção que deve ser selecionada no Eclipse.

Após concluído a operação abra o arquivo xml com editor de texto ao seu gosto. Ou pelo Eclipse irar aparecer uma janela com uma pré-visualização do layout. Para ver o código, basta alternar entre a aba no canto inferior esquerdo da dela de “GrapicalLayout” para a aba a direita com o nome do layout.

Aba de alternância para exibir o código fonte destacada em vermelho.

Você irar conferir no top a tag padrão do xml, determinado a versão(1.0) e a codificação do arquivo(utf-8). Logo abaixo temos a tag que representa o layout que estamos trabalhando e dentro dela temos os atributos seguidos inicialmente pela palavra android mais dois pontos o nome do atributo. Isso separa os atributos do andorid de outros qual queres. Com exceção do primeiro atributo, que define qual especificação do android sera utilizada. No caso, a referência está no link presente na tag “xmlns:android”. E temos as definições do tamanho do nosso layout, com os atributos de largura e altura.

Código padrão gerado pelo Eclipse.

O estilo de layout “Relative” trabalha com a relatividade dos elementos na tela. Logo para se definir o posicionamento de um objeto, devemos primeiro definir a que outro objeto ele está tomando como base para se posicionar. Neste caso, iremos utilizar de identificar para cada elemento da tela, chamado de “id”, e ir chamando esses ids no decorre do layout.

Inicialmente teremos uma caixa para entrada de texto(EditText), um botão para enviar os dados(Button), e espaço para enviar o texto digitado pelo usuário(TextView).

Observe que com base no primeiro elemento da tela, a entrada de texto. Definimos que o botão irar ficar abaixo(layout_below) e a esquerda(layout_alignRight) deste objeto. E que onde será mostrada a mensagem irar estar a esquerda do botão(layout_toLeftOf).

Código simples para desenhar elementos na tela.

Um ponto interessante a diferença entre a opção “match_parent” e “wrap_content”. Como existe muitos dispositivos no mercado, e as telas dos aparelhos são muito variáveis, temos o primeiro termo para preencher as proporções da tela, e o segundo para definir o tamanho de acordo com o conteúdo que é inserido no mesmo. Como exemplo, a nosso texto de saída deve ter a largura do dispositivo e a largura do conteúdo. Contudo limitamos essas proporções, restringido a altura da área mais baixa do botão até a mais alta, e fazendo crescer até encostar no botão.

Representação gráfica do layout baseado no código anterior.

Agora basta que você estude o funcionamento de cada um das “tags” que podem ser usadas e combinadas para montar seu layout. Para isso confira o seguinte site com a documentação do layout relativo:

Android - Relative Layout

Na próxima postagem iremos aprender como pegar um texto digitado pelo usuário e fazer a impressão do mesmo na tela!