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 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 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 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 above example in android emulator we will get a result like as shown below.

If you observe above result, initially we are getting login screen and redirecting the user to registration screen whenever the user click 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.