Criando um Formulário no Android

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!

Crie um novo projeto chamado Meus Contatos, versão 4.0.3 (API 15). O tema escolhido foi Holo Light, mas caso queira pode escolher qualquer outro. Avance duas vezes.

Na próxima tela, vamos carregar um ícone para nossa aplicação. Eu recomendo buscar um que lhe agrade no site www.iconesbr.net. Carregue-o no campo Image File: clicando no botão Browse…. Avance mais duas vezes até a tela de criação da nossa Activity.

Nesta tela, criaremos a Activity principal de nosso aplicativo. Geralmente eu utilizo nesta activity o próprio nome do aplicativo, neste caso, MeusContatos. Em seguida clique em Finish.

Ao concluir a criação do projeto, teremos nossa árvore montada, tendo como principais arquivos MeusContatos.java (a nossa Activity) e activity_meus_contatos.xml (o nosso arquivo de layout). Neste tutorial vamos alterar apenas o arquivo XML. Adicione o seguinte conteúdo a ele:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MeusContatos" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/nome" />

        <EditText
            android:id="@+id/nome"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="text" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/email" />

        <EditText
            android:id="@+id/email"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress" />
    </LinearLayout>

    <Button
        android:id="@+id/salvar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/salvar" />

</RelativeLayout>

Como pode ser visto, referenciamos algumas strings nele. Edite também o arquivo values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <string>Meus Contatos</string>
    <string>Settings</string>
    <string>Nome:</string>
    <string>E-mail:</string>
    <string>Salvar</string>
</resources>

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. Iniciamos com um elemento chamado RelativeLayout, que é um elemento de definição de layout. Estes elementos definem como os elementos internos serão posicionados. No caso do RelativeLayout, os elementos são posicionados em relação a outros elementos. Isso é útil para criar layouts adaptáveis a diversos tipos de tela.

Neste caso, temos 3 atributos definidos neste elemento.android:layout_width e android:layout_height dizem respeito a largura e altura do elemento, respectivamente. Neste caso, atribuímos o valor match_parent, ou seja, o elemento RelativeLayout terá o mesmo tamanho que seu elemento pai (neste caso, como não há nenhum, é a própria tela). Temos também o atributo tools:contexto, que diz qual o contexto desse layout (geralmente referenciando uma activity). Por enquanto não se preocupe com isso.

Internamente ao RelativeLayout, definimos um LinearLayout. Neste tipo de layout, os elementos adicionados são posicionados um após o outro, horizontalmente ou verticalmente através do atributo android:orientation. No nosso caso, definimos que os elementos serão adicionados verticalmente, com o valor vertical. Além disso, temos um atributo que diz respeito ao posicionamento do elemento no RelativeLayout. No atributo android:layout_alignParentTop, com o valor true, dizemos para que ele sempre seja posicionado coincidindo com o topo do layout.

Dentro do LinearLayout, temos quatro widgets que compõem nosso formulário. Oswidgets TextView servem para quando precisamos exibir algum tipo de texto na tela. No caso do nosso formulário, exibiremos as legendas dos campos de entrada de texto, instruindo o usuário para o que ele precisa digitar naquele campo. No caso do nosso exemplo, definimos a largura e altura (android:layout_width e android:layout_height) e o texto que ele vai exibir, através do atributo android:text.

A referência ao texto, seguindo as boas práticas da programação Android, é uma referência a uma entrada do arquivo values/strings.xml. No formulário também utilizamos o elemento EditText, que consiste em uma caixa de texto para a entrada de valores pelo usuário. Assim como no TextView, definimos a largura e a altura, bem como o tipo de conteúdo. No caso do primeiro TextView, esperamos simplesmente um texto qualquer (o nome do contato), definido através do valor textpara o atributo android:inputType. Temos também o atributo android:id que é o identificador ou melhor, o nome do elemento. Isso faz-se necessário pois, posteriormente, precisaremos de uma forma de acessar este elemento de dentro de nosso código Java. No nosso exemplo, o valor do campo é composto por@+id/nome. Simplificadamente, @ indica uma referência (estamos criando uma referência no aplicativo), +id diz que estamos criando um identificador e nome é o nome do nosso identificador. Seguindo o formulário, temos outro TextView e outroEditText, dessa vez com o inputType com o valor textEmailAddress, já que estaremos esperando um e-mail nesse segundo campo.

Já fora do LinearLayout, temos um botão, widget do Android chamado de Button. Definimos para ele um identificador (android:id), largura e altura (android:layout_width e android:layout_height), definimos que ele ficará alinhado com o rodapé do elemento pai (no caso, o RelativeLayout) através do atributoandroid:layout_alignParentBottom=”true” e definimos o texto a ser exibido no botão (também um valor do arquivo strings.xml).

Bom, com todo os elementos devidamente apresentados, vamos rodar o aplicativo. Botão direito sobre o projeto, selecione Run As… -> Android Application. Como já temos o nosso dispositivo virtual criado, ele vai executar automaticamente. Se você digitou corretamente o código, o aplicativo deverá parecer com isto:

Para importá-lo para o seu workspace, basta descompactar o projeto em algum local do seu computador, ir até o menu File -> Import, procurar pela opção Existing Project sinto Workspace e localizar a pasta.

Bom, por hoje é só pessoal! Até a próxima!

Download dos arquivos do projeto

Fonte