It’s a common requirement in almost every App to provide Login & signup functionality to users. In this article, we are developing a SignUp Activity in Android Studio in both Kotlin & Java. We will design a signup form based on Google Material Design components. In our Activity code, we will also perform validation for the user inputs. At the end of this tutorial, the following screen will be designed.
1. Import Material Design Library In Android Studio
To import Google Material Design Library in your project, first, make sure you have added the following google repository in your project level build.gradle file.
repositories {
google()
}Then add the following dependency in your App level build.gradle file.
implementation 'com.google.android.material:material:1.1.0'2. Create SignupActivity in Your Project
Now create a new Empty Activity with name SignupActivity in your Android Studio. For beginners, I have added the following screenshot. You can create new Activity by right-clicking on your app top folder in Project panel and then navigate to the following menu.
New -> Activity -> Empty Activity
3. SignUp Activity XML Code
Copy & Paste the following code in your newly created Activity’s XML file.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#FFFFFF"
tools:context=".SignupActivity">
<TextView
android:id="@+id/tv_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Create an Account"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="24dp"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tv_heading"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layout_first_name"
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.7"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"
android:textColorHint="#808080"
app:layout_constraintTop_toTopOf="parent"
>
<EditText
android:id="@+id/et_first_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="First Name"
android:gravity="center"
android:padding="10dp"
android:textColor="#000000"
android:textColorHint="#808080"
android:backgroundTint="#808080"
android:textSize="15sp"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layout_last_name"
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.7"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"
android:textColorHint="#808080"
app:layout_constraintTop_toBottomOf="@+id/layout_first_name"
>
<EditText
android:id="@+id/et_last_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Last Name"
android:gravity="center"
android:padding="10dp"
android:textColor="#000000"
android:textColorHint="#808080"
android:backgroundTint="#808080"
android:textSize="15sp"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layout_email"
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.7"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"
android:textColorHint="#808080"
app:layout_constraintTop_toBottomOf="@+id/layout_last_name"
>
<EditText
android:id="@+id/et_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:gravity="center"
android:padding="10dp"
android:textColor="#000000"
android:textColorHint="#808080"
android:backgroundTint="#808080"
android:textSize="15sp"
android:inputType="textEmailAddress"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layout_password"
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.7"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"
android:textColorHint="#808080"
app:layout_constraintTop_toBottomOf="@+id/layout_email"
>
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:gravity="center"
android:padding="10dp"
android:textColor="#000000"
android:textColorHint="#808080"
android:backgroundTint="#808080"
android:textSize="15sp"
android:inputType="textPassword"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layout_repeat_password"
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.7"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"
android:textColorHint="#808080"
app:layout_constraintTop_toBottomOf="@+id/layout_password"
>
<EditText
android:id="@+id/et_repeat_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Repeat Password"
android:gravity="center"
android:padding="10dp"
android:textColor="#000000"
android:textColorHint="#808080"
android:backgroundTint="#808080"
android:textSize="15sp"
android:inputType="textPassword"
/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/bt_register"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="@+id/layout_repeat_password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="15sp"
android:background="@color/colorPrimary"
android:textAllCaps="false"
android:layout_marginTop="30dp"
app:layout_constraintWidth_percent="0.7"
style="?android:attr/borderlessButtonStyle"
android:elevation="2dp"
android:onClick="performSignUp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>4. SignUp Activity Kotlin Code (For Kotlin Project)
If you are developing your project in Kotlin add the following code in your SignupActivity.kt file, otherwise scroll down for Java code.
package com.handyopinion
import android.os.Bundle
import android.util.Patterns
import android.view.View
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class SignupActivity : AppCompatActivity() {
lateinit var etFirstName: EditText
lateinit var etLastName:EditText
lateinit var etEmail: EditText
lateinit var etPassword:EditText
lateinit var etRepeatPassword:EditText
val MIN_PASSWORD_LENGTH = 6;
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_signup)
viewInitializations()
}
fun viewInitializations() {
etFirstName = findViewById(R.id.et_first_name)
etLastName = findViewById(R.id.et_last_name)
etEmail = findViewById(R.id.et_email)
etPassword = findViewById(R.id.et_password)
etRepeatPassword = findViewById(R.id.et_repeat_password)
// To show back button in actionbar
supportActionBar?.setDisplayHomeAsUpEnabled(true)
}
// Checking if the input in form is valid
fun validateInput(): Boolean {
if (etFirstName.text.toString().equals("")) {
etFirstName.setError("Please Enter First Name")
return false
}
if (etLastName.text.toString().equals("")) {
etLastName.setError("Please Enter Last Name")
return false
}
if (etEmail.text.toString().equals("")) {
etEmail.setError("Please Enter Email")
return false
}
if (etPassword.text.toString().equals("")) {
etPassword.setError("Please Enter Password")
return false
}
if (etRepeatPassword.text.toString().equals("")) {
etRepeatPassword.setError("Please Enter Repeat Password")
return false
}
// checking the proper email format
if (!isEmailValid(etEmail.text.toString())) {
etEmail.setError("Please Enter Valid Email")
return false
}
// checking minimum password Length
if (etPassword.text.length < MIN_PASSWORD_LENGTH) {
etPassword.setError("Password Length must be more than " + MIN_PASSWORD_LENGTH + "characters")
return false
}
// Checking if repeat password is same
if (!etPassword.text.toString().equals(etRepeatPassword.text.toString())) {
etRepeatPassword.setError("Password does not match")
return false
}
return true
}
fun isEmailValid(email: String): Boolean {
return Patterns.EMAIL_ADDRESS.matcher(email).matches()
}
// Hook Click Event
fun performSignUp (view: View) {
if (validateInput()) {
// Input is valid, here send data to your server
val firstName = etFirstName.text.toString()
val lastName = etLastName.text.toString()
val email = etEmail.text.toString()
val password = etPassword.text.toString()
val repeatPassword = etRepeatPassword.text.toString()
Toast.makeText(this,"Login Success",Toast.LENGTH_SHORT).show()
// Here you can call you API
}
}
}5. SignUp Activity Java Code (For Java Project)
If you are developing your Project in Java, then add the following code in your SignupActivity.java file.
package com.handyopinion;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Patterns;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
public class SignupActivity extends AppCompatActivity {
EditText etFirstName, etLastName, etEmail, etPassword, etRepeatPassword;
final int MIN_PASSWORD_LENGTH = 6;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_signup);
viewInitializations();
}
void viewInitializations() {
etFirstName = findViewById(R.id.et_first_name);
etLastName = findViewById(R.id.et_last_name);
etEmail = findViewById(R.id.et_email);
etPassword = findViewById(R.id.et_password);
etRepeatPassword = findViewById(R.id.et_repeat_password);
// To show back button in actionbar
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
// Checking if the input in form is valid
boolean validateInput() {
if (etFirstName.getText().toString().equals("")) {
etFirstName.setError("Please Enter First Name");
return false;
}
if (etLastName.getText().toString().equals("")) {
etLastName.setError("Please Enter Last Name");
return false;
}
if (etEmail.getText().toString().equals("")) {
etEmail.setError("Please Enter Email");
return false;
}
if (etPassword.getText().toString().equals("")) {
etPassword.setError("Please Enter Password");
return false;
}
if (etRepeatPassword.getText().toString().equals("")) {
etRepeatPassword.setError("Please Enter Repeat Password");
return false;
}
// checking the proper email format
if (!isEmailValid(etEmail.getText().toString())) {
etEmail.setError("Please Enter Valid Email");
return false;
}
// checking minimum password Length
if (etPassword.getText().length() < MIN_PASSWORD_LENGTH) {
etPassword.setError("Password Length must be more than " + MIN_PASSWORD_LENGTH + "characters");
return false;
}
// Checking if repeat password is same
if (!etPassword.getText().toString().equals(etRepeatPassword.getText().toString())) {
etRepeatPassword.setError("Password does not match");
return false;
}
return true;
}
boolean isEmailValid(String email) {
return Patterns.EMAIL_ADDRESS.matcher(email).matches();
}
// Hook Click Event
public void performSignUp (View v) {
if (validateInput()) {
// Input is valid, here send data to your server
String firstName = etFirstName.getText().toString();
String lastName = etLastName.getText().toString();
String email = etEmail.getText().toString();
String password = etPassword.getText().toString();
String repeatPassword = etRepeatPassword.getText().toString();
Toast.makeText(this,"Login Success",Toast.LENGTH_SHORT).show();
// Here you can call you API
}
}
}Now you can run this project and it should work. This code is Android side code related to the User Interface. We are not calling any API on server to post data. But you can do that at the end of the file where mentioned in the comment as per your requirements.
That’s it. This is how to develop a SignUp Activity in Android Studio.
If you have any questions or suggestions, feel free to ask in the comments section below.
Next:
1. Login Activity in Android Studio
2. Ask Runtime Permission in Kotlin Android
Please share this post:
