Trabalhando com EditText e Button [ATUALIZADO]

Olá leitores do blog,

Como mencionei no post anterior, hoje nós iremos avançar um pouco mais na complexidade da app adicionando elementos como botão e campos para entrada do usuário.

Vamos começar criando um novo projeto. Vou chamá-lo de Post003Project. Depois selecionaremos a checkbox referente ao Android 2.3.3. Em seguida chamaremos nossa app de Post003App e nossa main Activity de Post003Activity como mostram as duas figuras abaixo:

Nome do Projeto

Escolha da versão do SDK, nome da app e nome da main Activity, respectivamente

Ok. Depois de criar o projeto, teremos a aplicação padrão exibindo o nome da app no emulador do Android. Vocês ainda lembram do arquivo xml que mencionei no post passado? Pois é, usaremos ele nessa app, por isso vamos navegar até a pasta “res/layout” e abrir o arquivo “main.xml”. Ele deve estar mais ou menos como na figura abaixo:

!OBSERVAÇÃO! Não consegui utilizar o framework para trabalhar com o “main.xml” diretamente através de uma interface similar ao Swing. Por isso, a imagem que postei será igual a quando você clicar na aba “main.xml” ao lado da “Graphical Layout”.

Arquivo main.xml

Legal, não? Antes de começar a escrever no xml, vamos explicar um pouco sobre o que já está definido no arquivo e que pertença ao nosso escopo de programação para Android, por isso, caso você não conheça xml, então é melhor antes procurar saber e estudar como estruturar um xml. Mas voltando ao assunto. Nesse xml encontramos uma classe que nos é nova. Ela se chama LinearLayout. Ela já estava na nossa aplicação, mas como não abrimos o arquivo “main.xml” do nosso HelloWorld então não pudemos 'ver' a classe. Contudo, mesmo sem vê-la, ela estava lá.

Ler documentação LinearLayout

Já o TextView utilizamos para mostrar ao usuário nossa mensagem de boas vindas. Se vocês prestarem bem atenção, o texto do TextView está setado com o valor “@string/hello”, mas se você rodar a aplicação, não verá nada similar a isso na tela de exibição. E por quê? A resposta é simples. O valor é nada mais, nada menos do que uma constante definida no arquivo “string.xml” que está localizado na pasta “values” dentro de “res”. Se você abrir o arquivo “string.xml”, verá o verdadeiro valor a que a constante se refere.

Vamos começar a 'criar' nosso layout.

Primeiro, vamos criar mais uma tag TextView abaixo da primeira tag TextView para que possamos informar ao usuário o que esperamos que ele faça. Vamos atribuir os mesmos valores que a tag anterior alterando apenas o texto. No meu caso, defini-lo como “Escreva qualquer coisa ao lado:”. O xml irá ficar semelhante a este:

Arquivo xml com novo TextView

Feito isso, vamos ver como está nossa aplicação. Abra o .java da sua aplicação e aperto o botão “Run” na barra de ferramentas. Escolha para executar como Android Project e espere o emulador iniciar. Quando a aplicação for executada, vocês verão algo semelhante a imagem abaixo:

Aplicação executando ainda sem campo de entrada e botão

Agora vamos voltar ao nosso arquivo “main.xml”. Está na hora de adicionarmos um campo para o usuário entrar com alguma informação. Vamos supor que nossa app gosta de cumprimentar os usuários, então nada melhor do que saber o nome do usuário. Vamos alterar nosso texto da última TextView para “Qual seu nome?”. Texto alterado? Se você quiser rodar a app para ver a alteração, tudo bem, mas vou pular esse passo.

Está na hora de adicionarmos o campo de entrada. Abaixo do final da tag TextView, iremos adicionar a tag <EditText>. Um atributo muito importante nessa tag é o 'id' porque com ele que referenciamos este campo especifico dentro do código da classe Activity principal. Repare bem na linha que definimos o 'id' do nosso texto: android:id=“@+id/name_text”. O que estamos dizendo nessa linha para o compilador da app é que esse objeto da classe EditText deve ser referenciado por name_text .Abaixo segue a imagem de como ficará o novo “main.xml”.

