How to Create Material Design Signup Form in Android Studio

How to Create Material Design Signup Form in Android Studio & User Login and registration with username and password in Android studio. Create beautiful login screen – Android Studio Tutorial Android Apps | Login Screen. Simple Login App Tutorial Using Android Studio | UI Design. Android Studio Tutorial

How to Create Beautiful Android Login Form – Material Design signup form in Android Studio Tutorial – Firebase Authentication User Login with Email & Password.

Table of Contents

Drawable Folder Download – CLICK HERE

ADD DEPENDENCY IN BUILD.APP

implementation 'androidx.cardview:cardview:1.0.0'

gradle.app

apply plugin: 'com.android.application'

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.2"

    defaultConfig {
        applicationId "com.technic.signupform"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
    implementation 'androidx.cardview:cardview:1.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

}

ActivitySignUp.java

package com.technic.signupform;


import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class Activity_SignUp extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sign_up);
    }
}

YOUTUBE VIDEO

material design Signup forms layout xml file

activity_sign_up.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".Activity_SignUp">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="3dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginTop="20dp"
                    android:background="@drawable/circle"
                    android:padding="10dp"
                    android:src="@drawable/img_register"
                    app:tint="@color/white" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="10dp"
                    android:fontFamily="sans-serif-medium"
                    android:text="REGISTER"
                    android:textColor="@color/white"
                    android:textSize="22sp" />

            </LinearLayout>

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_below="@+id/linearLayout1"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="-10dp"
                android:rotation="45"
                android:src="@drawable/square" />

            <RelativeLayout
                android:id="@+id/relativeLayout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/imageView1"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginTop="30dp">

                <ImageView
                    android:id="@+id/imgView_userIcon"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@color/colorPrimary"
                    android:padding="8dp"
                    android:src="@drawable/img_user"
                    app:tint="@color/white" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/imgView_userIcon"
                    android:layout_alignParentTop="true"
                    android:layout_toRightOf="@+id/imgView_userIcon"
                    android:background="@color/editTextBG"
                    android:hint="Username"
                    android:paddingLeft="20dp"
                    android:textSize="15sp" />

            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/relativeLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/relativeLayout1"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginTop="15dp">

                <ImageView
                    android:id="@+id/imgView_passwordIcon"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@color/colorPrimary"
                    android:padding="8dp"
                    android:src="@drawable/img_authentication"
                    app:tint="@color/white" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/imgView_passwordIcon"
                    android:layout_alignParentTop="true"
                    android:layout_toRightOf="@+id/imgView_passwordIcon"
                    android:background="@color/editTextBG"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:paddingLeft="20dp"
                    android:textSize="15sp" />

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/relativeLayout3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/relativeLayout2"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginTop="15dp">

                <ImageView
                    android:id="@+id/imgView_repasswordIcon"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@color/colorPrimary"
                    android:padding="8dp"
                    android:src="@drawable/img_authentication"
                    app:tint="@color/white" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/imgView_repasswordIcon"
                    android:layout_alignParentTop="true"
                    android:layout_toRightOf="@+id/imgView_repasswordIcon"
                    android:background="@color/editTextBG"
                    android:hint="Re-type Password"
                    android:inputType="textPassword"
                    android:paddingLeft="20dp"
                    android:textSize="15sp" />

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/relativeLayout4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/relativeLayout3"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginTop="15dp">

                <ImageView
                    android:id="@+id/imgView_emailIcon"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@color/colorPrimary"
                    android:padding="8dp"
                    android:src="@drawable/img_email"
                    app:tint="@color/white" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/imgView_emailIcon"
                    android:layout_alignParentTop="true"
                    android:layout_toRightOf="@+id/imgView_emailIcon"
                    android:background="@color/editTextBG"
                    android:hint="Email"
                    android:paddingLeft="20dp"
                    android:textSize="15sp" />

            </RelativeLayout>

            <CheckBox
                android:id="@+id/chkBox1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/relativeLayout4"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginTop="15dp"
                android:fontFamily="sans-serif"
                android:text="I agree to the Terms of Service"
                android:textColor="@color/textColor" />

            <Button
                android:id="@+id/btn_signUp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/chkBox1"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginTop="15dp"
                android:background="@color/colorPrimary"
                android:fontFamily="sans-serif-medium"
                android:text="SIGN UP"
                android:textColor="@color/white" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/btn_signUp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="15dp"
                android:background="@color/transparent"
                android:fontFamily="sans-serif"
                android:text="Already a member? Login Here"
                android:textAllCaps="false"
                android:textColor="@color/textColor"
                android:textSize="13sp" />

        </RelativeLayout>


    </androidx.cardview.widget.CardView>

</RelativeLayout>