Android – Criando uma Tela de Login

Neste mês abordarei um assunto presente em todos os sistemas, o uso de autenticação de usuários, ou seja, criarei uma tela de login para quem está desenvolvendo para a plataforma Android. Com os recursos do Android em sua versão 4.4 poderemos implementar técnicas muito legais para esta tarefa. No primeiro momento será criada uma classe contendo dados do usuário, como por exemplo: “Usuário” e “Senha”. A Tela de Login será herdada de uma “Activity” e o lay-out será desenhado a partir de um arquivo “.xml”, ou seja, não teremos nada de diferente. 

Criando o Exemplo

O primeiro passo seria criar o projeto, para quem não sabe clique em “File/New/Android Application Project” definindo um Nome para a aplicação, projeto e o pacote. No meu caso foi definido como:

Application Name: Login
Project Name: Login
Package Name: com.example.login

Recomendo também fazer o uso do SDK 4.4 - API 19, o Android 4.4 KitKat. Ver Imagem 01.

 

Figura 01: Criando uma aplicação Android.

Os próximos passos deveremos seguir as configurações padrões de projeto. (Não detalharei esta etapa pois temos inúmeros artigos em nossa revista sobre este assunto). Com o projeto criado podemos notar a presença de uma Activity chamada “MainActivity.java” e de um arquivo de lay-out “activity_main.xml”, ambos serão aproveitados para chamar a nossa tela de Login mais adiante. Partiremos então para a criação da classe “Login”.

Classe “Login.java”

Clique com o botão direito sobre o diretório “src/com.example.login” e escolha o item “New/Class”. Esta classe irá conter os atributos “Usuario” e “Senha” com os respectivos “Gets” e “Sets” e o método “ValidarUsuario()”. Teremos como referência o uso de duas constantes do tipo texto, sendo USUARIO e SENHA. Farei o uso das mesmas para fins didáticos, mas ressalto que poderíamos receber estes dados de outra origem, como por exemplo de um banco de dados.  Ver Listagem 01.

package com.example.login;

public class Login

{

     private static final String USUARIO = "THECLUB";

     private static final String SENHA = "123456";

Teremos as duas constantes do tipo texto contendo valores padrões.

    

     private String Usuario;

     private String Senha;

    

public String getUsuario()
{

         return Usuario;

     }

public void setUsuario(String usuario)
{

         Usuario = usuario;

     }

public String getSenha()
{

         return Senha;

     }

public void setSenha(String senha)
{

         Senha = senha;

     }

    

Teremos também os atributos “Usuário” e “Senha” devidamente encapsulados.

     public Login()

     {   

        

     }

No método construtor não faremos nada de diferente.

    

     public boolean ValidarUsuario()

     {

         if (Usuario.equals(""))

         {

              return false;  

         }

         else if (Senha.equals(""))

         {

              return false;

         }

else if (!Usuario.equals(USUARIO) || !Senha.equals(SENHA)) 

         {

              return false;

         }

         else

         {

              return true;

         }

     }

No método “ValidarUsuario()” não teremos nenhum parâmetro de entrada e sim um de saída. Retornaremos um valor booleano realizando um encadeamento de “ifs” testando se o atributo Usuário ou Senha estão vazios e se os mesmos correspondem aos valores definidos nas constantes. Através do resultado deste método validamos os dados digitados.

}
Listagem 01: Classe Login.

O nosso projeto de exemplo possuirá as seguintes atividades com seus respectivos arquivos “XML”, podemos conferir detalhadamente abaixo:

1) MainActivity.java/activity_main.xml (Tela que conterá a chamada para a tela de Login)
2) LoginAtividade.java/login.xml (Tela para efetuar o Login)
3) CadastroAtividade.java/cadastro.xml (Tela que se abrirá após a autenticação do usuário)

Respeitando a estrutura descrita acima, deveremos criar todos os arquivos responsáveis pelo funcionamento do projeto, ver Figura 02.

Figura 02: Estrutura do projeto.

1    

         Main_activity.xml

