Trabalhando com layouts XML em Android (II)

Olá a todos!

No post passado aprendemos como criar um documento XML que define o layout de uma aplicação Android.

Hoje iremos adicionar um botão a este layout, que permita ao usuário inserir novas anotações.

Adicionando um botão a um layout android

Para adicionar um botão clicável ao nosso layout, usaremos o widget Button.

Queremos que ele fique ao lado esquerdo da caixa de texto. Como fazer isso?

  1. Diminuir o tamanho da caixa de texto. Para fazer isso, é só alterar a propriedade  android:layout_width. Originalmente o valor dela  era “fill_parent” – isso quer dizer: “ocupe todo o espaço disponível”. Ao invés disso, vamos usar 240 pixels.
  2. Inserir o botão logo após a caixa de texto.
  3. Inserir um novo LinearLayout que irá conter a caixa de texto e o botão. Isso é necessário porque o LinearLayout que definimos anteriormente (e que ocupa toda a tela) tem a propriedade android:orientation=”vertical”. Essa propriedade faz com que seus elementos sejam dispostos verticalmente (um debaixo do outro) e não é isso que queremos para estes dois elementos (a caixa de texto e o botão – queremos que fiquem lado a lado).

Assim, temos o nosso novo main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:id="@+id/edit_box"
android:layout_width="240px"
android:layout_height="wrap_content"
android:text="Nova nota..."
>
</EditText>
<Button
android:id="@+id/insert_button"
android:layout_width="80px"
android:layout_height="wrap_content"
android:text="Inserir"
>
</Button>
</LinearLayout>
<ListView
android:id="@+id/notes_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
</ListView>
</LinearLayout>

Compilando as alterações, temos a seguinte tela:

Layout da aplicação android

Novo layout da aplicação android - agora com o botão "Inserir"

No próximo post veremos como controlar o botão de “inserir”.

Desenvolvendo para Android

