Android Login Screen Tutorial

Advertisements


A login application is the screen asking your credentials to login to some particular application. You might have seen it when logging into facebook,twitter e.t.c

This chapter explains, how to create a login screen and how to manage security when false attempts are made.

First you have to define two TextView asking username and password of the user. The password TextView must have inputType set to password. Its syntax is given below:

<EditText
   android:id="@+id/editText2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:inputType="textPassword" />
<EditText
   android:id="@+id/editText1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
/>

Define a button with login text and set its onClick Property. After that define the function mentioned in the onClick property in the java file.

<Button
   android:id="@+id/button1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:onClick="login"
   android:text="@string/Login" 
/>

In the java file, inside the method of onClick get the username and passwords text using getText() and toString() method and match it with the text using equals() function.

EditText username = (EditText)findViewById(R.id.editText1);
EditText password = (EditText)findViewById(R.id.editText2);		
public void login(View view){
if(username.getText().toString().equals("admin") && 
password.getText().toString().equals("admin")){
//correcct password
}else{
//wrong password
}	

The last thing you need to do is to provide a security mechanism, so that unwanted attempts should be avoided. For this intializa a variable and on each false attempt, decrement it. And when it reaches to 0, disable the login button.

int counter = 3;
counter--;
if(counter==0){
//disble the button, close the application e.t.c
}

Example

Here is an example demonstrating a login application. It creates a basic application that gives you only three attempts to login to an application.

To experiment with this example , you can run this on an actual device or in an emulator.

StepsDescription
1You will use Eclipse IDE to create an Android application and name it as LoginScreen under a package com.example.loginscreen. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
3Modify src/MainActivity.java file to add necessary code.
4Modify the res/layout/activity_main to add respective XML components
5Modify the res/values/string.xml to add necessary string components
6Run the application and choose a running android device and install the application on it and verify the results

Following is the content of the modifed main activity file src/com.example.loginscreen/MainActivity.java.

package com.example.loginscreen;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

   private EditText  username=null;
   private EditText  password=null;
   private TextView attempts;
   private Button login;
   int counter = 3;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      username = (EditText)findViewById(R.id.editText1);
      password = (EditText)findViewById(R.id.editText2);
      attempts = (TextView)findViewById(R.id.textView5);
      attempts.setText(Integer.toString(counter));
      login = (Button)findViewById(R.id.button1);
   }

   public void login(View view){
      if(username.getText().toString().equals("admin") && 
      password.getText().toString().equals("admin")){
      Toast.makeText(getApplicationContext(), "Redirecting...", 
      Toast.LENGTH_SHORT).show();
   }	
   else{
      Toast.makeText(getApplicationContext(), "Wrong Credentials",
      Toast.LENGTH_SHORT).show();
      attempts.setBackgroundColor(Color.RED);	
      counter--;
      attempts.setText(Integer.toString(counter));
      if(counter==0){
         login.setEnabled(false);
      }

   }

}
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }

}

Following is the modified content of the xml res/layout/activity_main.xml.

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

   <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="18dp"
      android:text="@string/hello_world"
      android:textAppearance="?android:attr/textAppearanceLarge" />

   <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_below="@+id/textView1"
      android:layout_marginTop="50dp"
      android:text="@string/username"
      android:textAppearance="?android:attr/textAppearanceMedium" />

   <EditText
      android:id="@+id/editText1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBottom="@+id/textView2"
      android:layout_marginLeft="32dp"
      android:layout_toRightOf="@+id/textView2"
      android:ems="10" >

      <requestFocus />
   </EditText>

   <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignLeft="@+id/textView2"
      android:layout_below="@+id/textView2"
      android:layout_marginTop="38dp"
      android:text="@string/password"
      android:textAppearance="?android:attr/textAppearanceMedium" />

   <EditText
      android:id="@+id/editText2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBottom="@+id/textView3"
      android:layout_alignLeft="@+id/editText1"
      android:ems="10"
      android:inputType="textPassword" />

   <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@+id/editText2"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="94dp"
      android:onClick="login"
      android:text="@string/Login" />

   <TextView
      android:id="@+id/textView4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignLeft="@+id/textView3"
      android:layout_below="@+id/textView3"
      android:layout_marginLeft="30dp"
      android:layout_marginTop="48dp"
      android:text="@string/attempts"
      android:textAppearance="?android:attr/textAppearanceMedium" />

   <TextView
      android:id="@+id/textView5"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignRight="@+id/textView1"
      android:layout_alignTop="@+id/textView4"
      android:text="TextView" />

</RelativeLayout>

Following is the content of the res/values/string.xml.

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

   <string name="app_name">LoginScreen</string>
   <string name="action_settings">Settings</string>
   <string name="hello_world">Login Screen</string>
   <string name="username">Username:</string>
   <string name="password">Password:</string>
   <string name="Login">Login:</string>
   <string name="attempts">Attempts Left:</string>

</resources>

Following is the content of AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.loginscreen"
   android:versionCode="1"
   android:versionName="1.0" >

   <uses-sdk
      android:minSdkVersion="8"
      android:targetSdkVersion="17" />

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      <activity
         android:name="com.example.loginscreen.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>
   </application>

</manifest>

Let's try to run our Login application we just modified. I assume you had created your AVD while doing environment setup. To run the app from Eclipse, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Eclipse installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window:

Android Login Application Tutorial

Type anything in the username and password field except admin, and then press the login button. I put admin in the username field and nimda in the password field. I got failed attempt. This is shown below:

Android Login Application Tutorial

Do this two more time, and you will see that you have 0 login attempts left and your login button is disabled.

Android Login Application Tutorial

Now open the application again, and this time enter correct username as admin and password as admin and click on login. You will be successfully login.

Android Login Application Tutorial

Advertisements
Advertisements