Make login page android app using android studio with validation : Part 1

This tutorial in on how to make login page android app using android studio with validation.

Login Page project is an android app is implemented in android studio. You can download login page android app with source code.

How to import the project :
Create new project . You just need to copy the code then paste that code into your project.Create new project . You just need to copy the code then paste that code into your project.

Login Information : 
Username : sy@scp.com
Password : abc@123

LoginPage android app features :
  • Add all validation : like 
    • username & password incorrect.
    •  username & password blank error and more.
  • Clear focus
  • Reset Fields
Step 1:
Firstly import the package of android files.
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
Step 2 :
First we want to create a login page layout. Add 2 EditText  (one is for take username from user & second is use to take the password from the user.) , 2 Button (one is login button & second is reset button) and 1 TextView (show the error status).
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
tools:context="com.sharecodepoint.loginpage.MainActivity">

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email Address"
android:id="@+id/username"
android:layout_marginTop="20dp"
android:textSize="17dp"
android:inputType="textEmailAddress"
android:padding="10dp"/>

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:id="@+id/password"
android:textSize="17dp"
android:inputType="textPassword"
android:padding="10dp"
android:layout_below="@id/username"
android:layout_marginTop="20dp"/>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/login"
android:text="Login"
android:layout_below="@id/password"
android:layout_marginTop="20dp"
android:background="#009688"
android:textColor="#f5f5f5"
android:textSize="17dp"
android:onClick="dothis"
/>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/reset"
android:text="Reset"
android:layout_below="@id/login"
android:layout_marginTop="20dp"
android:background="#AD1457"
android:textColor="#f5f5f5"
android:textSize="17dp"
android:onClick="dorest"
/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/reset"
android:layout_marginTop="40dp"
android:id="@+id/showerror"
android:textSize="20dp"
android:padding="10dp"
android:textAlignment="center"
android:textColor="#f5f5f5"/>
</RelativeLayout>

Step 3 :
In this code you get :
1. How to clear focus from EditText.
2. How to change the background color of TextView with color string.
3. How to set Visibility of TextView (INVISIBLE & VISIBLE).
4. How to use if else in android.
5. How to compare the string value in android.
6. How to use not operator in android.
7. How to change the main activity title when login is successfully.

MainActivity.java
public class MainActivity extends AppCompatActivity {

EditText user, pass;
Button btn,rest;
TextView error;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

user = (EditText) findViewById(R.id.username);
pass = (EditText) findViewById(R.id.password);
btn = (Button) findViewById(R.id.login);
rest = (Button) findViewById(R.id.reset);
error = (TextView)findViewById(R.id.showerror);
error.setVisibility(View.INVISIBLE);
}

public void dothis(View v) {
String u = user.getText().toString();
String p = pass.getText().toString();
String check_email = "sy@scp.com";
String check_pass = "abc@123";

if (u.equals("")) {
error.setVisibility(View.VISIBLE);
error.setBackgroundColor(Color.parseColor("#D50000"));
error.setText("Please enter your email");

}
else if (p.equals("")) {
error.setVisibility(View.VISIBLE);
error.setBackgroundColor(Color.parseColor("#D50000"));
error.setText("Please enter your password");
pass.onEditorAction(EditorInfo.IME_ACTION_DONE);

}
else if (!u.equals(check_email) && !p.equals(check_pass)) {
error.setVisibility(View.VISIBLE);
error.setBackgroundColor(Color.parseColor("#D50000"));
error.setText("Invalid Email or Invalid Password");
user.onEditorAction(EditorInfo.IME_ACTION_DONE);
pass.onEditorAction(EditorInfo.IME_ACTION_DONE);
}
else if (!u.equals(check_email)) {
error.setVisibility(View.VISIBLE);
error.setText("Invalid Email");
error.setBackgroundColor(Color.parseColor("#D50000"));
}
else if (!p.equals(check_pass)) {
error.setVisibility(View.VISIBLE);
error.setBackgroundColor(Color.parseColor("#D50000"));
error.setText("Invalid Password");
pass.onEditorAction(EditorInfo.IME_ACTION_DONE);
}
else if (u.equals(check_email) && p.equals(check_pass)) {
error.setVisibility(View.VISIBLE);
error.setBackgroundColor(Color.parseColor("#D50000"));
error.setText("Login Successfully !!");
error.setBackgroundColor(Color.parseColor("#00C853"));
pass.onEditorAction(EditorInfo.IME_ACTION_DONE);
setTitle("Welcome: " + u);
}
}
public void dorest(View v){
user.setText("");
pass.setText("");
pass.clearFocus();
}
}

Output : 




That's it! Download apk files. Thanks for reading!

If you have any doubt regarding the creation of android app then leave your doubts in the comment box.

How to create simple notepad  in android: check out

 Animated Bouncing Balls Using HTML and CSS3