Cadastro de Contatos - Parte 1

Continuando nossos tutoriais no Android Studio, vamos começar o projeto de criar uma aplicativo para cadastro de contatos. Este projeto visa trabalhar com ListViews, e Intents com o intuito de mostrar como trabalhar com várias telas e como funciona o banco de dados do Android.

Primeiramente vamos criar um novo projeto com nome de Meus Contatos da forma que explicamos no tutorial de "Instalando E Configurando O Android Studio". Porém na hora de escolher o modelo da sua primeira Activity, mude para Basic Activity.

Com o projeto criado, nós vamos separa-lo em duas instâncias, a MainActivity, onde irá conter todos os contatos já cadastrados, e a CadastroActivity que será a tela de cadastro. Como os layouts e o .java da Main já estão criados, vamos criar o .java da tela de cadastro clicando na área de projetos com o botão direito na pasta java, e dando um New, Java Class. E coloca o nome de CadastroActivity.


Na pasta res/layout clica com o botão direito, e vai em New, Resource File, e dar o nome de cadastrar_contato.


Agora vamos em manifests, AndroidManifests.xml e adicionar na área application:
<activity android:name=".CadastrarActivity" />


Agora abra o layout activity_main, e você notará que o nosso Floating Button está com o icon de mensagem. Para a proposta do app, escolhemos mudar para um icon de mais (add). Para isso vamos acessar o site do Google Design onde eles disponibilizam centenas de Icons gratuitamente com o intuito de programação no Android. No site pesquise por Add, e na área content escolha o icon correspondente. Clique nele, escolha a cor branca e faça o download dos PNGs.


Feito o download, você deverá abrir a pasta em que o projeto foi criado, e acessar a pasta res, que está em MeusContatos\app\src\main, e dentro da pasta, você copia todo o conteúdo da pasta Android do zip que foi feito o Download.



Agora volte para o Android Studio no activity_main, e na parte Text troque o src do Floating Button para:
android:src="@drawable/ic_add_white_24dp"

Abra o content_main e troque o TextView que está como "Hello World" para um ListView, retirando o campo text. e retire do RelativeLayout os paddings Top, Bottom, Left e Right, o código deve ficar assim:

Agora vamos no layout que criamos, o cadastrar_contato, e adicionar:
  • 1 - TextView com texto "Cadastrar Contato".
  • 4 - Text Fields
    • 1 - Tipo Person Name    (ID - nome)
    • 1 - Tipo PlainText    (ID - endereco)
    • 1 - Tipo Phone    (ID - telefone)
    • 1 - Tipo E-mail    (ID - email)
  • 2 - Buttons
    • 1 - Com texto "Confirmar"    (ID - confirmar)
    • 1 - Com texto "Cancelar"    (ID - cancelar)
E coloque os componentes em suas posições. 


O código ficará parecido com esse:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Cadastrar Contatos"
        android:id="@+id/textView2"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:hint="Name"
        android:ems="10"
        android:id="@+id/nome"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="30dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/endereco"
        android:hint="Endereço"
        android:layout_below="@+id/nome"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="10dp" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="phone"
        android:hint="Telefone"
        android:ems="10"
        android:id="@+id/telefone"
        android:layout_below="@+id/endereco"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="10dp" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Email"
        android:ems="10"
        android:id="@+id/email"
        android:layout_below="@+id/telefone"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="10dp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cadastrar"
        android:id="@+id/cadastrar"
        android:layout_below="@+id/email"
        android:layout_marginTop="30dp"
        android:layout_alignRight="@+id/email"
        android:layout_alignEnd="@+id/email"
        android:layout_gravity="center_vertical"
        android:clickable="true" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancelar"
        android:id="@+id/cancelar"
        android:layout_gravity="center_vertical"
        android:layout_alignTop="@+id/cadastrar"
        android:layout_alignLeft="@+id/email"
        android:layout_alignStart="@+id/email" />
</RelativeLayout>

Iremos abrir o CadastrarActivity, colocar extends AppCompatActivity, e criar um onCreate. Vamos criar também os EditTexts e os Buttons dentro da classe e no onCreate nós iremos inicializa-los com os seus views correspondentes. Implementaremos o View.OnClickListener na classe e iremos colocar os buttons como setOnClickListener. E criando o método onClick, e faremos um simples if para checar qual botão foi clicado. No final a classe deve ficar da seguinte maneira:


Abra o MainActivity e no onCreate na parte do Floating Button crie um Intent para poder abrir a Activity de cadastro. Quando um Intent é executado, ele pode abrir outras Activitys com o intuito de trocar de telas. No final ficará assim:


Disponibilizamos o projeto do aplicativo até agora pelo GitHub, para que vocês possam fazer Download/Clone do repositório. Iremos atualizando a medida que sair novos tutoriais. Link do GitHub: https://github.com/MNascimentoS/App-MeusContatos

0 comentários:

Postar um comentário