Trabalhando com layouts XML em Android

Olá pessoal, hoje vou falar sobre a definição do layout de sua aplicação Android usando XML.

Definir os layouts através dessa técnica é a forma mais comum de se começar o desenvolvimento de uma aplicação.

Para exemplificar os estudos que faremos a partir de agora, usaremos uma aplicação de exemplo, que construiremos juntos, a partir dos próximos posts.

A idéia é fazer uma aplicação onde o usuário poderá entrar com algumas anotações, e visualizar as últimas entradas.

O layout será mais ou menos assim:

esboço do layout

esboço do layout

Criando o main.xml

Para novos projetos android, o arquivo main.xml já é automaticamente criado. Ele fica no diretório res/layout, com o conteúdo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
>
<TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/hello"
 />
</LinearLayout>

Neste arquivo temos contato com os primeiros elementos de um arquivo de layout XML:

  • LinearLayout, que é apenas um container.
  • TextView, que é um elemento de texto. Nesse caso está imprimindo a string cujo id é @string/hello. (Não se preocupe, falaremos sobre strings e seus ids à frente nesse curso)

Para criar um layout parecido com o rascunho do início do post, iremos inserir outros dois elementos:

  • EditText – uma caixa de texto onde o usuário irá entrar com as anotações;
  • ListView – uma lista de anotações previamente submetidas.

Assim, o nosso novo XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
>
 <EditText
 android:id="@+id/edit_box"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Nova nota..."
>
 </EditText>
 <ListView
 android:id="@+id/notes_list"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
>
 </ListView>
</LinearLayout>

Carregando o arquivo XML na aplicação

Para que a nossa aplicação tenha o layout definido pelo arquivo XML, é preciso carregá-lo.

Isso é feito através da função setContentView(), como no código abaixo:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    

O parâmetro R.layout.main indica que o arquivo de layout a ser carregado é o main.xml. (Se o se arquivo se chamar abobrinha.xml, o parâmetro deverá ser R.layout.abobrinha)

É possível utilizar mais de um arquivo XML para uma mesma tela, para formar layouts mais sofisticados. Trataremos disso à frente nesse curso.

Compilando o nosso projeto e rodando no emulador, temos o seguinte resultado:

QuickNotes rodando no emulador

QuickNotes rodando no emulador

No próximo post iremos acrescentar um botão a este layout, e iremos aprender um pouco mais sobre os parâmetros de um documento XML.

DICA: Existe uma ferramenta online, gratuita, para edição de arquivos de layout XML. É o DroidDraw.

LEITURA RECOMENDADA: Para aprender mais sobre a definição de layout de aplicações android, visite a página “User Interface” da documentação oficial. (em inglês)

Desenvolvendo para Android

