Tutorial Android #1 – Criando um Formulário Simples

Padrão

Olá pessoal! Hoje vamos começar uma nova série de posts, onde vamos abordar a criação de aplicativos móveis para aplicativos Android. Ao contrário das outras séries, nesta vamos fazer algo diferente. Teremos um projeto que será incrementado a cada post, adicionando novos conceitos e técnicas.

Como criar um dispositivo virtual e como criar um novo projeto, nós já vimos em posts anteriores. Então, crie um novo projeto chamado ListaDeRestaurantes.  O nome do aplicativo será Lista de Restaurantes e o nome da activity será ListaRestaurantes. O pacote pode ser o que você achar melhor.

Para os tutoriais, utilizarei a versão 2.2 do Android, que roda na grande maioria dos celulares hoje em dia. Mas fique à vontade para utilizar a versão que desejar (não deverá haver diferenças muito grandes).

Ao concluir a criação do projeto, teremos nossa árvore montada, tendo como principais arquivos ListaRestaurantes.java (a nossa Activity) e main.xml (o nosso arquivo de layout).

O primeiro passo é ajustarmos o layout da aplicação, criando um formulário simples. Abra o arquivo main.xml e alterne para o editor. Agora digite o seguinte código:

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br />
&lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;<br />
    android:orientation=&quot;vertical&quot;<br />
    android:layout_width=&quot;fill_parent&quot;<br />
    android:layout_height=&quot;fill_parent&quot;&gt;<br />
    &lt;LinearLayout<br />
        android:orientation=&quot;horizontal&quot;<br />
        android:layout_width=&quot;fill_parent&quot;<br />
        android:layout_height=&quot;wrap_content&quot;&gt;<br />
        &lt;TextView<br />
            android:layout_width=&quot;wrap_content&quot;<br />
            android:layout_height=&quot;wrap_content&quot;<br />
            android:text=&quot;Nome:&quot;/&gt;<br />
        &lt;EditText android:id=&quot;@+id/nome&quot;<br />
            android:layout_width=&quot;fill_parent&quot;<br />
            android:layout_height=&quot;wrap_content&quot;/&gt;<br />
    &lt;/LinearLayout&gt;<br />
    &lt;LinearLayout<br />
        android:orientation=&quot;horizontal&quot;<br />
        android:layout_width=&quot;fill_parent&quot;<br />
        android:layout_height=&quot;wrap_content&quot;&gt;<br />
        &lt;TextView<br />
            android:layout_width=&quot;wrap_content&quot;<br />
            android:layout_height=&quot;wrap_content&quot;<br />
            android:text=&quot;Endereço:&quot;/&gt;<br />
        &lt;EditText android:id=&quot;@+id/end&quot;<br />
            android:layout_width=&quot;fill_parent&quot;<br />
            android:layout_height=&quot;wrap_content&quot;/&gt;<br />
    &lt;/LinearLayout&gt;<br />
    &lt;Button android:id=&quot;@+id/salvar&quot;<br />
        android:layout_width=&quot;fill_parent&quot;<br />
        android:layout_height=&quot;wrap_content&quot;<br />
        android:text=&quot;Salvar&quot;/&gt;<br />
&lt;/LinearLayout&gt;

Vamos analisar, então, a estrutura do arquivo XML. Se você já mexeu com Swing no Java, vai reconhecer a forma de estruturar o formulário. O arquivo XML é organizado em tags ou elementos distribuídos de forma hierárquica, iniciando com um descritor de arquivo. No caso deste XML, indicamos sua versão e a codificação utilizada (UTF-8).

Em seguida, temos o início da definição de layout, com a adoção do LinearLayout. Este layout caracteriza-se por ter os elementos inseridos um após o outro (neste caso, verticalmente, já que passamos o parâmetro vertical no atributo android:orientation). Ao chegar-se ao fim da “linha” (tela), ele inicia uma nova linha, ou caso seja possível, ajusta os elementos para que caibam em uma mesma linha. Além disso, temos os parâmetros android:layout_width e android:layout_height, que foram configurados com o valor fill_parent. Este parâmetro (utilizado em vários outros pontos do código), significa que o tamanho deste elemento vai se ajustar ao tamanho do elemento imediatamente acima dele no nível hierárquico. Neste caso, como LinearLayout é o elemento raiz, ele se ajustará a tela, que é o elemento acima dele.

Internamente a esse layout, temos 3 elementos: 2 outros LinearLayout e um Button. Cada um desses LinearLayout possui um TextView (uma espécie de label) e um EditText (um campo de entrada de texto). Estes layouts tiveram o atributo android:layout_height atribuído com wrap_content. Este valor indica que o tamanho deste elemento deve se ajustar ao conteúdo atribuído a ele. Façam os testes de modificar estes parâmetros para ver o resultado.

O elemento TextView tem o atributo android:text, que indica o texto exibido pelo label. Além disso, são configurados seus atributos de largura e altura. Já no caso do EditText, temos o atributo android:id, que nos diz qual será o identificador do elemento para que possamos manipulá-lo da aplicação (dentro do arquivo Java). No caso do primeiro campo, @+id/nome indica que o elemento será referenciado na aplicação pelo nome nome. No segundo EditText, definimos seu nome para end.

Por fim, o Button tem tanto o elemento android:text (indicando o que aparecerá no botão) quanto o elemento android:id (no exemplo, definido como salvar).

Nesta primeira versão do nosso projeto, como não há nenhuma lógica, não será necessário modificar o arquivo ListaRestaurantes.java.

Vamos executar o nosso aplicativo para ver como ficou. Clique com o botão direito sobre o projeto e selecione Run As -> Android Application. Após alguns segundos o emulador será aberto, o sistema carregado e a aplicação instalada (não se preocupe se demorar, é normal). A aplicação ficará assim (variando um pouco dependendo do tamanho de tela definido):

Você pode testar o preenchimento dos dados e… só. Pelo menos por enquanto 😀

Se perdeu alguma parte, você pode baixar o projeto do Eclipse aqui.

Bom, por hoje é isso. Aguardem os próximos posts! Valeu! 😀