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.
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
Files ( Login Required )
What's Your Reaction?
