Create Beautiful Material Design Sign Up / Registration and Login Screen Using this XML Design Template In Android Studio Example

This article will show you how we can create beautiful material designs Sign Up and Login XML Screen In the android studio. I also provided the complete project download link at the end of this article.

Create Beautiful Material Design Sign Up / Registration  and Login Screen Using this XML Design Template In Android Studio Example

Overview

In this article, we learn how to design beautiful material design sign up and login screen in android studio. Before I move to our topic let me tell you the one thing I am not a native English speaker so may you will see some mistakes in my English grammar but I will do my best to explain each and everything in very detail so let's start. 

Special Offer For A  Limited Time ????

As an Android  Developer, everyone wants to make a unique eye-catching designs but making an eye-caching material design screen required too much time and effort but to make the designing part easy for all of you  I am going to provide you with 400 Plus Material  Design Android Components which includes Bottom  Sheets, Bottom Navigation, Buttons Variant,  Card View, Chips, Dialog View, Expansion Panels, Grid View and 100 of others components that will definitely make your work easy and save your thousand of hours. 

If you are interested to buy this material design UI templates you can download them from our  code.itinsidenews.com  website here is a link to the app.  And one more thing we are providing a 90 percent discount for a limited time you can Buy this UI Design Templates App Source Code Just for 6$ / 500 INR. if you want to know more about this you can contact us at [email protected].

What You Will Learn In this Article?

1. In this article you will learn how to Design  Professional Material Design Registration and login Screen.

2. You will how to Customize buttons and set custom styles to a button.

3. You will Learn How to set custom styles to an edit text.

4. You will Learn How to Set Custom Founts for a Textview.

Step 1.

First of all, create an empty project in android studio select your favorite programming language Java or Kotlin, and target API version 21.  By Default Android Studio will Create the MainActivity Class and its XML file  activity_main.xml Simply Refactor your activity_main.xml  file to sign_up.xml and also create another layout file by name login_screen.xml.

Step 2. 

Copy below code and paste it in your sign_up.xml file 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
    </data>

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp">

            <TextView
                android:id="@+id/tvSignUp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp"
                android:text="Sign Up"
                android:textColor="@android:color/black"
                android:textSize="40sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tvFullName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="39dp"
                android:lineSpacingExtra="2sp"
                android:text="Full Name *"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvSignUp" />

            <EditText
                android:id="@+id/etName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@drawable/outline_black"
                android:ems="10"
                android:inputType="textCapWords"
                android:padding="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvFullName" />

            <TextView
                android:id="@+id/tvPhone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"
                android:layout_marginTop="19dp"
                android:lineSpacingExtra="2sp"
                android:text="Phone Number *"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etName" />

            <EditText
                android:id="@+id/etPhone"
                android:layout_width="0dp"
                android:visibility="gone"
                android:layout_height="wrap_content"
                android:background="@drawable/outline_black"
                android:ems="10"
                android:hint="03331234567"
                android:inputType="number"
                android:maxLength="11"
                android:padding="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvPhone" />

            <TextView
                android:id="@+id/tvEmail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:lineSpacingExtra="3sp"
                android:text="Email ID *"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etPhone" />

            <EditText
                android:id="@+id/etEmail"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@drawable/outline_black"
                android:ems="10"
                android:inputType="textEmailAddress"
                android:lineSpacingExtra="2sp"
                android:maxLength="70"
                android:padding="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvEmail" />

            <TextView
                android:id="@+id/tvPass"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:lineSpacingExtra="3sp"
                android:text="Password *"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etEmail" />

            <EditText
                android:id="@+id/etPass"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@drawable/outline_black"
                android:ems="10"
                android:inputType="textPassword"
                android:lineSpacingExtra="2sp"
                android:padding="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvPass" />

            <TextView
                android:id="@+id/tvConfirmPassword"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:lineSpacingExtra="3sp"
                android:text="Confirm Password"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:textStyle="bold"
                android:visibility="gone"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etPass" />

            <EditText
                android:id="@+id/etConfirmPassword"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@drawable/outline_black"
                android:ems="10"
                android:inputType="textPassword"
                android:lineSpacingExtra="2sp"
                android:padding="12dp"
                android:visibility="gone"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvConfirmPassword" />

            <TextView
                android:id="@+id/tvReferralLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:lineSpacingExtra="3sp"
                android:text="Referral Code"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etConfirmPassword" />

            <EditText
                android:id="@+id/etReferral"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@drawable/outline_black"
                android:ems="10"
                android:inputType="text"
                android:lineSpacingExtra="2sp"
                android:maxLength="20"
                android:padding="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvReferralLabel" />

            <TextView
                android:id="@+id/tvTnc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                android:clickable="true"
                android:text="@string/terms_condition_signup"
                android:visibility="visible"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etReferral" />

            <Button
                android:id="@+id/btnSignup"
                style="@style/ButtonMain"
                android:layout_width="match_parent"
                android:layout_height="42dp"
                android:layout_marginTop="24dp"
                android:gravity="center"
                android:text="Sign Up"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvTnc" />

            <Button
                android:id="@+id/btnLogin"
                style="@style/ButtonSecondary"
                android:layout_width="match_parent"
                android:layout_height="42dp"
                android:layout_marginTop="24dp"
                android:layout_marginBottom="28dp"
                android:gravity="center"
                android:text="Login"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/btnSignup" />

            <ProgressBar
                android:id="@+id/progressBar"
                android:visibility="gone"
                style="?android:attr/progressBarStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</layout>

