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.

Drawable Folder Download – CLICK HERE

<img fetchpriority=

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>

Material Design Signup Forms

Download Source Code

Click below to get the full source code android login Application Android Project application.

Drawable Folder Download – CLICK HERE

Get the full source code android sign up form App Android Project application.

<img decoding=

Cheers!

READ MORE ANDROID APPS

Wallpaper Android App- CLICK HERE

All IN ONE Status Saver App – CLICK HERE

Photo Video Maker Android App – CLICK HERE

Video Downloader Android App – CLICK HERE

College Student Portal System App – CLICK HERE

Call Recorder Android App – CLICK HERE

PDF App with firebase – CLICK HERE

BarChart Graph App – CLICK HERE

PDF Reader App with firebase – CLICK HERE

ShareIt Clone App – CLICK HERE

Modern Profile UI Design – CLICK HERE

This image has an empty alt attribute; its file name is like.png

Don’t Forget to Share this Post.

ShareTweetShare

READ MORE


Deepika

Hey, I'm Deepika, Experienced in Mobile app Development (Flutter, Android and iOS) and professional blogger. Technically sound Post graduated M.Tech in Computer Science and Engineering. I Love to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. Skilled in Flutter,( Dart ), Java, HTML, CSS, PHP, Python, SQL, C, C++,Firebase,MySQL,SQLite,JavaScript, Networking, Ethical Hacking.

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *