Android Login and Signup Screen Design

A login activity is the screen which asks for your credentials to login into application. This article explains, how to create a Login screen and Sign up screen.

Output Screenshots :

Signup

Signup Output Screen
Login
Login Output Screen

In this article we are creating a Login and Signup screen and switching between them.


1) Create a new project by going to File ⇒ New Android Project. Fill all the details and name your activity as LoginActivity.


2) Create a new activity class in your project src directory and name it as SignupActivity.java ( Right Click on src/package ⇒ New ⇒ Class)


3) Now create a layout for login screen. Under res/layouts create a new xml file and name it as login.xml ( Right Click on res/layout ⇒ New ⇒ Android XML File)


4) In login.xml type following code : -


<?xml version="1.0" encoding="utf-8"?> 
 <LinearLayout 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:orientation="horizontal"  
    android:fitsSystemWindows="true"  
    tools:context="com.example.singham.loginapp.LoginActivity"> 
    
    <LinearLayout  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:background="@color/colorPrimary"  
        android:gravity="center"  
        android:orientation="vertical"  
        android:padding="@dimen/activity_horizontal_margin"> 

         <ImageView  
            android:layout_width="@dimen/logo_w_h"  
            android:layout_height="@dimen/logo_w_h"  
            android:layout_gravity="center_horizontal"  
            android:layout_marginBottom="30dp"  
            android:src="@mipmap/ic_launcher" /> 
              
 <LinearLayout  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"> 

             <EditText  
                android:id="@+id/email"  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:layout_marginBottom="10dp"  
                android:hint="@string/hint_email"  
                android:inputType="textEmailAddress"  
                android:textColor="@android:color/white"  
                android:textColorHint="@android:color/white" /> 
                  
</LinearLayout> 
  
 <LinearLayout    
         android:layout_width="match_parent"  
            android:layout_height="wrap_content"> 

            <EditText  
                android:id="@+id/password"  
                android:layout_width="fill_parent"  
                android:layout_height="wrap_content"  
                android:layout_marginBottom="10dp"  
                android:hint="@string/hint_password"  
                android:inputType="textPassword"  
                android:textColor="@android:color/white"  
                android:textColorHint="@android:color/white" /> 
                 
      </LinearLayout> 

        <!-- Login Button -->

        <Button  
            android:id="@+id/btn_login"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:layout_marginTop="20dip"  
            android:background="@color/colorAccent"  
            android:text="@string/btn_login"  
            android:textColor="@android:color/black" /> 

         <Button  
            android:id="@+id/btn_reset_password"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:layout_marginTop="20dip"  
            android:background="@null"  
            android:text="@string/btn_forgot_password"  
            android:textAllCaps="false"  
            android:textColor="@color/colorAccent" /> 

        <!-- Link to Login Screen -->

         <Button  
            android:id="@+id/btn_signup"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:layout_marginTop="20dip"  
            android:background="@null"  
            android:text="@string/btn_link_to_register"  
            android:textAllCaps="false"  
            android:textColor="@color/white"  
            android:textSize="15dp" /> 
              
    <LinearLayout> 

     <ProgressBar  
        android:id="@+id/progressBar" 
        android:layout_width="30dp"  
        android:layout_height="30dp"  
        android:layout_gravity="center|bottom"  
        android:layout_marginBottom="20dp"  
        android:visibility="gone" /> 
         
 <LinearLayout> 



5) Now create a layout for signup screen. Under res/layouts create a new xml file and name it as signup.xml ( Right Click on res/layout ⇒ New ⇒ Android XML File)


6) In signup.xml type following code : -


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout    
    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:fitsSystemWindows="true" 
    android:orientation="horizontal" 
    tools:context="com.example.singham.loginapp.SignupActivity">  

<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:background="@color/colorPrimaryDark" 
android:gravity="center" 
android:orientation="vertical" 
android:padding="@dimen/activity_horizontal_margin"> 

<ImageView 
    android:layout_width="@dimen/logo_w_h" 
    android:layout_height="@dimen/logo_w_h" 
    android:layout_gravity="center_horizontal" 
    android:layout_marginBottom="30dp" 
    android:src="@mipmap/ic_launcher" />  

<LinearLayout    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 
    
    <EditText 
        android:id="@+id/email" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:hint="@string/email" 
        android:inputType="textEmailAddress" 
        android:maxLines="1" 
        android:singleLine="true" 
        android:textColor="@android:color/white" /> 