main.xml agora com a tag <EditText> adicionada

Outro atributo “novo” é o android:hint. Usamos ele para dar dicas da utilidade do determinado campo.

Agora que já temos nosso campo para entrada do usuário, vamos rodar mais uma vez a app.

Você irá notar que abaixo do texto “Qual seu nome?” surgiu um novo objeto. Este objeto é justamente nosso campo de entrada definido através da tag <EditText>. Ao interagir com o campo de entrada você provavelmente vai notar que nada além da sua ação de escrever acontece. Tendo percebido esse problema, fica muito claro que precisamos de mais elementos para tornar nossa app no mínimo funcional. Veja na imagem abaixo:

App com campo para entrada de usuário

Minimize o emulador e vamos voltar ao “main.xml”. Se você notou, nós estamos voltando muitas vezes a esse arquivo, então é óbvio a importância dele na nossa aplicação. Por isso, tente mantê-lo sempre limpo e bem formatado. Afinal, código limpo e estruturado torna o entendimento mais simples e muitas vezes até evitando erros bobos.

Já que temos nosso campo de entrada do usuário, agora precisamos dar um jeito de manipular essa informação através de alguma interação. Qual delas? Provavelmente a mais simples é com botão e é com ele que vamos trabalhar agora.

Abaixo da tag <EditText> vamos adicionar a tag <Button> similar ao <EditText> com exceção do atributo android:hint que vamos dispensar. No atributo android:text vamos colocar o texto “OK” para que o usuário tenha alguma noção do que seja aquele elemento. Finalmente terminamos nosso trabalho com o arquivo “main.xml” que ficará mais ou menos assim.

Nossa app com layout completo

Note que mesmo com o botão, nosso programa continua sem interatividade. Agora está na hora de mudarmos um pouco de linguagem. Vamos sair do XML e partir para o Java. Para isso, abra o arquivo .java da main Activity.

A ideia aqui será a seguinte:

• Precisamos criar uma maneira de recuperar o valor digitado pelo usuário no campo de entrada quando ele clicar no botão “OK”.
• De acordo com esse valor, vamos dar as boas vindas através de uma instância da classe AlertDialog.

Não vou detalhar o código linha por linha, pois a maioria é puramente o Java comum. Contudo, alguns comandos merecem certo destaque.

Código-fonte

Vocês lembram de uma classe gerada automaticamente pela IDE que servia como uma interface entre o XML e o Java que mencionei no primeiro post? Pois é, a utilidade dela está no nosso código exatamente quando chamamos a função findViewById(R.id.xxx). Esta função busca dentro do arquivo “main.xml” o elemento com o atributo 'id' semelhante ao digitado no parâmentro 'R.id.xxx' onde 'xxx' é o nome que demos ao elemento no “main.xml”. Vamos navegar para o “main.xml” e buscar o valor que demos para o botão da nossa app: “@+id/ok_btn”, certo? Então substituímos o 'xxx' por 'ok_btn' e declaramos um objeto filha da classe Button dentro do Java instanciando com as definições que definimos dentro do “main.xml”. Muito prático, não? Também achei.

Ainda há também o AlertDialog que criamos, mas não irei me estender em explicações sobre suas funcionalidades, mas para quem quiser saber mais recomendo navegar pelos fóruns de Android e principalmente na documentação da linguagem. Recomendo também estudar os atributos do layout, pois é com eles que deixamos nossa app mais elegante.

Espero que todos tenham apreciado o post e tenham aprendido mais um pouco. Para finalizar o print da app executando depois que inserimos o nome e apertamos no botão “OK”.

App 'finalizado' rodando

Um grande abraço e boa semana.

Esqueci de avisar que no próximo post irei colocar um pequeno jogo estilo senha. Para quem não conhece, é um jogo onde o jogador deve adivinhar uma sequência de números sorteados aleatoriamente.