30 respostas to “Trabalhando com layouts XML em Android”

  1. andreia disse:

    Olá Felipe …. parabéns pelos artigos referente Android … estou começando a aprender… excelente!!!

  2. JORGE PINTO disse:

    Bom dia preciso de contratar alguém para me fazer um projecto para o Android que era ligar a um webservice que já exite numa aplicação nossa de gestão e a ideia era fazer um software de auto venda ter uma ficha de clientes e uma ficha de artigos contas correntes e podermos fazer encomendas no android.

    Se tiver alguém interessando em abraçar este projecto só temos que depois achar um valor justo para este projecto

  3. Diego disse:

    Oi Felipe, muito obrigado pelos seus artigos.
    Eles são ótimos. Parabéns!

  4. Leonardo disse:

    Felipe, parabéns!!! Sou totalmente leigo, esta me ajudando muito.

  5. Olá Felipe!

    Só quero avisar que o código que inseriu em “Carregando o arquivo XML na aplicação” já tinha sido criado dentro do meu Activity quando criei o projeto.

    Abraços.

  6. Kav disse:

    Muito bom. Isto ajuda a disseminar o conhecimento acerca do desenvolvimento para o Android. Parabéns!

  7. matheus disse:

    cara xml é uma linguagem da net certo? oq tem haver com isso? é obrigatorio ter alguma relação com alguma lingugagem da net, tipo um php, html …

    essa minha duvida foi logo de cara!

  8. Rafael Prado disse:

    XML é uma linguagem de marcação (HTML também é marcação) que serve para a padronização e organização dos dados, ela é amplamente usada na internet para distribuição de informações mas não quer dizer que é exclusivo para um ambiente Web.

    XML não é linguagem de programação, ela vai te auxiliar no transporte de dados entre linguagens e aplicações distintas.
    PHP é linguagem de programação, assim como Java, C/C++…

    No caso do Android é adotado um padrão XML é usado para dizer como gerar as telas, elementos com suas posições e tamanhos respectivos;

    Acho que é isto, corrijam-me se estiver errado

    Abraços.

  9. david. disse:

    Olá Felipe! Eu não entendi …como eu faço para carregar o arquivo XML na aplicação? Valeu!

  10. Dayvison disse:

    Onde eu ponho a função

    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    }

    Não entendi essa parte ‘-‘

  11. leo disse:

    dayvison: lá em src tem o arquivo .java
    abre ele que vc vai encontrar o código :public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    }
    ai vc inclui :setContentView(R.layout.main);

  12. Olá felipe, parabéns pelo blog e pelas informações!! Ajudou bastante!!

    Rodolfo Jorge Nemer Nogueira
    Curitiba / Paraná

  13. Kelvin disse:

    Parece que o ADT plugin do Eclipse vem com um editor de layout, muito bom por sinal. Basta abrir o XML (no Eclipse), e em baixo tem a guia: “Graphical Layout”.

  14. Rivan disse:

    A ULTIMA PARTE NÃO ENTENDI, AINDA QUE JA FOI EXPLICADO,
    MAS AONDE FICA O SRC…

  15. Edgar disse:

    Um dos melhores tutorias da web….

  16. Samuel disse:

    Boa tarde,Felipe gostaria saber se utilizando a IDE AIDE conseguirei seguir ested exemplos.Eu utilizo apenas o motorola Razr HD.

  17. rafael disse:

    Ola companheiro e conseguie criar ,vcs sabem um site q eonsine criar jogos de p plataforma ou poderiam m ensinar ? Abraços

  18. Jonas disse:

    Estranho, preciso de uma ajuda.Como o amigo disse que o layout ja vem criado para novos projetos, o meu veio como Relative layout e nao liner layout.Mesmo criando um novo arquivo ou substituindo o texto, fica dando um erro no campo edittext.

  19. joao vitor disse:

    estou com problemas, o app Anjedi diz que existe um erro, mas o que estou passando e colocando eh exatamente o q vc descreveu, pode me dizer se ha algum erro( anjedi eh criador de apps com base no software eclipse e vem com todo os pacotes para a criacao)

  20. kleiton disse:

    Felipe no meu so aparece android aplication Project. Pode ser esse mesmo?

  21. Rogi disse:

    Olá estou acompanhando estes post e fiquei com dúvida,estou usando o netbeans e o codename one depois de criar o projecto onde encontrarei este arquivo main.xml

  22. Rayan disse:

    Cara… Muito legal seu post, era realmente os eu procurava, muito
    Bem exemplificado… Parabéns.

  23. Arlindo disse:

    Felipe,
    Parabéns pela sua iniciativa em publicar de forma clara e correta o seu trabalho.

  24. Fabiano disse:

    Bah velho muito obrigado mesmo cara… Show essas tuas aulas… vou compartilhar certo … Valeusss

  25. Emerson disse:

    Obrigado, Filipe!
    Os seus tutoriais tem me ajudado bastante a iniciar o desenvolvimento do meu projeto.
    Valeu…

  26. Paulo Ricardo disse:

    Cliquei no link para o droiddraw e foi mensagem de vírus atrás de outra. Dizia que a bateria do celular tinha tido avariada e tudo o mais…

  27. Augusto Virchane disse:

    Olá Felipe, valeu pela aula e aprendi muito.. peço uma ajuda, quero criar um aplicativo de bate-papo e não sei como dar vida ao Botão “Enviar”. Que codigo devo usar?????
    Valeu…

  28. Anonimo disse:

    Caralho mano parabens pelos artigos.. Continue fazendo.. To aprendendo mt

  29. danilo disse:

    Pessoal estou com um problema em um app

    Crie dois layout e para cada um criei um layout.
    O aplicativo deveria fazer isso: a primeira tela teria um button que redicionaria para outro layout e nesse 2º layou ele faria uns calculos através dos campo existentes nele e daria o resultado em uma textView nesse mesmo layout, porém quando clico no button para fazer o calculo ele não me mostra nem um resultado….
    E como faça para que o layout faço o calculo ?

Deixe um comentário