As you can see in the above XML code we have converted the simple layout to a data binding layout if you don't know about data binding you can check this android official documentation link to learn more about it. 

we have used constraint layout to Design this registration screen and login screen. constraint layout efficiency is much better than others android layouts and google highly recommends designing maximum UI parts by using constraint layout. 

In this sign_up.xml file, we also set custom styles to buttons and custom drawable to Edittext so let me share with you themes.xml  file and drawable files that we used for EditText. Note if you are  using  older version of the android studio then you will put themes.xml file code in your styles.xml file  you can find styles.xml file in your res directory.

themes.xml  code


    
        <item name="android:windowBackground">@color/white</item>
        <item name="android:radioButtonStyle">@style/MyRadioButtonStyle</item>
        <item name="android:fontFamily">@font/quicksand_medium</item>
        <item name="bottomSheetDialogTheme">@style/BottomSheetDialog</item>
        <item name="buttonStyle">@style/ButtonMain</item>
        <item name="colorAccent">@color/green</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/white</item>
        <item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog</item>
    
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@drawable/bg_green_round</item>
        <item name="fontFamily">@font/quicksand_medium</item>
    
        <item name="colorAccent">@color/black</item>
        <item name="colorPrimary">@color/white</item>
    
        <item name="bottomSheetStyle">@style/BottomSheet</item>
    
        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Demo</item>
    
        <item name="cornerFamily">@null</item>
        <item name="cornerSize">8dp</item>
    
        <item name="android:button">@drawable/btn_radio</item>
    
        <item name="android:textColor">@color/green</item>
        <item name="android:background">@drawable/outline_green</item>
        <item name="fontFamily">@font/quicksand_medium</item>
    
        <item name="android:textSize">@dimen/unit_9sp</item>
        <item name="android:textColor">@color/blue</item>
        <item name="android:drawablePadding">@dimen/unit_4dp</item>
        <item name="drawableLeftCompat">@drawable/ic_prescription_required</item>
        <item name="drawableStartCompat">@drawable/ic_prescription_required</item>
        <item name="fontFamily">@font/quicksand_regular</item>

    
        <item name="colorControlNormal">@color/md_grey_500</item>
        <item name="colorControlActivated">@color/md_yellow_A700</item>

    
        <item name="android:textStyle">bold</item>
    
        <item name="colorControlNormal">@color/grey_60</item>
        <item name="colorControlActivated">@color/yellow_600</item>
        

outline_black.xml drawable code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:aapt="http://schemas.android.com/aapt">
    <stroke android:width="2dp" android:color="@android:color/black"/>
    <corners android:radius="5dp"/>
</shape>

if you have followed all the above steps that mean you have successfully created a beautiful material design sign up screen
so now let's design login_screen.xml

