SignUp Page Using Material Design In Android

Introduction

In this article, we are going to learn how to create a signup page on android. We are going to use material design to create a beautiful signup page.

Let's start with Implementation.

Implementation

Step 1

Create a new project in android studio and select the empty activity.

SignUp Page Using Material Design In Android

Step 2

We need to check whether material design dependency is present in our build. gradle(Module) or not. If it is not added please added the below dependency.

implementation 'com.google.android.material:material:1.6.1'

Step 3

Create a new drawable resource file inside the drawable folder named bg_overlay_registration.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="315"
        android:startColor="#004e92" />
</shape>

This resource file is used for the background color of the whole screen.

Step 4

Create a new drawable resource file inside the drawable folder named bg_edittext.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#302b63" />
    <stroke
        android:width="1dp"
        android:color="#ffffff" />
    <corners android:radius="30dp" />
</shape>

This resource file is used to set the background color of each edittext.

Step 5

Create a new drawable resource file inside the drawable folder named cursor_color.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="1.5dp" />
    <solid android:color="@android:color/white" />
</shape>

This resource file is used to make the cursor color white.

Step 6

Import a back arrow icon from vector asset in android studio and set its id named ic_arrow and set its color as white.

Step 7

Go to activity_main.xml and add the following code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="@drawable/bg_overlay_registration"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/backbtn"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/ic_arrow" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="SIGN UP"
            android:textColor="@color/white"
            android:textSize="24dp"
            android:textStyle="bold" />

        <View
            android:layout_width="30dp"
            android:layout_height="1dp"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            android:background="#ffffff" />

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/firstname"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:background="@drawable/bg_edittext"
            android:hint="First Name"
            android:inputType="textPersonName"
            android:paddingLeft="10dp"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textCursorDrawable="@drawable/cursor_color" />

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/lastname"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/bg_edittext"
            android:hint="Last Name"
            android:inputType="textPersonName"
            android:paddingLeft="10dp"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textCursorDrawable="@drawable/cursor_color" />

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/email"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/bg_edittext"
            android:hint="Email(optional)"
            android:inputType="textEmailAddress"
            android:lines="1"
            android:maxLines="1"
            android:paddingLeft="10dp"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textCursorDrawable="@drawable/cursor_color" />

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/phone"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/bg_edittext"
            android:hint="Phone Number"
            android:inputType="number"
            android:paddingLeft="10dp"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textCursorDrawable="@drawable/cursor_color" />

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/password"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/bg_edittext"
            android:hint="Password"
            android:inputType="textPassword"
            android:lines="1"
            android:maxLines="1"
            android:paddingLeft="10dp"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textCursorDrawable="@drawable/cursor_color" />

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/confirmpassword"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/bg_edittext"
            android:hint="Confirm Password"
            android:inputType="textPassword"
            android:lines="1"
            android:maxLines="1"
            android:paddingLeft="10dp"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textCursorDrawable="@drawable/cursor_color" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signup"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:backgroundTint="@color/white"
            android:fontFamily="sans-serif-medium"
            android:text="SIGN UP"
            android:textColor="@color/black"
            android:textSize="16dp"
            app:cornerRadius="20dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="have an account?"
                android:textColor="#302b63"
                android:textSize="20dp" />

            <TextView
                android:id="@+id/logintxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:padding="3dp"
                android:text="Sign In"
                android:textColor="@color/white"
                android:textSize="20dp" />

        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Output

SignUp Page Using Material Design In Android

Conclusion

In this article, we have seen how to create a beautiful signup page using material design in android. Thanks for reading and hope you like it. If you have any suggestions or queries on this article, please share your thoughts. you can read my other articles by clicking here.

Happy learning, friends!