Nesta tela teremos apenas um botão responsável por chamar a tela de login. Através dele disparamos o método “OnActivityResult” que será discutido logo em seguida. Ver Figura 03.

 

Figura 03: Tela para chamar o Login.

O XML correspondente, Ver Listagem 02.

<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"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <Button

        android:id="@+id/btnLogin"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:onClick="Login"

        android:text="Efetuar Login" />

</RelativeLayout>
Listagem 02.

Codificando a Atividade “main_activity.java”

Nesta atividade teremos que nos focar no método “Login” e no “OnActivityResult”, sendo respectivamente para invocar a tela de login e para tratar o retorno do mesmo.

Conferir Listagem 03.

package com.example.login;

import android.os.Bundle;

import android.app.Activity;

import android.content.Intent;

import android.view.Menu;

import android.view.View;

Importaremos algumas bibliotecas essenciais.

public class MainActivity extends Activity {

     @Override

protected void onCreate(Bundle savedInstanceState)
{

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

     }

Método que será disparado na criação do lay-out.

        

     public void Login(View view)

     {

Intent login = new Intent(MainActivity.this, LoginAtividade.class);

     startActivityForResult(login, 1);

     }

Método que fará a chamada da Atividade “LoginAtividade”. Trataremos o retorno da mesma através da função “StartActivityForResult”.

    

     @Override

protected void onActivityResult(int requestCode, int resultCode, Intent data)

    {

if (resultCode == Activity.RESULT_OK &&  requestCode == 1)

         {

startActivity(new Intent(MainActivity.this,   CadastroAtividade.class));

         }

    }

Já no método sobrescrito “OnActivityResult” comparamos o atributo “resultCode” para nos certificarmos que o usuário clicou no botão “OK” e o “requestCode” para o valor 1, indicando que a autenticação foi realizada com sucesso.

}

Listagem 03.

2 

          login.xml

Deveremos inserir dois TextViews, dois Editexts e um Button, com as informações referentes ao usuário. Ver Imagem 04.

 

Figura 04: Tela de Login.

O XML correspondente, conferir Listagem 05.

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

   android:layout_width="fill_parent" 

   android:layout_height="fill_parent" 

   android:orientation="vertical" 

   android:padding="5dp" > 

  

   <TextView 

     android:id="@+id/txtLogin"

     android:layout_width="match_parent" 

     android:layout_height="wrap_content" 

     android:text="Usuário" 

     android:textAppearance="?android:attr/textAppearanceMedium" /> 

  

   <EditText 

     android:id="@+id/edtUsuario" 

     android:layout_width="match_parent" 

     android:layout_height="wrap_content" 

     android:ems="10" > 

   </EditText> 

  

   <TextView 

     android:id="@+id/txtSenha"

     android:layout_width="match_parent" 

     android:layout_height="wrap_content" 

     android:text="Senha" 

     android:textAppearance="?android:attr/textAppearanceMedium" /> 

  

   <EditText 

     android:id="@+id/edtSenha" 

     android:layout_width="match_parent" 

     android:layout_height = "wrap_content" 

     android:ems="10" 

     android:inputType="textPassword" /> 

  

   <Button 

     android:id="@+id/btnEntrar" 

     android:layout_width="match_parent" 

     android:layout_height="wrap_content" 

     android:onClick="Login" 

     android:text="Entrar" /> 

  

</LinearLayout> 
Listagem 05.

Codificando a Atividade “LoginAtividade.java”

Já na “LoginAtividade” iremos alimentar a classe “Login” criada anteriormente com os dados necessários. Ver Listagem 06.

package com.example.login;

import android.app.Activity;

import android.app.AlertDialog;

import android.os.Bundle;

import android.view.View;

import android.widget.EditText;

Faremos o uso de algumas bibliotecas.

public class LoginAtividade extends Activity

{ 

  private EditText edtUsuario;

  private EditText edtSenha;

Deveremos declarar duas variáveis privadas, ambas para inicializar os “EditTexts”.

  @Override

  protected void onCreate(Bundle savedInstanceState)

  {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.login);