</LinearLayout>

<LinearLayout   
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <EditText 
        android:id="@+id/password" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:focusableInTouchMode="true" 
        android:hint="@string/hint_password" 
        android:imeActionId="@+id/login" 
        android:imeOptions="actionUnspecified" 
        android:inputType="textPassword" 
        android:maxLines="1" 
        android:singleLine="true" 
        android:textColor="@android:color/white" /> 

</LinearLayout> 
    <Button 
    android:id="@+id/sign_up_button" 
    style="?android:textAppearanceSmall" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="16dp" 
    android:background="@color/colorAccent" 
    android:text="@string/action_sign_in_short" 
    android:textColor="@android:color/black" 
    android:textStyle="bold" /> 

<Button 
    android:id="@+id/btn_reset_password" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="20dip" 
    android:background="@null" 
    android:text="@string/btn_forgot_password" 
    android:textAllCaps="false" 
    android:textColor="@color/colorAccent" /> 

<!-- Link to Login Screen -->

<Button 
    android:id="@+id/sign_in_button" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="20dip" 
    android:background="@null" 
    android:text="@string/btn_link_to_login" 
    android:textAllCaps="false" 
    android:textColor="@color/white" 
    android:textSize="15dp" /> 
</LinearLayout> 

<ProgressBar 
android:id="@+id/progressBar" 
android:layout_width="30dp" 
android:layout_height="30dp" 
android:layout_gravity="center|bottom" 
android:layout_marginBottom="20dp" 
android:visibility="gone" /> 


</LinearLayout


7) Now create a layout for reset screen. Under res/layouts create a new xml file and name it as activity_reset.xml ( Right Click on res/layout ⇒ New ⇒ Android XML File)


8) In activity_reset.xml type following code : -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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:layout_gravity="center" 
    android:background="@color/colorPrimary" 
    android:fitsSystemWindows="true" 
    android:orientation="horizontal" 
    tools:context="com.example.singham.loginapp.ResetPasswordActivity"> 

    <LinearLayout 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="30dp" 
        android:gravity="center" 
        android:orientation="vertical" 
        android:padding="@dimen/activity_horizontal_margin"> 


        <ImageView 
            android:layout_width="@dimen/logo_w_h" 
            android:layout_height="@dimen/logo_w_h" 
            android:layout_gravity="center_horizontal" 
            android:layout_marginBottom="10dp" 
            android:src="@mipmap/ic_launcher" /> 

        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_gravity="center_horizontal" 
            android:padding="10dp" 
            android:text="@string/lbl_forgot_password" 
            android:textColor="@android:color/white" 
            android:textSize="20dp" /> 

        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_marginBottom="10dp" 
            android:gravity="center_horizontal" 
            android:padding="@dimen/activity_horizontal_margin" 
            android:text="@string/forgot_password_msg" 
            android:textColor="@android:color/white" 
            android:textSize="14dp" /> 

        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content">  

            <EditText 
                android:id="@+id/email" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                android:layout_marginBottom="10dp" 
                android:layout_marginTop="20dp" 
                android:hint="@string/hint_email" 
                android:inputType="textEmailAddress" 
                android:textColor="@android:color/white" 
                android:textColorHint="@android:color/white" /> 
        </LinearLayout>  

        <!-- Login Button -->

        <Button 
            android:id="@+id/btn_reset_password" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"  
            android:layout_marginTop="20dip" 
            android:background="@color/colorAccent" 
            android:text="@string/btn_reset_password" 
            android:textColor="@android:color/black" />  

        <Button 
            android:id="@+id/btn_back" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="10dp" 
            android:background="@null" 
            android:text="@string/btn_back" 
            android:textColor="@color/colorAccent" /> 

    </LinearLayout> 

    <ProgressBar 
        android:id="@+id/progressBar" 
        android:layout_width="30dp" 
        android:layout_height="30dp" 
        android:layout_gravity="center|bottom" 
        android:layout_marginBottom="20dp" 
        android:visibility="gone" /> 
</LinearLayout>


9) Now Front-end design are ready.Open your LoginActivity.java and delete the existing code,except the name of your package.


10) Copy this code to your LoginActivity.java file :


package com.example.singham.loginapp;

