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
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
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)
Olá Felipe …. parabéns pelos artigos referente Android … estou começando a aprender… excelente!!!
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
Oi Felipe, muito obrigado pelos seus artigos.
Eles são ótimos. Parabéns!
Felipe, parabéns!!! Sou totalmente leigo, esta me ajudando muito.
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.
Muito bom. Isto ajuda a disseminar o conhecimento acerca do desenvolvimento para o Android. Parabéns!
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!
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.
Olá Felipe! Eu não entendi …como eu faço para carregar o arquivo XML na aplicação? Valeu!
Onde eu ponho a função
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
Não entendi essa parte ‘-‘
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);
Olá felipe, parabéns pelo blog e pelas informações!! Ajudou bastante!!
Rodolfo Jorge Nemer Nogueira
Curitiba / Paraná
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”.
A ULTIMA PARTE NÃO ENTENDI, AINDA QUE JA FOI EXPLICADO,
MAS AONDE FICA O SRC…
[…] Trabalhando com layouts XML em Android […]
Um dos melhores tutorias da web….
Boa tarde,Felipe gostaria saber se utilizando a IDE AIDE conseguirei seguir ested exemplos.Eu utilizo apenas o motorola Razr HD.
Ola companheiro e conseguie criar ,vcs sabem um site q eonsine criar jogos de p plataforma ou poderiam m ensinar ? Abraços
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.
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)
Felipe no meu so aparece android aplication Project. Pode ser esse mesmo?
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
Cara… Muito legal seu post, era realmente os eu procurava, muito
Bem exemplificado… Parabéns.
Felipe,
Parabéns pela sua iniciativa em publicar de forma clara e correta o seu trabalho.
Bah velho muito obrigado mesmo cara… Show essas tuas aulas… vou compartilhar certo … Valeusss
Obrigado, Filipe!
Os seus tutoriais tem me ajudado bastante a iniciar o desenvolvimento do meu projeto.
Valeu…
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…
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…
Caralho mano parabens pelos artigos.. Continue fazendo.. To aprendendo mt
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 ?