    InicializaObjetos();

  }

 

  public void InicializaObjetos()

  {

edtUsuario = (EditText) findViewById(R.id.edtUsuario);

      edtSenha = (EditText) findViewById(R.id.edtSenha);

  }

O método “InicializaObjetos” irá realizar a referência dos objetos com as variáveis criadas acima. Este método sempre será disparado no evento “OnCreate”. 

  private void MensagemInformativa(String mensagen) {

    new AlertDialog.Builder(this)

      .setTitle("The Club")

      .setMessage(mensagen)

      .setPositiveButton("OK", null)

      .setCancelable(false)

      .show();

  }

O método “MensagemInformativa” recebe como parâmetro uma variável do tipo texto que nos dará uma mensagem informativa ao usuário de acordo com a ocasião. Ele faz o uso da classe “AlertDialog” com alguns atributos como por exemplo: “setTitle” (Inserir título na caixa de diálogo), “SetMessage” (Mensagem disparada), “setPositiveButton” (Botão Ok) e “set Cancelable” (indicando que não possui o botão cancelar) e o método “show” (para carregá-lo).

  public void Login(View v)

  {   

    Login classe_login = new Login();

classe_login.setUsuario(edtUsuario.getText().toString());

     classe_login.setSenha(edtSenha.getText().toString());

   

     if (classe_login.ValidarUsuario() == false)

     {

MensagemInformativa("Dados Incorretos, Favor    preenchê-los corretamente!");

     }

     else

     {

         setResult(Activity.RESULT_OK);

        finish();

     }

  }

O método “Login” recebe como parâmetro a própria View, sendo disparado no evento “OnClick” do Botão. Deveremos instanciar a classe “Login” setando o usuário e a senha logo em seguida. Faremos um “If” com base no método “classe_login.ValidarUsuario()” comparando se o retorno é verdadeiro ou falso. Caso o retorno for “falso” disparamos uma mensagem para o usuário, caso contrário liberaremos o acesso com o auxílio do método “setResult” e o “finish()” para fechar a nossa Atividade.

}
Listagem 06.

           

3-) cadastro.xml

Esta tela seria apenas para informar ao usuário que o acesso foi liberado. Fiquem a vontade para utilizar o que desejar. Ver Imagem 05.

Figura 05: Tela informativa de acesso liberado.

 

O código XML na Listagem 07.

<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"

    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:id="@+id/txtMensagem"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="64dp"

        android:text="Acesso Liberado!!!"

        android:textSize="30dp"

        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Listagem 07.

Configurações no “AndroidManifest.xml”

Nas configurações do arquivo “AndroidManifest.xml” não faremos praticamente quase nada de diferente, apenas definimos todas as Atividades utilizadas. Ver listagem 08.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.login"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="19"

        android:targetSdkVersion="19" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

       

        <activity

            android:name="com.example.login.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

<activity android:name="com.example.login.CadastroAtividade"

        android:label="Cadastro" >

          <intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

          </intent-filter>

        </activity>

       

          <activity

              android:name="LoginAtividade"

              android:label="Login do Sistema"

              android:screenOrientation="portrait"

              android:theme="@android:style/Theme.Dialog">

            <intent-filter>

<action android:name="android.intent.action.MAIN"/>

            </intent-filter>

        </activity>

       

    </application>

</manifest>

Listagem 08.

Deveremos nos atentar para o Trecho do código referente à Tela de Login do Sistema. Teremos que realizar algumas configurações para que a tela fique com um lay-out agradável para o usuário. A propriedade “android:screenOrientation” deixaremos como “portrait”. Já no “android:theme” deixaremos como “@android:style/Theme.Dialog”.

Exemplo em “Run-Time”

O resultado final poderá ser conferido na Imagem 06.

Figura 06: Executando o exemplo.

Conclusões

Pudemos aprender neste artigo uma alternativa de como deveremos proceder para criação de uma tela de Login. Procurei também ser bem claro e objetivo dando a oportunidade de implementar novas funcionalidades caso for necessário. Fiquem a vontade para baixar o arquivo de exemplo e testar em suas aplicações.

Um abraço e até o mês que vem!