Creating a Login & Register Page using Android Studio
5 min readFeb 9, 2020
Most applications today have an authorization system in forms of Facebook login, Google login, plain old email login, and more. This shows us that Login Page and the Register Page have become an integral part of the mobile applications these days. In this article, we will be learning about creating a Login Page and a Register Page using Android Studio.
- Create a new project by clicking “Start a new Android Studio project”. Fill in the application name column with “LoginApp”, then click next.
2. Select the minimum SDK you need or want, then click next.
3. Select “Empty Activity” and click next.
4. After that, the “Activity Name” and “Layout Name” columns will appear, in this section just leave it like that, then click finish.
After you click finish, Android Studio will make you an Application with the name “LoginApp”.
Frontend:
The frontend part of both the Login and the Register Page will be created using XML.So first we go on with creating the Login Page.
Login Page:
For creating the Login Page go to res/layout then right-click on layout and then New/Activity/Empty Activity.
- The first step is to change the layout to a linear layout. This is done as follows:
<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="vertical"
android:padding="30dp"
tools:context=".LoginForm">2. Download the required png file which has to be used as an image and copy the image in res/drawable. Save the file and use the following code:
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/download"
android:padding="30dp"
/>3. Now we have to create a text field to take the Email-Id as input:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="5dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="@font/roboto_bold"
android:hint="Email"
android:inputType="text"
android:textSize="26dp" />
</com.google.android.material.textfield.TextInputLayout>4. Similarly, we create another text field to take the password as the input as follows:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="10dp"
app:passwordToggleEnabled="true"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="@font/roboto_bold"
android:hint="Password"
android:inputType="textPassword"
android:textSize="26dp" />
</com.google.android.material.textfield.TextInputLayout>5. After creating the fields for the inputs we go for creating the buttons. There are three buttons being used in the login page which are:
a) Forgot Password:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="10dp"
app:passwordToggleEnabled="true"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="@font/roboto_bold"
android:hint="Password"
android:inputType="textPassword"
android:textSize="26dp" />
</com.google.android.material.textfield.TextInputLayout>b) Login:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="10dp"
app:passwordToggleEnabled="true"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="@font/roboto_bold"
android:hint="Password"
android:inputType="textPassword"
android:textSize="26dp" />
</com.google.android.material.textfield.TextInputLayout>c) Register:
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Register" android:textSize="22sp" android:textColor="#ffff" android:layout_marginTop="10dp" android:background="@drawable/button_rounded" android:onClick="btn_Signup_form" />
The given image shows the user interface of the Login Page:
Now we are completed with the Login Page and we move forward with creating the UI of the Signup Page.
Signup Page:
For creating the signup page go to res/layout then right-click on layout and then New/Activity/Empty Activity.
- The first step is to change the layout to a linear layout:
<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:background="@color/background"
android:orientation="vertical"
android:padding="30dp"
tools:context=".Signup_form">2. The text fields to take the inputs are created as follows:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="5dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Full Name"
android:ems="10"
android:inputType="text"
android:textSize="26dp"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="5dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="User Name"
android:ems="10"
android:inputType="text"
android:textSize="26dp"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="5dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:ems="10"
android:inputType="text"
android:textSize="26dp"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="5dp"
app:passwordToggleEnabled="true"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:ems="10"
android:inputType="textPassword"
android:textSize="26dp"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="5dp"
app:passwordToggleEnabled="true"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Confirm Passoword"
android:ems="10"
android:inputType="textPassword"
android:textSize="26dp"
/>
</com.google.android.material.textfield.TextInputLayout>3. The next step is to create the radio buttons to take the gender as the input:
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender: "
android:textSize="20sp"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male"
android:textSize="20sp"
android:layout_marginLeft="10dp"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10sp"
android:text="Female"
android:textSize="20sp"
/>
</RadioGroup>4. The final step is to create the register button and the design is completed.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Register"
android:textSize="22sp"
android:textColor="#ffff"
android:layout_marginTop="40dp"
android:background="@drawable/button_rounded"
/>The Signup Page looks like this:
Backend:
The backend of the Login Page and the Signup Page is created using Java. Here’s the complete code:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.login">
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@drawable/ic_launcher"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".Signup_form"></activity>
<activity android:name=".MainActivity" />
<activity android:name=".LoginForm">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<meta-data
android:name="preloaded_fonts"
android:resource="@array/preloaded_fonts" />
</application></manifest>
package com.example.login;import androidx.appcompat.app.AppCompatActivity;import android.content.Intent;import android.os.Bundle;import android.view.View;public class LoginForm extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login_form); getSupportActionBar().setTitle("Login"); } public void btn_Signup_form(View view) { startActivity(new Intent(getApplicationContext(),Signup_form.class)); }}
package com.example.login;import androidx.appcompat.app.AppCompatActivity;import android.content.Intent;import android.os.Bundle;import android.view.View;public class LoginForm extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login_form); getSupportActionBar().setTitle("Login"); } public void btn_Signup_form(View view) { startActivity(new Intent(getApplicationContext(),Signup_form.class)); }}
Hence the login and the register page is created using android studio.