/**
 * Created by Singham on 2/23/2017.
 */

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;

public class LoginActivity extends AppCompatActivity {

    private EditText inputEmail, inputPassword;
    private FirebaseAuth auth;
    private ProgressBar progressBar;
    private Button btnSignup,
            btnLogin, btnReset;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // set the view now
        setContentView(R.layout.login);
       // Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
       // setSupportActionBar(toolbar);

        inputEmail = (EditText) findViewById(R.id.email);
        inputPassword = (EditText) findViewById(R.id.password);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        btnSignup = (Button) findViewById(R.id.btn_signup);
        btnLogin = (Button) findViewById(R.id.btn_login);
        btnReset = (Button) findViewById(R.id.btn_reset_password);

        btnSignup.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(LoginActivity.this, SignupActivity.class));
            }
        });

        btnReset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(LoginActivity.this, ResetPasswordActivity.class));
            }
        });

        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String email = inputEmail.getText().toString();
                final String password = inputPassword.getText().toString();

                if (TextUtils.isEmpty(email)) {
                    Toast.makeText(getApplicationContext(), "Enter email address!", Toast.LENGTH_SHORT).show();
                    return;
                }

                if (TextUtils.isEmpty(password)) {
                    Toast.makeText(getApplicationContext(), "Enter password!", Toast.LENGTH_SHORT).show();
                    return;
                }

                progressBar.setVisibility(View.VISIBLE);

<!--
                //authenticate user
                 -->
            }
        });
    }
} 


11) Open SignupActivity.java and modify your code.


 package com.example.singham.loginapp;

/**
 * Created by Singham on 2/23/2017.
 */

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;

public class SignupActivity extends AppCompatActivity {

    private EditText inputEmail, inputPassword;
    private Button btnSignIn, btnSignUp, btnResetPassword;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.signup);
        btnSignIn = (Button) findViewById(R.id.sign_in_button);
        btnSignUp = (Button) findViewById(R.id.sign_up_button);
        inputEmail = (EditText) findViewById(R.id.email);
        inputPassword = (EditText) findViewById(R.id.password);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        btnResetPassword = (Button) findViewById(R.id.btn_reset_password);

        btnResetPassword.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(SignupActivity.this, ResetPasswordActivity.class));
            }
        });

        btnSignIn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        btnSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String email = inputEmail.getText().toString().trim();
                String password = inputPassword.getText().toString().trim();

                if (TextUtils.isEmpty(email)) {
                    Toast.makeText(getApplicationContext(), "Enter email address!", Toast.LENGTH_SHORT).show();
                    return;
                }

                if (TextUtils.isEmpty(password)) {
                    Toast.makeText(getApplicationContext(), "Enter password!", Toast.LENGTH_SHORT).show();
                    return;
                }

                if (password.length() < 6) {
                    Toast.makeText(getApplicationContext(), "Password too short, enter minimum 6 characters!", Toast.LENGTH_SHORT).show();
                    return;
                }

                progressBar.setVisibility(View.VISIBLE);
         <!--       //create user -->

            }
        });
    }

    @Override
    protected void onResume() {
        super.onResume();
        progressBar.setVisibility(View.GONE);
    }
}


12) Create a new activity class in your project src directory and name it as ResetPasswordActivity.java ( Right Click on src/package ⇒ New ⇒ Class)


package com.example.singham.loginapp;

/**
 * Created by Singham on 2/23/2017.
 */

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;

public class ResetPasswordActivity extends AppCompatActivity {

    private EditText inputEmail;
    private Button btnReset, btnBack;

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

        inputEmail = (EditText) findViewById(R.id.email);
        btnReset = (Button) findViewById(R.id.btn_reset_password);
        btnBack = (Button) findViewById(R.id.btn_back);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);


        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        btnReset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String email = inputEmail.getText().toString().trim();

                if (TextUtils.isEmpty(email)) {
                    Toast.makeText(getApplication(), "Enter your registered email id", Toast.LENGTH_SHORT).show();
                    return;
                }

                progressBar.setVisibility(View.VISIBLE);
                <!-- Reset function-->
            }
        });
    }
}


13) Adding Activity entry in AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.singham.loginapp">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".ResetPasswordActivity"/>
        <activity android:name=".SignupActivity"/>
    </application>

</manifest>

Now Click on Run to run the app. Enjoy..!!