03 - Criando um Formulário no Android [Guia #dev Android]

Continuando com a nossa série, hoje vamos começar a criar uma aplicação que será incrementada ao longo dos próximos posts. Nela, aplicaremos diversos conceitos da plataforma Android, e, ao final, você verá como é o processo de publicação dos aplicativos no Google Play!

Por | @http://twitter.com/_rafaeltoledo Programação
<p>Ol&aacute; pessoal! Continuando com a nossa s&eacute;rie, hoje vamos come&ccedil;ar a criar uma aplica&ccedil;&atilde;o que ser&aacute; incrementada ao longo dos pr&oacute;ximos posts. Nela, aplicaremos diversos conceitos da plataforma Android, e, ao final, voc&ecirc; ver&aacute; como &eacute; o processo de publica&ccedil;&atilde;o dos aplicativos no Google Play!&nbsp;</p> <p>O processo de criar um novo projeto foi visto no &uacute;ltimo post, ent&atilde;o, vamos l&aacute;! Crie um novo projeto chamado&nbsp;<strong>Meus Contatos</strong>, vers&atilde;o&nbsp;<strong>4.0.3 (API 15)</strong>&nbsp;com o <strong>pacotenet.rafaeltoledo.meuscontatos</strong>. O tema escolhido foi&nbsp;<strong>Holo Light</strong>, mas caso queira pode escolher qualquer outro. Avance duas vezes.</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9537/android-tutorial-01.jpg" alt="" /></span></p> <p>Na pr&oacute;xima tela, vamos carregar um &iacute;cone para nossa aplica&ccedil;&atilde;o. Eu recomendo buscar um que lhe agrade no site&nbsp;<strong><a rel="nofollow" href="http://www.iconesbr.net/" target="_blank">www.iconesbr.net</a></strong>. Carregue-o no campo&nbsp;<strong>Image File:</strong>&nbsp;clicando no bot&atilde;o&nbsp;<strong>Browse&hellip;</strong>. Avance mais duas vezes at&eacute; a tela de cria&ccedil;&atilde;o da nossa Activity.</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9537/android-tutorial-02.jpg" alt="" /></span></p> <p>Nesta tela, criaremos a Activity principal de nosso aplicativo. Geralmente eu utilizo nesta activity o pr&oacute;prio nome do aplicativo, neste caso,&nbsp;<strong>MeusContatos</strong>. Em seguida clique em&nbsp;<strong>Finish</strong>.</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9537/android-tutorial-03.jpg" alt="" /></span></p> <p>Ao concluir a cria&ccedil;&atilde;o do projeto, teremos nossa &aacute;rvore montada, tendo como principais arquivos&nbsp;<strong>MeusContatos.java</strong>&nbsp;(a nossa Activity) e&nbsp;<strong>activity_meus_contatos.xml</strong>&nbsp;(o nosso arquivo de layout). Neste tutorial vamos alterar apenas o arquivo XML. Adicione o seguinte conte&uacute;do a ele:</p> <p><code><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />    xmlns:tools="http://schemas.android.com/tools"<br />    android:layout_width="match_parent"<br />    android:layout_height="match_parent"<br />    tools:context=".MeusContatos" ><br /> <br />    <LinearLayout<br />        android:layout_width="match_parent"<br />        android:layout_height="wrap_content"<br />        android:layout_alignParentTop="true"<br />        android:orientation="vertical" ><br /> <br />        <TextView<br />            android:layout_width="wrap_content"<br />            android:layout_height="wrap_content"<br />            android:text="@string/nome" /><br /> <br />        <EditText<br />            android:id="@+id/nome"<br />            android:layout_width="fill_parent"<br />            android:layout_height="wrap_content"<br />            android:inputType="text" /><br /> <br />        <TextView<br />            android:layout_width="wrap_content"<br />            android:layout_height="wrap_content"<br />            android:text="@string/email" /><br /> <br />        <EditText<br />            android:id="@+id/email"<br />            android:layout_width="fill_parent"<br />            android:layout_height="wrap_content"<br />            android:inputType="textEmailAddress" /><br />    </LinearLayout><br /> <br />    <Button<br />        android:id="@+id/salvar"<br />        android:layout_width="fill_parent"<br />        android:layout_height="wrap_content"<br />        android:layout_alignParentBottom="true"<br />        android:text="@string/salvar" /><br /> <br /></RelativeLayout></code></p> <p>Como pode ser visto, referenciamos algumas strings nele. Edite tamb&eacute;m o arquivo&nbsp;<strong>values/strings.xml</strong>:</p> <p><code><?xml version="1.0" encoding="utf-8"?><br /><resources><br />     <string>Meus Contatos</string><br />    <string>Settings</string><br />    <string>Nome:</string><br />    <string>E-mail:</string><br />    <string>Salvar</string><br /></resources></code></p> <p>Vamos analisar, ent&atilde;o, a estrutura do arquivo XML. Se voc&ecirc; j&aacute; mexeu com&nbsp;<strong>Swing</strong>&nbsp;no Java, vai reconhecer a forma de estruturar o formul&aacute;rio.&nbsp;O arquivo XML &eacute; organizado. Iniciamos com um elemento chamado&nbsp;<strong>RelativeLayout</strong>, que &eacute; um elemento de defini&ccedil;&atilde;o de layout. Estes elementos definem como os elementos internos ser&atilde;o posicionados. No caso do&nbsp;<strong>RelativeLayout</strong>, os elementos s&atilde;o posicionados em rela&ccedil;&atilde;o a outros elementos. Isso &eacute; &uacute;til para criar layouts adapt&aacute;veis a diversos tipos de tela.</p> <p>Neste caso, temos 3 atributos definidos neste <strong>elemento.android:layout_width</strong> e <strong>android:layout_height</strong>&nbsp;dizem respeito a largura e altura do elemento, respectivamente. Neste caso, atribu&iacute;mos o valor&nbsp;<strong>match_parent</strong>, ou seja, o elemento&nbsp;<strong>RelativeLayout</strong>&nbsp;ter&aacute; o mesmo tamanho que seu elemento pai (neste caso, como n&atilde;o h&aacute; nenhum, &eacute; a pr&oacute;pria tela). Temos tamb&eacute;m o atributo&nbsp;<strong>tools:contexto</strong>, que diz qual o contexto desse layout (geralmente referenciando uma activity). Por enquanto n&atilde;o se preocupe com isso.</p> <p>Internamente ao&nbsp;<strong>RelativeLayout</strong>, definimos um&nbsp;<strong>LinearLayout</strong>. Neste tipo de layout, os elementos adicionados s&atilde;o posicionados um ap&oacute;s o outro, horizontalmente ou verticalmente atrav&eacute;s do atributo&nbsp;<strong>android:orientation</strong>. No nosso caso, definimos que os elementos ser&atilde;o adicionados verticalmente, com o valor&nbsp;<strong>vertical</strong>. Al&eacute;m disso, temos um atributo que diz respeito ao posicionamento do elemento no&nbsp;<strong>RelativeLayout</strong>. No atributo&nbsp;<strong>android:layout_alignParentTop</strong>, com o valor&nbsp;<strong>true</strong>, dizemos para que ele sempre seja posicionado coincidindo com o topo do layout.</p> <p>Dentro do&nbsp;<strong>LinearLayout</strong>, temos quatro&nbsp;<strong><em>widgets</em></strong>&nbsp;que comp&otilde;em nosso formul&aacute;rio. Os<em>widgets</em>&nbsp;<strong>TextView</strong>&nbsp;servem para quando precisamos exibir algum tipo de texto na tela. No caso do nosso formul&aacute;rio, exibiremos as legendas dos campos de entrada de texto, instruindo o usu&aacute;rio para o que ele precisa digitar naquele campo. No caso do nosso exemplo, definimos a largura e altura (<strong>android:layout_width</strong> e <strong>android:layout_height</strong>) e o texto que ele vai exibir, atrav&eacute;s do atributo&nbsp;<strong>android:text</strong>.</p> <p>A refer&ecirc;ncia ao texto, seguindo as boas pr&aacute;ticas da programa&ccedil;&atilde;o Android, &eacute; uma refer&ecirc;ncia a uma entrada do arquivo&nbsp;<strong>values/strings.xml</strong>. No formul&aacute;rio tamb&eacute;m utilizamos o elemento&nbsp;<strong>EditText</strong>, que consiste em uma caixa de texto para a entrada de valores pelo usu&aacute;rio. Assim como no&nbsp;<strong>TextView</strong>, definimos a largura e a altura, bem como o tipo de conte&uacute;do. No caso do primeiro&nbsp;<strong>TextView</strong>, esperamos simplesmente um&nbsp;<strong>texto</strong>&nbsp;qualquer (o nome do contato), definido atrav&eacute;s do valor&nbsp;<strong>text</strong>para o atributo&nbsp;<strong>android:inputType</strong>. Temos tamb&eacute;m o atributo&nbsp;<strong>android:id</strong>&nbsp;que &eacute; o identificador ou melhor, o&nbsp;nome&nbsp;do elemento. Isso faz-se necess&aacute;rio pois, posteriormente, precisaremos de uma forma de acessar este elemento de dentro de nosso c&oacute;digo Java. No nosso exemplo, o valor do campo &eacute; composto por<strong>@+id/nome</strong>. Simplificadamente,&nbsp;<strong>@</strong>&nbsp;indica uma refer&ecirc;ncia (estamos criando uma refer&ecirc;ncia no aplicativo),&nbsp;<strong>+id</strong>&nbsp;diz que estamos criando um identificador e&nbsp;<strong>nome</strong>&nbsp;&eacute; o nome do nosso identificador. Seguindo o formul&aacute;rio, temos outro&nbsp;<strong>TextView</strong>&nbsp;e outro<strong>EditText</strong>, dessa vez com o&nbsp;<strong>inputType</strong>&nbsp;com o valor&nbsp;<strong>textEmailAddress</strong>, j&aacute; que estaremos esperando um e-mail nesse segundo campo.</p> <p>J&aacute; fora do&nbsp;<strong>LinearLayout</strong>, temos um bot&atilde;o,&nbsp;<em>widget&nbsp;</em>do Android chamado de&nbsp;<strong>Button</strong>. Definimos para ele um identificador (<strong>android:id</strong>), largura e altura (<strong>android:layout_width</strong>&nbsp;e<strong>&nbsp;android:layout_height</strong>), definimos que ele ficar&aacute; alinhado com o rodap&eacute; do elemento pai (no caso, o&nbsp;<strong>RelativeLayout</strong>) atrav&eacute;s do atributo<strong>android:layout_alignParentBottom=&rdquo;true&rdquo;</strong>&nbsp;e definimos o texto a ser exibido no bot&atilde;o (tamb&eacute;m um valor do arquivo&nbsp;<strong>strings.xml</strong>).</p> <p>Bom, com todo os elementos devidamente apresentados, vamos rodar o aplicativo. Bot&atilde;o direito sobre o projeto, selecione&nbsp;<strong>Run As&hellip;</strong>&nbsp;-&gt;&nbsp;<strong>Android Application</strong>. Como j&aacute; temos o nosso dispositivo virtual criado, ele vai executar automaticamente. Se voc&ecirc; digitou corretamente o c&oacute;digo, o aplicativo dever&aacute; parecer com isto:</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9537/android-tutorial-04.jpg" alt="" /></span></p> <p>Se ficou alguma d&uacute;vida ou teve algum problema, voc&ecirc; pode baixar o projeto<strong>&nbsp;<a href="https://www.oficinadanet.com.br/imagens/post/9537/meuscontatos-v01.zip">aqui</a>.</strong> Para import&aacute;-lo para o seu&nbsp;<strong>workspace</strong>, basta descompactar o projeto em algum local do seu computador, ir at&eacute; o menu&nbsp;<strong>File -&gt; Import</strong>, procurar pela op&ccedil;&atilde;o&nbsp;<strong>Existing Project sinto Workspace</strong>&nbsp;e localizar a pasta.</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9537/android-tutorial-05.jpg" alt="" /></span></p> <p>Bom, por hoje &eacute; s&oacute; pessoal! At&eacute; a pr&oacute;xima!&nbsp;</p> <p style="text-align: center;"><strong>Download dos arquivos do projeto:</strong><br /> <a href="https://www.oficinadanet.com.br/imagens/post/9537/meuscontatos-v01.zip"><img src="https://www.oficinadanet.com.br/imagens/post/9537/botaodownloadoficina.jpg" alt="" /></a></p>

Mais sobre: guiaandroid, android
Share Tweet
Mais compartilhados
Comentários