A Simple Login Application

In this post, I will create a simple Login application. This post will give you a brief idea about how to develop an application which handles user interactions.
User will enter login credentials and after validating the application will generate a message. The username and password will be validated against constant values "admin" and "admin".
Let's start with this:

As discussed in the first post, create one Application with the following details:

Now look at your eclipse window carefully.
You will notice different windows like Package Explorer, Pallet, Outline, Console, LogCat etc. These are very important things to notice while developing an android application
Take a look at Palette. There are few sections like Form Widgets, Text Fields, Layouts and more.
Each section contains different components which can be used to create user interfaces.

Going back to our application, you will notice "Hello world!" text on our app window (similar to the example in the first post). It is a TextView. It used to display a static text just like labels.
Delete the TextView.
There are two tabs: Graphical Layout and activity_login.xml.

Open activity_login.xml. You will find XML code which contains RelativeLayout.

There are different layouts available in android like Linear Layout, Table Layout, Grid Layout etc. which forms the base or the other components.

Now, again go back to Graphical Layout, go to Form Widgets and drag one TextView on to the UI.

Right click on the TextView which we have dragged on our UI, Select Edit Text...
You will be prompted with the following window:

Select New String...

Specify New R. string. and String as mentioned in the image. New R. string is similar to the name of the variable and String is its value.
Click OK. You will get a new String which will be used to display in our TextView.
Click OK on the Resource Chooser window.

Right click on the "Username" TextView. Select Edit ID... Give the desired name to the TextiVew. I have given the name as tv_Username.

Drag an Edit Text from the Palette's Text Fields section. If you see, there are different types of edit texts available. Drag the one which is highlighted in below image.

Similarly set the text (blank) and id properties.

Now add one more TextView and EditText. This time select the Password edit text instead of normal one form the Palette's Text Fields section.

Add Button from the Form widgets section. Set its ID and text properties.

Add one more TextView at the bottom to display the messages for login status.

activity_login.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=".LoginActivity" >

    <TextView
        android:id="@+id/tv_Username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="18dp"
        android:layout_marginTop="15dp"
        android:text="@string/username_text" />

    <EditText
        android:id="@+id/et_Username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/tv_Username"
        android:layout_alignBottom="@+id/tv_Username"
        android:layout_marginLeft="30dp"
        android:layout_toRightOf="@+id/tv_Username"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/tv_Password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/tv_Username"
        android:layout_below="@+id/et_Username"
        android:layout_marginTop="47dp"
        android:text="@string/password_text" />

    <EditText
        android:id="@+id/et_Password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/tv_Password"
        android:layout_alignBottom="@+id/tv_Password"
        android:layout_alignLeft="@+id/et_Username"
        android:ems="10"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/bt_SignIn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/et_Password"
        android:layout_below="@+id/et_Password"
        android:layout_marginTop="34dp"
        android:text="@string/signin_text" />

</RelativeLayout>

Go to Package explorer --> Expand the LoginApp --> src --> Package 'com.samples.loginapp' --> Open LoginActivity.java
Type the following code:

package com.samples.loginapp;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class LoginActivity extends Activity {
    // User name
    private EditText et_Username;
    // Password
    private EditText et_Password;
    // Sign In
    private Button bt_SignIn;
    // Message
    private TextView tv_Message;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
       
        // Initialization
        et_Username = (EditText) findViewById(R.id.et_Username);
        et_Password = (EditText) findViewById(R.id.et_Password);
        bt_SignIn = (Button) findViewById(R.id.bt_SignIn);
        tv_Message = (TextView) findViewById(R.id.tv_Message);
       
        bt_SignIn.setOnClickListener(new OnClickListener() {
           
            @Override
            public void onClick(View view) {
                // Stores User name
                String username = String.valueOf(et_Username.getText());
                // Stores Password
                String password = String.valueOf(et_Password.getText());
               
                // Validates the User name and Password for admin, admin
                if (username.equals("admin") && password.equals("admin")) {
                    tv_Message.setText("Login Successful!");
                } else {
                    tv_Message.setText("Login Unsuccessful!");
                }
            }
        });
    }

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

}



Now run the application.