30 respostas to “Trabalhando com layouts XML em Android (II)”

  1. levi disse:

    valeu Felipe! fiquei bastante esclarecido sobre o assunto e, mais interessado ainda.
    Abraço!!!
    espero mais dicas.

  2. Thiago Abreu disse:

    Fala Felipe, cara primeiro te parabenizo pela sua iniciativa, tá show d bola to começando agora, com android, e objective C, mas to mto entusiasmado com tudo isso, mas quando eu faço essa aplicação toda, quando vou rodar, tá dando erro no meu R.java, dá o seguinte erro:
    “Syntax error on token “button”, delete this token”, eu travei nao sei o que fazer, vc tem alguma idéia,, meu imail c quisé é thiagojorr@hotmail.com, valew obrigado!!!

  3. Thiago Abreu disse:

    Ae galera, falha nossa, (principiante) hahaha,,, já solucionei,, eu nao coloquei insert_button, tinha colocado insert button,, sorry!!!
    Q MARAVILHA RODOOOOOOO!! PUTS Q DAHORA!!

  4. Guilherme disse:

    Muito bom os tutoriais !
    Abss

  5. Aurino disse:

    Não sei pq, mas não meu não efetivou a mudança. Não apareceu o botão. 🙁

  6. Aurino disse:

    Encontrei o problema. Troquei o ‘vertical’ por ‘horizontal’. :O

  7. Rubervaloce poderia me ajudar. disse:

    boa noite, sou iniciante neste novo mundo nao estou conseguindo compilar esta parte do projeto, esta ocorrendo o seguinte erro.

    [2011-08-08 23:03:12 – Xml] Error in an XML file: aborting build.
    [2011-08-08 23:03:12 – Xml] res\layout\main.xml:0: error: Resource entry main is already defined.
    [2011-08-08 23:03:12 – Xml] res\layout\main.out.xml:0: Originally defined here.
    [2011-08-08 23:03:12 – Xml] C:\Users\Ruberval\workspace\Xml\res\layout\main.out.xml:1: error: Error parsing XML: no element found

    a recriei de tudo que é jeito mas nao consegui identificar o erro, alguem poderia me ajudar, desde ja agradescido.

  8. Ruberval disse:

    perdao gente, meu nome é Ruberval, que foi um erro na hora de digitar no note…kkkkkk.

  9. Paulo Vicente disse:

    Muito bons os tutoriais, Felipe. Aceleram o nosso aprendizado. Obrigado pelo seu altruísmo e parabéns pela ótima didática.

  10. lucas disse:

    muito bom mesmo, estou muito interessado , abrigado pela caridade de conhecimentos

  11. Rangel disse:

    Ruberval, você deve estar tentando rodar a partir do xml, tente pela classe java e deverá funcionar. 🙂

  12. Douglas disse:

    Felipe Silveira, obrigado pelas dicas.

    Como eu programo o botão inserir ??

  13. Douglas disse:

    Felipe, muito obrigado pela resposta.

  14. Roger disse:

    Olá Felipe. Instalei o Eclipse, mas quando vou criar um novo projeto não encontro a pasta do Android para selecionar e seguir em frente. Faltou fazer algo na hora de instalar?

  15. Kaio disse:

    Felipe tive de mudar a unidade de medida do button e o do field para ‘dp’ em vez de ‘px’ para que preenchesse a tela, porquê isso ?

  16. Lucas Soares disse:

    Muito Bom!! Estou Apredendo!!!

  17. Lucas Soares disse:

    Aprendendo* rsrs

  18. Airton disse:

    Muito bom ..show de bola

  19. bruno disse:

    baixando o sdk da Motorola aqui. Os servidores do motodev são meio lerdos.

  20. Greison disse:

    O meu está sobrepondo o botão à caixa de texto.
    Sabem por quê?

  21. Junior disse:

    Surgiu o seguinte erro na linha 7:
    “unexpected name space prefix “xmlns” found for tag LinearLayout”
    Pesquisei sobre o assunto e alguns sugeriramram que “LinearLayout” só poderia ser usado uma vez.

  22. Jefferson disse:

    Ola, gostei muito do tutorial mas como controlo o botão Inserir gostaria de saber se ha um tutorial detalhado pois você disse “No próximo post veremos como controlar o botão de “inserir”.”

  23. Micael disse:

    Não desvalorizando o trabalho que está feito acima, pois está bastante bom, mas eu no meu caso é muito mais fácil de aprender vendo videos. Eu quando aprendi android, pois tive que aprender só para desenvolver o meu projeto final de curso acabei por ver uns videos e considerei o conjunto de 5 videos na altura com o titulo “Kiwi Office Hour – Desenvolvimento Android – Aula 01” (de certeza que esta no youtube) muito bom para aprender sobre a parte gráfica de uma app android e para a parte de desenvolvimento existem um conjunto de aulas que eu acabei mesmo por fazer download de todos os videos que são as aulas do prof “Neri Neitzke” pois ele ensina muito bem a parte de programação em java e acaba por ajudar também na parte de design. espero ter ajudado para quem quer realmente aprender android 🙂

  24. Pyetro Safe disse:

    Felipe, parabéns pela iniciativa… Estou aprendendo com seus artigos e de forma fácil… Estou usando Eclipse + Android ADT…

    Neste artigo porém, o layout gerou erro aqui… Estou com um projeto teste para os seus artigos como alvo Android 4.4 e mínimo requerido Android 2.3.3.

    O erro aparece no segundo item LinearLayout com a mensagem: “Unexpected namespace prefix “xmlns” found for tag LinearLayout”. Consegui resolver apenas tirando o atributo xmlns do segundo LinearLayout…

    Outra coisa foi a definição de width para os elementos. Para funcionar corretamente aqui, invés de usar a letras “px” funcinou usando “dp”, ficou da seguinte forma: ” android:layout_width=”240dp” “.

    Obrigado, abraço!

  25. Alan Jhone C. de Araújo disse:

    Olá, estou tentando fazer um botão mudar de cor ao ser clicado e depois voltar a cor normal, porém não obtive êxito. Sou novo em android…

    Eu utilizei no java [ setBackground(Color.parseColor(“cor”); ] porém ele muda a cor do botão e permanece a cor modificada.

    Poderia me ajudar?
    Pode ser em XML ou Java mesmo.

    Obrigado.

  26. Sinésio disse:

    Estava com um problema: retirei o endereço do segundo <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quot; e deixei em branco, apenas <LinearLayout. Funcionou! Obrigado por repartir o conhecimento.

  27. Andre disse:

    Felipe, gostaria apenas de agradecer pelos tutoriais, eles são simplesmente ótimos.
    Pra quem está começando agora na linha 7 basta deixar o código dessa forma.

    <LinearLayout

  28. Rafaela disse:

    Olá, eu queria saber como faz para que um app ocupe toda a tela, sem aparecer, no caso QuickNotes (O nome do app), pois estou fazendo um aplicativo de camera e o nome do aplicativo está ocupando um pedaço da tela.

Deixe um comentário