Android Login Design in 4 Steps

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

To Download Source Code :

From Here
 ===========================

Tutorial

  STEP 1 : Create a new project in android studio

STEP 2 : Download Files used on this project 

 

From Here

STEP 3 : Create drawable files

trans_rectangle.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#66ffffff"/>
</shape>
</item>
</selector>

rounded_white.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#f2f2f2"/>
<stroke android:width="0.1dp"
android:color="@color/colorWhite"/>
<corners android:radius="40dp"/>
</shape>
</item>
</selector>

radio_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_rb_notchecked" android:state_checked="false"/>
<item android:drawable="@drawable/ic_rb_checked" android:state_checked="true"/>
</selector>

signup_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:state_focused="false">
<shape>
<solid android:color="#29c29c"/>
<corners android:radius="8dp"/>
<stroke
android:color="#00ffc0"
android:width="0.1dp"/>

</shape>
</item>

<item android:state_pressed="true" android:state_focused="true">
<shape>
<solid android:color="#119675"/>
<corners android:radius="8dp"/>
<stroke
android:color="#00ffc0"
android:width="0.1dp"/>

</shape>
</item>
<item android:state_pressed="true" android:state_focused="false">
<shape>
<solid android:color="#119675"/>
<corners android:radius="8dp"/>
<stroke
android:color="#00ffc0"
android:width="0.1dp"/>

</shape>
</item>
</selector>

STEP 4 : Complete the main activity 

activity_main.xml

<?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>

After you finish all the steps above, you can now add more components or change the design according to your needs.

If you have any question or an improvement comment below !