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:

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

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! 😀

3 comentários sobre “Tutorial Android #1 – Criando um Formulário Simples

  1. Mt

    Rafael, eu criei uma nova tela (activity) e um outro layout, o problema é que parece que essa activity nao criou um link com o layout criado porque qualquer coisa que eu faço na classe Activity nao dá nenhum efeito no layout quando eu emulo a aplicaçao. Como eu faço? No androidmanifest.xml eu declarei dessa forma:

    Obrigado, aguardo resposta se puder me ajudar 🙂

Deixe uma resposta