Android Login and Registration Screen Design

To allow only registered users to our android application, we need to implement login and registration screens to ask the users to register first, then login to the application to get an access for the content in an application.

 

Now we will see how to implement login and registration screens using material design in android application like as shown following.

 

Android Login and Registration Screens Design Sample Example

Android Login and Registration Screens Example

Following is the example of creating the login and registration screens in android application to allow only valid users based on our requirements.

 

Create a new android application using android studio and give names as LoginExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

 

Once we create an application, open activity_main.xml file from \res\layout folder path and write the code like as shown below.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:orientation="vertical" android:layout_width="match_parent"
   
android:layout_height="match_parent">
    <
TextView
       
android:id="@+id/loginscrn"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="80dp"
       
android:text="Login"
       
android:textSize="25dp"
       
android:textStyle="bold"
       
android:layout_gravity="center"/>
    <
TextView
        
android:id="@+id/fstTxt"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:layout_marginTop="20dp"
       
android:text="Email"/>
    <
EditText
       
android:id="@+id/txtEmail"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:ems="10"/>
    <
TextView
       
android:id="@+id/secTxt"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:text="Password"
       
android:layout_marginLeft="100dp" />
    <
EditText
       
android:id="@+id/txtPwd"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:inputType="textPassword"
       
android:ems="10" />
    <
Button
       
android:id="@+id/btnLogin"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:text="Login" />
    <
TextView android:id="@+id/lnkRegister"
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="40dp"
       
android:text="New to Tutlane? Register here"
       
android:gravity="center"
       
android:textSize="20dp"
       
android:textColor="#3F51B5"/>
</
LinearLayout>

Now we will create another layout resource file registration.xml in \res\layout path to allow new users to register in our application for that right click on your layout folder à Go to New à select Layout Resource File and give name as registration.xml.

 

Once we create a new layout resource file registration.xml, open it and write the code like as shown below

registration.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:orientation="vertical" android:layout_width="match_parent"
   
android:layout_height="match_parent">
    <
TextView
       
android:id="@+id/loginscrn"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="80dp"
       
android:text="Registration"
        
android:textSize="25dp"
       
android:textStyle="bold"
       
android:layout_gravity="center"/>
    <
TextView
       
android:id="@+id/fstTxt"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:layout_marginTop="20dp"
       
android:text="Full Name"/>
    <
EditText
       
android:id="@+id/txtName"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:ems="10"/>
    <
TextView
       
android:id="@+id/secTxt"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:text="Email"
       
android:layout_marginLeft="100dp" />
    <
EditText
       
android:id="@+id/txtEmail"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:ems="10" />
    <
TextView
       
android:id="@+id/thirdTxt"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:text="Password"
       
android:layout_marginLeft="100dp" />
    <
EditText
       
android:id="@+id/txtPwd"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:inputType="textPassword"
       
android:ems="10" />
    <
Button
       
android:id="@+id/btnLogin"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="100dp"
       
android:text="Login" />
    <
TextView android:id="@+id/lnkLogin"
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="40dp"
       
android:text="Already Registered? Login here"
       
android:gravity="center"
       
android:textSize="20dp"
       
android:textColor="#3F51B5"
       
android:onClick="test"/>
</
LinearLayout>

Now open your main activity file MainActivity.java from \java\com.tutlane.loginexample path and write the code like as shown below

MainActivity.java

package com.tutlane.loginexample;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.method.LinkMovementMethod;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
        TextView register = (TextView)findViewById(R.id.
lnkRegister);
        register.setMovementMethod(LinkMovementMethod.getInstance());
        register.setOnClickListener(
new View.OnClickListener() {
           
@Override
           
public void onClick(View v) {
                Intent intent =
new Intent(MainActivity.this, RegistrationActivity.class);
                startActivity(intent);
            }
        });
    }
}

If you observe the above code, whenever the user click on register link, we are redirecting the user from login screen to registration screen using “RegistrationActivity” for that create another activity file RegistrationActivity.java in \java\com.tutlane.loginexample path. 

 

Now right click on your application folder à Go to New à select Java Class and give name as RegistrationActivity.java.

 

Once we create a new activity file RegistrationActivity.java, open it and write the code like as shown below

RegistrationActivity.java

package com.tutlane.loginexample;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.method.LinkMovementMethod;
import android.view.View;
import android.widget.TextView;

/**
 * Created by tutlane on 08-01-2018.
 */

public class RegistrationActivity extends AppCompatActivity {
   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
registration);
        TextView login = (TextView)findViewById(R.id.
lnkLogin);
        login.setMovementMethod(LinkMovementMethod.getInstance());
        login.setOnClickListener(
new View.OnClickListener() {
           
@Override
           
public void onClick(View v) {
                Intent intent =
new Intent(RegistrationActivity.this, MainActivity.class);
                startActivity(intent);
            }
        });
    }
}

Now we need to add this newly created activity in AndroidManifest.xml file in like as shown below.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   
package="com.tutlane.loginexample">
    <
application
       
android:allowBackup="true"
       
android:icon="@mipmap/ic_launcher"
       
android:label="@string/app_name"
       
android:roundIcon="@mipmap/ic_launcher_round"
       
android:supportsRtl="true"
       
android:theme="@style/AppTheme">
        <
activity android:name=".MainActivity">
            <
intent-filter>
                <
action android:name="android.intent.action.MAIN" />
                <
category android:name="android.intent.category.LAUNCHER" />
            </
intent-filter>
        </
activity>
        <
activity android:name=".RegistrationActivity" android:label="Registration"> </activity>
    </
application>
</
manifest>

If you observe above example, we created login and registration screens and added all the activities in AndroidManifest.xml file.

Output of Android Login & Registration Screens Example

When we run the above example in the android emulator we will get a result like as shown below.

 

Android Login and Registration Screen Design Example Result

 

If you observe above result, initially we are getting a login screen and redirecting the user to the registration screen whenever the user clicks Register Here link.

 

This is how we can create login and registration screens using material design in android applications to allow valid users based on our requirements.