Android: Login screen design Tutorial

Innovative Login Screen Design using Android studio

 Hello , if you are looking for a simple attractive login screen design for your android application then you are in the right place !

What we are going to make in this tutorial is a professional user interface with few simple steps to achieve such result using android studio.

RESULT

 LET US BEGIN 

Download Resources files From here

STEP 1 : Create a new project in Android studio

• start by creating a new project in android studio and selecting Empty activity

STEP 2 : Set up the resources for your project 

• Download all the needed resources for this project : From here
• Copy the res folder to your project location inside main folder.
• Replace existing files if it asks you.

STEP 3 : Customize Login screen design Layout

• copy this xml layout to your activity_main.xml in your project

<?xml version="1.0" encoding="utf-8">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
tools:context=".MainActivity">

<ImageView
android:id="@+id/background"
android:src="@drawable/background"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<ImageView
android:src="@drawable/ic_logo"
android:id="@+id/logo"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="15dp"
android:scaleType="center"/>

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/logo">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:background="@drawable/trans_rectangle">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Get Started"
android:textColor="@color/colorWhite"
android:textStyle="bold"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingTop="10dp"
android:textSize="18sp"
android:layout_marginBottom="5dp"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Provide us with some information"
android:textColor="@color/colorWhite"
android:textSize="12sp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:layout_marginBottom="30dp"/>

<EditText
android:id="@+id/userEmail"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:layout_marginEnd="15dp"
android:layout_marginStart="15dp"
android:background="@drawable/rounded_white"
android:drawableLeft="@drawable/ic_user"
android:drawablePadding="5dp"
android:hint="Email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingLeft="10dp"
android:textSize="14dp" />

<EditText
android:id="@+id/userPass"
android:layout_width="match_parent"
android:hint="Password"
android:background="@drawable/rounded_white"
android:layout_marginEnd="15dp"
android:layout_marginStart="15dp"
android:drawableLeft="@drawable/ic_pass"
android:paddingLeft="10dp"
android:inputType="textPassword"
android:textSize="14dp"
android:drawablePadding="5dp"
android:layout_marginBottom="10dp"
android:layout_height="40dp" />

<EditText
android:id="@+id/userConfirmpass"
android:layout_width="match_parent"
android:hint="Confirm Password"
android:background="@drawable/rounded_white"
android:layout_marginEnd="15dp"
android:layout_marginStart="15dp"
android:drawableLeft="@drawable/ic_confirm"
android:paddingLeft="10dp"
android:inputType="textPassword"
android:textSize="14dp"
android:drawablePadding="5dp"
android:layout_marginBottom="10dp"
android:layout_height="40dp" />

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I agree to the Terms and Conditions"
android:textSize="11sp"
android:layout_gravity="center"
android:textColor="@color/colorWhite"
android:button="@drawable/radio_button"
android:paddingLeft="5dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="50dp"
android:textColor="@color/colorWhite"
android:textStyle="normal"
android:background="@drawable/signup_button"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_marginBottom="16dp"
android:text="Sign up"/>

</LinearLayout>

</ScrollView>
</RelativeLayout>

• now you can change colors or icons and adding more components according to your needs and your taste , do as you like.

STEP 4 : From Design to Coding

• when you reach this step then you have finished making the login screen design , congratulations 💪

  • from here you can start writing your java code in your main activity for example
    
    
    • controlling the inputs (email,password,confirm password)
    
    
    • adding click listener for SIGN UP button
    • etc ...

Finally

• this was a simple but professional tutorial on making a login screen design in android studio, if you have any suggestions on how to improve this tutorial or ideas for future tutorials leave a feedback in the comments below !

  
  

  Happy Programming 📳💻😋.

  

Technology Library