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.

Primeira app: Hello World!

Boa noite a todos,

Como falei no primeiro post do blog, neste irei exemplificar a implementação de um Hello World no Android. Eu sei que é algo extremamente simples, mas para começar, nada como algo simples. Antes, no entanto, irei falar um pouco da IDE que estou utilizando que é o MotoDev Studio da Motorola. Costumo programar em Java utilizando o eclipse e também é possível programar para Android utilizando o eclipse com a condição de importar algumas bibliotecas e plugins que não entendi direito como fazia. Então para não estragar meu eclipse, preferi baixar outra IDE e experimentar. Felizmente, as apps feitas no MotoDev Studio podem ser utilizados em qualquer aparelho que possua Android (no início pensei que apenas poderia utilizar as apps num Motorola) e os plugins e bibliotecas necessárias para programar utilizando SDK já vem acopladas a IDE.

Como pode-se ver na imagem acima, a interface do MotoDev é quase idêntica ao do eclipse, o que de início torna mais fácil a familiarização com a ferramenta.

Interface MotoDev Studio

Para começarmos um novo projeto, basta fazer como no eclipse. Em Novo Projeto (New Project), escolha a opção Projeto Android utilizando Studio para Android (Android Project Using Studio for Android) e a tela de configuração vai abrir.

Janela para criação de novo projeto

Digite o nome do projeto e escolha a versão da API que deseja utilizar. Mais embaixo será necessário definir o nome da aplicação, o pacote, o nome da Activity e a versão mínima do SDK. É importante observar que a versão mínima do SDK deve estar de acordo com a escolhida no checkbox acima. Quando você clicar para o projeto ser criado, você poderá ver que a própria IDE já criou uma classe com o nome que você especificou e que essa classe estende uma classe chamada Activity. Em posts adiante, falarei um pouco mais sobre essa classe. Se você navegar na pasta chamada 'res' → 'layout', um arquivo xml intitulado main.xml responsável em trabalhar o layout da aplicação através das tags de xml, mas também só iremos detalhá-lo um pouco melhor em posts adiante. Se você navegar na pasta 'gen' e for através do pacote determinado na criação do projeto, você encontrará um arquivo chamado R.java. Esse arquivo funciona semelhante a uma interface entre o código Java e o XML citado anteriormente e não pode ser alterado manualmente. Ainda há também o arquivo 'AndroidManifest.xml' que guarda as informações referentes a nossa aplicação.

Então navegue até a pasta onde está o código-fonte da classe que você criou. Ela vai estar em 'src'. Abra o .java referente a sua classe e um código-fonte semelhante a esse será exibido.

Código-fonte da classe principal

Algumas explicações simples já que de início consideramos que você já tenha um certo conhecimento em Java.

Pode-se ver o pacote da classe e o import das bibliotecas necessárias para execução da app. Para melhores detalhes sobre cada classe, olhar a documentação da linguagem. Em seguida, temos nossa classe. No meu caso, chamei-a de 'MainActivity' e esta classe estende a classe Activity. Em seguida temos um @override de um método chamado 'onCreate(arg argument)'. O método onCreate() é um dos métodos definidos pela classe Activity. Ainda há onPause(), onStart(), entre outros. Há um gráfico bem interessante no tutorial de Felipe Silveira explicando os métodos da classe Activity. Para acessar, só clicar aqui.

Vamos fazer um teste e rodar o programa com a configuração inicial. Clique em “Run” e execute como uma aplicação Android.

Detalhe para essa parte que o emulador levará um tempo para iniciar. Aparecerá Android escrito na tela e depois de alguns minutos o “celular” estará pronto para uso. Desbloqueie-o arrastando o botão verde com o cadeado até o ponto marcado. Você verá que sua aplicação será iniciada. Uma tela preta exibindo o nome da sua aplicação estará no canto superior esquerdo da tela. Agora vamos voltar ao código-fonte.

!CUIDADO! Não feche o emulador. Apenas minimize-o senão você terá que esperar ele reiniciar novamente cada vez que abri-lo e isso não é legal. Acreditem, fechei-o várias vezes antes de entender que ele demorava para iniciar e que depois de iniciado bastava em recompilar o código-fonte que o emulador o executava novamente.

Está na hora de fazermos nossa primeira app e vocês verão como é simples. Para isso, vamos adicionar um import ao pacote “android.widget.TextView”. Em seguida vamos para o método onCreate(Bundle savedInstaceState). Abaixo da linha “super.onCreate(savedInstanceState)”, vamos adicionar um objeto da classe TextView através da linha “TextView view = new TextView(this)”. Na linha seguinte, deve estar “setContentView(R.layout.main), correto? Teremos que alterar essa linha porque queremos que a app exiba uma mensagem que iremos definir ao invés de exibir o nome da aplicação. Então vamos fazer o seguinte, ao invés de “setContentView(R.layout.main)”, vamos colocar “setContentView(view)”, onde o parâmetro definido pela variável view é justamente o objeto que criamos na linha superior. Contudo, se executarmos o programa, nenhuma mensagem aparecerá e por quê? Bom, se você olhar o código-fonte com certeza descobrirá. Nós criamos um objeto da classe TextView e fizemos para a aplicação 'mostrá-lo'. No entanto, não definimos nenhum valor para esse objeto, por isso antes do “setContentView(view)” iremos adicionar a linha “view.setText('Hello World!')”. O código-fonte deve ficar semelhante a imagem abaixo.

Código-fonte HelloWorld!

Então agora só nos falta testar a app e ver se ela está funcionando corretamente. Execute-a e abra o emulador. A mensagem definida por você estará lá no mesmo lugar que antes aparecia o nome da aplicação como mostra a imagem abaixo.

Emulador com nossa primeira app

Legal, não? Para nós programadores pode até ser quando estamos começando numa linguagem, contudo para os usuários nada disso é legal. Eles esperam sempre muito mais. Por isso, no próximo post, trabalharemos com entrada do usuário assim como botão e tela de aviso. Após o próximo post vou tentar colocar dois códigos-fonte de dois joguinhos simples utilizando apenas entrada de usuário, botão e tela de aviso, afinal o blog trata de jogos para Android =P. Lembrando que as informações que eu passo aqui não são tudo de autoria minha. Minhas referências estão sendo tutoriais que encontro pela internet e depois de testar coloco aqui meu entendimento em relação ao assunto descrito. Gostaria de aproveitar e agradecer aos programadores que não se limitam a apenas saber e sim a disseminar o conhecimento para que outros também possam usufruir dele. Por isso, um abraço para Felipe Silveira e Luciano Alves pelos tutoriais que estou utilizando nesse meu começo com Android.

Para os leitores também um grande abraço e até o próximo post.

Apresentação [ATUALIZADO!]

Bom dia a todos,

Meu nome é André e moro na capital paulista. Já tenho vários blogs onde trato de diversos assuntos, mas neste gostaria de tratar apenas sobre minhas experiências com a programação para Android. Por isso, nesse primeiro tópico irei apenas narrar minhas expectativas sobre o respectivo nicho.

O interesse em programar para Android surgiu há muito, mas apenas agora estou com certo "tempo disponível" para poder me dedicar um pouco ao estudo do desenvolvimento das apps.
Felizmente, já tenho uma certa bagagem em Java. O que, pelo que eu vi nos blogs e também na documentação oficial do Android, já é um imenso avanço. Contudo, ainda não suficiente já que o próprio Android utiliza um JDK específico. Mesmo assim, resolvi seguir nesse desejo de programar apps e espero chegar lá.

Como não pode deixar de ser, ao iniciar um "investimento" é necessário antes estudar e se informar bastante sobre requisitos, por isso fui atrás de tutoriais, blogs e livros interessantes sobre o assunto. Abaixo citarei alguns deles só para efeito de informação.
Blogs: AndroidBlog e Felipe Silveira
Livros: Android Application Development For Dummies, App Inventor for Android: Build Your Own Apps - No Experience Required!
Tutorial: Apostila de Android (Site com download para uma apostila muito boa feita por Luciano Alves) 
Documentação
Ferramentas: Eclipse*, Android SDK, ADT Plugin, Motodev
*No caso de utilizar Eclipse, é necessário instalar e configurar o Android SDK e o ADT Plugin. Já o Motodev vem acoplado todas as ferramentas necessárias para começar a desenvolver apps.

Espero com esse primeiro post clarear um pouco a mente de pessoas que como eu ainda vêem o caminho nebuloso diante do estudo de desenvolvimento do Android. No próximo post, irei narrar como configurei e implementei (utilizando o Motodev) meu primeiro app (Hello World através do tutorial disponibilizado por Felipe Silveira no seu blog).