code for login_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp"
                android:text="Login"
                android:textColor="@android:color/black"
                android:textSize="40sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <LinearLayout
                android:id="@+id/linearLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:background="@drawable/login_top_box_bg"
                android:orientation="vertical"
                android:padding="16dp"
                android:paddingStart="24dp"
                android:paddingLeft="24dp"
                android:paddingEnd="24dp"
                android:paddingRight="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/quicksand_bold"
                    android:text="Existing IT-Inside User:"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@color/sign_in_header_txt_color" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:fontFamily="@font/quicksand_medium"
                    android:text="This Design  Is Developed By Itinsidenews.com"
                    android:textColor="@color/sign_in_header_txt_color" />
            </LinearLayout>

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Phone number"
                android:textColor="@android:color/black"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="@+id/etEmailLogin"
                app:layout_constraintTop_toBottomOf="@+id/linearLayout" />

            <EditText
                android:id="@+id/etEmailLogin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/outline_black"
                android:hint="1234567890"
                android:inputType="textEmailAddress"
                android:maxLength="70"
                android:padding="12dp"
                android:selectAllOnFocus="true"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView2" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Password"
                android:textColor="@android:color/black"
                android:textStyle="bold"
                app:layout_constraintBottom_toTopOf="@+id/etPassword"
                app:layout_constraintStart_toStartOf="@+id/etPassword" />

            <EditText
                android:id="@+id/etPassword"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:background="@drawable/outline_black"
                android:imeActionLabel="Login"
                android:imeOptions="actionDone"
                android:inputType="textPassword"
                android:padding="12dp"
                android:selectAllOnFocus="true"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etEmailLogin" />

            <Button
                android:id="@+id/tvForgotPassword"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="Forgot Password?"
                android:textAllCaps="false"
                android:textColor="@color/blue_forgot_password"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/etPassword" />

            <Button
                android:id="@+id/login"
                style="@style/ButtonMain"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="Login"
                android:textAllCaps="false"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvForgotPassword" />



            <Button
                android:id="@+id/btnSignup"
                style="@style/ButtonSecondary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="Signup With Email"
                android:textAllCaps="false"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/login" />

            <Button
                android:id="@+id/btnSignuphone"
                style="@style/ButtonSecondary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="Signup With Phone"
                android:textAllCaps="false"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/btnSignup" />


            <ProgressBar
                android:id="@+id/progressBar2"
                style="?android:attr/progressBarStyle"
                android:layout_width="wrap_content"
                android:visibility="gone"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:layout_height="wrap_content"
                />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</layout>

login_screen.xml code is almost the same as the sign_up.xml file just we have used custom fonts for some TextView so now let's talk about how to set custom fonts to a TextView in android studio.

How To Use Custom Fonts In Android Studio?

To set custom fonts in the android studio first of all we will import fonts ttf files in an android studio inside the font directory. By Default, the android studio will not create a font directory in your project so we have to create it in order to use custom fonts. 

How to Create Font Directory In android Studio?

Right Click on res Directory and then select New Resource Directory from the list a new pop up window will open where you will see an option to select Resource Type simply select font and then click ok by doing this you will see font directory inside resource directory and now you can put all your ttf fonts files inside this font directory.

How to Use Custom  Fonts in android studio?

Now I assumed that you already have created a font directory inside the res directory and added some ttf font files there so there are many ways to use custom fonts we can set the font to a single view or for all views at once by creating custom styles. so here I will just tell you how to set the font for a single view.

 


  <
TextView
            android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/quicksand_bold"
                    android:text="Existing IT-Inside User:"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@color/sign_in_header_txt_color" />

See in the above code it's very easy to set custom fonts simply use android:fontFamily attribute and set its value.  we set here quicksand_bold font and this ttf font file is already available inside our font directory 

I hope Now you understand how to use Custom fonts in the android studio if you have any queries please write them in the comment section we will be glad to help you out.

How To Download Source Code of Registration And Login Screen Design Template?

You will see the full sign-up and login screen download link at the end of this post. make sure you are already logged in to our website without login you cannot download it.

We are creating a Video Tutorial Series on Making an advanced eCommerce android app So if you want to follow it you can check out these links.

How To Create Advance E-commerce App Intro & Splash Screen Part -1

Sign up And Login System Using Firebase  Part-2

Sign In With Google In android App part-3

More Tutorials are coming in the upcoming days.

You May will Like it

Understand android activity and its launch modes

Create Beautiful Animated Splash Screen 

Custom Snakbars in android

Files ( Login Required )

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow