Criando Aplicativos: Meu Segundo Projeto – EditText e Button

Criando Aplicativos: Meu Segundo Projeto – EditText e Button

criar-apps

Dando prosseguimento no tutorial sobre a criação de aplicativos para o Android, vamos realizar um projeto mais elaborado desta vez. O objetivo principal deste artigo e de outros futuros é apresentar os componentes básicos e essenciais disponíveis no SDK (Software Development Kit) do Android para você utilizar nos apps que você criar. Estes artigos serão mais curtos com explicações pontuais sempre que for necessário.

Para começar o desenvolvimento do aplicativo proposto, você deve criar um app igual ao Hello World que vimos aqui.  No entanto na tela de criação de um novo "Android Application Project", você vai colocar o seguinte:

Application Name: NomeIdade Project Name: (Mesmo do "Application Name". Nome preenchido automático). Package Name: (Aqui é a mesma ideia do Java, geralmente você coloca o endereço invertido do seu site, isto para ter um nome único, vamos colocar "com.minhacasa.nomeidade"). Minimum Required SDK: API 11: Android 3.0 (Honeycomb) [Vários tutoriais dizem para colocar o mínimo possível. Mas para ter um suporte legal de funcionalidades o 11 é mais interessante]. O resto das opções você pode deixar default igual como o nosso primeiro tutorial do "Hello World".

Feito todo o processo após dar os "nexts" e o "finish" o ADT vai criar o projeto. Como foi falado a ideia é o aprendizado rápido da criação de aplicativos assim as ferramentas visuais sempre terão prioridade. Depois de criar o projeto é bem possível que o ADT mostre o fragment_main.xml aberto no código. É possível ir inserindo o XML neste arquivo para criar os elementos, mas vamos fazer tudo através da ferramenta visual. Na tela onde está sendo exibido o XML você vai clicar na parte inferior em "Graphical Layout" adt-graphical-layout.

Agora apague o TextView "Hello World!". Quando o elemento TextView é apagado fica um resíduo no arquivo de idiomas ainda, assim é necessário apagar lá também. Vá na pasta "res" > "values" > "strings.xml" marque "hello_world" e clique em "remove...":

adt-values-strings-xml OBS 1: Nas versões anteriores do SDK do Android os programadores costumavam colocar os textos diretamente nas propriedades "Text" e "Hint" dos elementos. No entanto esta não é uma boa prática! Tudo que for de textos deve ir no strings.xml, isso garante uma maior organização do código além de facilitar muito a localização para outros idiomas. Assim já é bom manter o hábito em utilizar este arquivo. OBS 2: A pasta "res" tem este nome por causa de "resources" que pode ser traduzido como "recursos", então saiba que tudo que for relacionado aos recursos do aplicativo está em "res".

Agora vamos voltar no Graphical View to fragment_main.xml. Este arquivo já veio aberto, mas ele está localizado em res > layout. Repare que dentro desta paste layout tem 2 arquivos: "activity_main.xml" e "fragment_main.xml". Caso você abrir o activity_main.xml você vai ver que ele é um XML de recursos visuais também, inclusive você pode ver uma tela de app se clicar em Graphical View. Dois arquivos de recursos visuais. Confuso né? Não! Nem tanto, isto é algo para manter a organização e a modularização do seu aplicativo. Caso eu for entrar na explicação de fragments, um recurso novo no SDK do Android, daria um  outro artigo. Em linhas gerais você precisa saber o seguinte: Tudo o que você for colocar de elementos visuais vai em "fragments" e não no activity_main.xml. Alguns programadores que não estão interessados em aprender sobre o "fragments" preferem copiar todo o conteúdo do fragment_main.xml e colar no activity_main.xml, depois o activity_main.xml é apagado. Bom isto não é uma boa prática. Imagine que você deseja que seu aplicativo abra em vários tipos de smartphones e tablets com resoluções diferentes. Você pode ter um fragment para a resolução de aparelhos com telas pequenas (resoluções baixas) e outro fragment para aparelhos com telas maiores como, por exemplo, o Galaxy S4 (com tela de 5 polegadas). Então dependendo do tipo de resolução de tela você pode carregar o fragment correto, para telas maiores o layout do aplicativo pode ser um, para telas menores, o layout pode ser outro. Isto é só um exemplo, não vamos ver isso agora. O importante é você ir já utilizando o fragments e criar este hábito.

Bom no Graphical View do fragment_main.xml você vai dar com o botão direito na tela do aplicativo e vai clicar em "Change Layout". Na tela que abrir em "New Layout Type" vamos escolher "LinearLayout (Vertical)". Isto vai definir um alinhamento vertical e centralizado para todos os elementos na tela. Agora vamos arrastar alguns elementos da "Palette" para o aplicativo. O primeiro é um TextView do tipo "Large". Depois clique em "Text Fields" e arraste um EditText do tipo "Plain Text" ou "Texto Corrido" é o primeiro. Agora volte em "Form Widgets" e adicione mais um TextView do tipo "Large". Agora novamente em "Text Fields" vamos adicionar mais um "EditText" só que agora será o décimo terceiro, um EditText que só aceita números, repare que se você deixar o mouse em cima vai aparecer escrito "Number". Agora em "Form Widgets" vamos pegar um botão simples "Button". Depois de colocar o botão na tela do app, deixe o mesmo marcado e nas ferramentas acima clique em "Toggle Fill Width" adt-toggle-fill-width para ocupar bem a tela.

graphical-view-app

Agora vamos colocar nomes nos elementos. No primeiro TextView você vai trocar para "Informe seu nome:". A legal, e onde faço isso??!? Simples! Você leu acima sobre um arquivo strings.xml. Pois bem, o nome vai ser informado lá. Mas antes vamos em "Properties", uma tela no canto direito. Esta tela que definimos as propriedades de cada elemento na tela, fazendo uma analogia seria algo como o "Object Inspector" do Delphi. Então deixe o primeiro TextView selecionado e lá vamos colocar nele o id "tv1" vai aparecer um diálogo para atualizar as referências para este elemento e você vai clicar em "Sim" e em seguida "Ok".

Perfeito! Agora vamos no arquivo strings.xml para e vamos clicar em "Add", na tela que abrir marcar "String" e clicar em "OK". Em "Attributes for String" vamos colocar em "Name" -> "tv1" e em "Value" -> "Informe seu nome:", CTRL+S para salvar e pronto! Voltando a tela do nosso aplicativo, deixando o primeiro TextView marcado, em propriedades, vamos agora em "Text", o valor atual deve ser apagado e em seguida coloque: "@string/tv1". Feito! Agora o valor deste TextView vai vir diretamente do strings.xml, legal né? Veja como ficou:

adt-properties

Agora faça o mesmo para o segundo TextView e coloque "Informe sua idade:". Neste caso o id será "tv2" obviamente! Agora no primeiro EditText coloque o id "edt1". A propriedade "Text" ficará vazia só que em hint (dica) você vai colocar o texto "Digite aqui..." de forma semelhante como no TextView. Repare a imagem abaixo:

adt-edittext-hint

Faça a mesma coisa para o segundo EditText, troque o id para "edt2" e o hint para "Digite aqui...". Por último temos o botão, troque o id para "btn1" e o text para "Ver Resultado". A esta altura do campeonato nosso strings.xml já está assim:

adt-values-strings-xml-2

No strings.xml aproveite para editar o app_name e coloque o valor "App2: Nome e Idade". Salve. O aplicativo ficará com esta cara:

adt-graphical-layout-2

Feito isso vamos dar um "Run" adt-run no aplicativo para ver como vai ficar na tela do emulador do Android.

OBS: É sempre uma boa prática rodar o aplicativo com uma certa frequência durante o desenvolvimento. Isso vai ajudar a garantir que o app fique livre de bugs e também vai te ajudar a encontrar erros. Imagine você faz tudo, digita todo o código com algumas centenas de linhas e mandar rodar o app e dá um erro. Onde está o erro? Dependendo do tipo de erro será bem difícil encontrar. Agora se você faz uma parte utilizável do app e já roda e testa, você vai validar que até a etapa atual está tudo funcionando. Caso você fizer algo de errado, após rodar, você saberá com exatidão onde o erro foi cometido. Existe outras formas de encontrar erros, mas esta dica é bem quente para iniciantes.

android-emulator

Está ficando bonito!! Repare que em idade se você tentar digitar texto não vai, somente número, isso porque colocamos um EditText do tipo "Number". Agora minimize o emulador, eu disse minimize, não vá fechar, pois da próxima vez que rodar o aplicativo será necessário esperar o Android carregar tudo de novo!!!

Agora vamos para a parte mais divertida, o código! Para isso abra o arquivo MainActivity.java localizado na pasta "src" > "com.minhacasa.nomeidade", src de "source" ou "fonte em português", aqui que fica seu código fonte. Esta parte é bem tranquila, você vai criar um método chamado "nomeIdade", o resto do código não precisa mexer. Veja abaixo, as partes legais do código estão comentadas!!

OBS: R.java é uma classe gerada dinamicamente, criada durante o processo de construção do aplicativo para identificar de forma dinâmica todos os recursos (strings, elementos visuais, layout, etc). O R.java é utilizado em todas as classes java do nosso aplicativo, como estamos fazendo em "MainActivity.java". Note que o R.java é específico do SDK do Android, por isso não faz parte da linguagem Java. Maiores informações sobre o R.java clique aqui.

[crayon-584b6f6fd1ee1526104416/]

Depois de digitar o código vamos voltar em fragment_main.xml, clicar sobre o botão e em "Properties" vamos procurar por "On Click" (um evento que é disparado quando o botão é clicado). Vamos colocar o nome "nomeIdade" (o nome do nosso método), CTRL+S para salvar.

Agora vamos rodar o aplicativo e ver como ficou:

android-emulator-2

É isto pessoal!! O nosso segundo aplicativo está pronto. Agora explore ao máximo este aplicativo!! Experimente colocar outros elementos "EditText", mude o texto do resultado para exibir mais informações etc. Coloque o que você for aprendendo ou qualquer dúvida nos comentários e não esqueça de curtir e compartilhar para dar uma motivação aqui em escrever mais.

Carlos Eduardo da Silva. Administrador e editor-chefe deste site. Formação em Telecomunicações e Redes de Computadores. Especialista em Engenharia de Projetos de Software.
Carlos Eduardo on sabtwitterCarlos Eduardo on sabgoogleCarlos Eduardo on sabgithubCarlos Eduardo on sabfacebook
  • Pingback: Criando Aplicativos para Android: Estruturas de Desvio de Fluxo | Central Android()

  • Gesiel

    Boa tarde!
    Primeiramente, parabéns pela iniciativa de compartilhar seus conhecimentos. Graças a este post, estou começando a desenvolver meus projetos. No entanto, fiquei enrolado com a disposição do código, ou seja, perdido mesmo. Não consegui colocar o código corretamente, estou no inicio mesmo, deu vários erros de, digamos, sintaxe. Se você puder me esclarecer como colocar o código corretamente eu agradeço.
    Um abraço.