Create a Stylish Android Login Screen

How to create a stylish Android Login Screen

Hi guys!!! Today let's create an Android login screen that looks stylish.

This is the design we are going to create for the login screen.

                                                         image source: Unsplash

Ignore the facebook log in button. I will share a separate post on how to add login with facebook in another tutorial.

Ok let's dive into the coding part:


Firstly, let's see the code to get that rectangle box. Here is the code:
put this code in res/drawable folder

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle" >
	<stroke
	android:width="2dp"
	android:color="#cdcdcd" />
	<corners android:radius="10dp"/>
	<padding android:bottom="4dp"
	android:left="6dp"
	android:right="6dp"
	android:top="4dp"/>
	</shape>

view raw gistfile1.txt hosted with ❤ by GitHub

Take shape as a rectangle and add a stroke of 2 dp, corner radius as 10 dp, padding-bottom, left, right, top as 4dp,6dp,6dp,4dp respectively.

Android Login Screen Code in XML:

Linear Layout is the parent layout with the orientation vertical and inside there are children like card views, relative layouts, etc. Here is the code for the textviews that are on the top of the screen.

	<android.support.v7.widget.CardView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:cardBackgroundColor="#bede8472"
	app:cardCornerRadius="10dp">
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	<TextView
	android:id="@+id/textView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentStart="true"
	android:layout_alignParentTop="true"
	android:layout_marginStart="30dp"
	android:layout_marginTop="24dp"
	android:fontFamily="@font/eb_garamond"
	android:text="Roll Camera. . . ."
	android:textColor="#fff"
	android:textSize="30sp" />
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@+id/textView"
	android:layout_centerHorizontal="true"
	android:fontFamily="@font/eb_garamond"
	android:text="Action. . . . "
	android:textColor="#fff"
	android:textSize="40sp" />
	</RelativeLayout>
	</android.support.v7.widget.CardView>

view raw gistfile1.txt hosted with ❤ by GitHub

Down to that, I have one relative layout and a card view in it. Use the drawable file that we created above as background for the relative layout. Inside the card view again I have a relative layout which consists of an Edit Text, image, and view to show the white line that separates the image from edit Text.

	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_marginTop="40dp"
	android:layout_height="wrap_content">
	<android.support.v7.widget.CardView
	android:layout_width="wrap_content"
	android:layout_centerHorizontal="true"
	android:id="@+id/usernamecard"
	app:cardCornerRadius="10dp"
	app:cardBackgroundColor="@android:color/transparent"
	android:layout_height="wrap_content">
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/background">
	<ImageView
	android:layout_width="wrap_content"
	android:layout_height="40dp"
	android:id="@+id/loginpersonimage"
	android:layout_centerVertical="true"
	android:src="@drawable/loginperson"/>
	<View
	android:layout_width="2dp"
	android:layout_height="40dp"
	android:background="@android:color/white"
	android:layout_toRightOf="@+id/loginpersonimage"/>
	<EditText
	android:id="@+id/username"
	android:layout_toRightOf="@+id/loginpersonimage"
	android:layout_width="260dp"
	android:layout_height="40dp"
	android:layout_marginLeft="10dp"
	android:layout_centerVertical="true"
	android:layout_alignParentTop="true"
	android:layout_centerHorizontal="true"
	android:background="#11000000"
	android:hint="Username"
	android:textColorHint="#e3e3e3" />
	</RelativeLayout>
	</android.support.v7.widget.CardView>
	<android.support.v7.widget.CardView
	android:layout_width="wrap_content"
	android:layout_centerHorizontal="true"
	android:layout_below="@+id/usernamecard"
	android:id="@+id/passwordcard"
	app:cardCornerRadius="10dp"
	android:layout_marginTop="@dimen/fab_margin"
	app:cardBackgroundColor="@android:color/transparent"
	android:layout_height="wrap_content">
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/background">
	<ImageView
	android:layout_width="wrap_content"
	android:layout_height="40dp"
	android:id="@+id/loginpasswordimage"
	android:layout_centerVertical="true"
	android:src="@drawable/ic_action_lock"/>
	<View
	android:layout_width="2dp"
	android:layout_height="40dp"
	android:background="@android:color/white"
	android:layout_toRightOf="@+id/loginpasswordimage"/>
	<EditText
	android:id="@+id/password"
	android:layout_toRightOf="@+id/loginpasswordimage"
	android:layout_width="260dp"
	android:layout_height="40dp"
	android:layout_marginLeft="10dp"
	android:textColor="#fff"
	android:layout_centerVertical="true"
	android:layout_alignParentTop="true"
	android:layout_centerHorizontal="true"
	android:background="#11000000"
	android:hint="Password"
	android:inputType="textPassword"
	android:textColorHint="#e3e3e3" />
	</RelativeLayout>
	</android.support.v7.widget.CardView>

view raw gistfile1.txt hosted with ❤ by GitHub

This is for button down to the Edit Texts. Instead of a button, I used TextView. If you want to use Button instead you can even use that.

	<android.support.v7.widget.CardView
	android:layout_width="300dp"
	android:id="@+id/card"
	android:layout_below="@+id/passwordcard"
	app:cardCornerRadius="20dp"
	android:elevation="10dp"
	android:layout_centerHorizontal="true"
	app:cardBackgroundColor="#b376dbef"
	android:layout_marginTop="20dp"
	android:layout_height="wrap_content">
	<TextView
	android:layout_width="125dp"
	android:layout_height="50dp"
	android:text="Login"
	android:id="@+id/logintext"
	android:textColor="#fff"
	android:textStyle="bold"
	android:layout_gravity="center_horizontal"
	android:textSize="16sp"
	android:gravity="center_horizontal|center_vertical"/>
	</android.support.v7.widget.CardView>

view raw gistfile1.txt hosted with ❤ by GitHub

For remaining textviews:

	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="New User?Register"
	android:textSize="16sp"
	android:textStyle="bold"
	android:textColor="#fff"
	android:layout_below="@+id/card"
	android:id="@+id/registerbutton"
	android:layout_centerHorizontal="true"/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textStyle="bold"
	android:text="Forgot Password?"
	android:textSize="14sp"
	android:id="@+id/forgotpassword"
	android:layout_below="@+id/registerbutton"
	android:layout_centerHorizontal="true"
	android:textColor="#fff"/>

view raw gistfile1.txt hosted with ❤ by GitHub

Here is the entire android login screen design source code:


Note: Do not forget the image that is showing in the background, I added it as the background for the parent/root layout i.e Linear layout.

Happy coding!!!

	<android.support.v7.widget.CardView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:cardBackgroundColor="#bede8472"
	app:cardCornerRadius="10dp">
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	<TextView
	android:id="@+id/textView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentStart="true"
	android:layout_alignParentTop="true"
	android:layout_marginStart="30dp"
	android:layout_marginTop="24dp"
	android:fontFamily="@font/eb_garamond"
	android:text="Roll Camera. . . ."
	android:textColor="#fff"
	android:textSize="30sp" />
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@+id/textView"
	android:layout_centerHorizontal="true"
	android:fontFamily="@font/eb_garamond"
	android:text="Action. . . . "
	android:textColor="#fff"
	android:textSize="40sp" />
	</RelativeLayout>
	</android.support.v7.widget.CardView>
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_marginTop="40dp"
	android:layout_height="wrap_content">
	<android.support.v7.widget.CardView
	android:layout_width="wrap_content"
	android:layout_centerHorizontal="true"
	android:id="@+id/usernamecard"
	app:cardCornerRadius="10dp"
	app:cardBackgroundColor="@android:color/transparent"
	android:layout_height="wrap_content">
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/background">
	<ImageView
	android:layout_width="wrap_content"
	android:layout_height="40dp"
	android:id="@+id/loginpersonimage"
	android:layout_centerVertical="true"
	android:src="@drawable/loginperson"/>
	<View
	android:layout_width="2dp"
	android:layout_height="40dp"
	android:background="@android:color/white"
	android:layout_toRightOf="@+id/loginpersonimage"/>
	<EditText
	android:id="@+id/username"
	android:layout_toRightOf="@+id/loginpersonimage"
	android:layout_width="260dp"
	android:layout_height="40dp"
	android:layout_marginLeft="10dp"
	android:layout_centerVertical="true"
	android:layout_alignParentTop="true"
	android:layout_centerHorizontal="true"
	android:background="#11000000"
	android:hint="Username"
	android:textColorHint="#e3e3e3" />
	</RelativeLayout>
	</android.support.v7.widget.CardView>
	<android.support.v7.widget.CardView
	android:layout_width="wrap_content"
	android:layout_centerHorizontal="true"
	android:layout_below="@+id/usernamecard"
	android:id="@+id/passwordcard"
	app:cardCornerRadius="10dp"
	android:layout_marginTop="@dimen/fab_margin"
	app:cardBackgroundColor="@android:color/transparent"
	android:layout_height="wrap_content">
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/background">
	<ImageView
	android:layout_width="wrap_content"
	android:layout_height="40dp"
	android:id="@+id/loginpasswordimage"
	android:layout_centerVertical="true"
	android:src="@drawable/ic_action_lock"/>
	<View
	android:layout_width="2dp"
	android:layout_height="40dp"
	android:background="@android:color/white"
	android:layout_toRightOf="@+id/loginpasswordimage"/>
	<EditText
	android:id="@+id/password"
	android:layout_toRightOf="@+id/loginpasswordimage"
	android:layout_width="260dp"
	android:layout_height="40dp"
	android:layout_marginLeft="10dp"
	android:textColor="#fff"
	android:layout_centerVertical="true"
	android:layout_alignParentTop="true"
	android:layout_centerHorizontal="true"
	android:background="#11000000"
	android:hint="Password"
	android:inputType="textPassword"
	android:textColorHint="#e3e3e3" />
	</RelativeLayout>
	</android.support.v7.widget.CardView>
	<android.support.v7.widget.CardView
	android:layout_width="300dp"
	android:id="@+id/card"
	android:layout_below="@+id/passwordcard"
	app:cardCornerRadius="20dp"
	android:elevation="10dp"
	android:layout_centerHorizontal="true"
	app:cardBackgroundColor="#b376dbef"
	android:layout_marginTop="20dp"
	android:layout_height="wrap_content">
	<TextView
	android:layout_width="125dp"
	android:layout_height="50dp"
	android:text="Login"
	android:id="@+id/logintext"
	android:textColor="#fff"
	android:textStyle="bold"
	android:layout_gravity="center_horizontal"
	android:textSize="16sp"
	android:gravity="center_horizontal|center_vertical"/>
	</android.support.v7.widget.CardView>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="New User?Register"
	android:textSize="16sp"
	android:textStyle="bold"
	android:textColor="#fff"
	android:layout_below="@+id/card"
	android:id="@+id/registerbutton"
	android:layout_centerHorizontal="true"/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textStyle="bold"
	android:text="Forgot Password?"
	android:textSize="14sp"
	android:id="@+id/forgotpassword"
	android:layout_below="@+id/registerbutton"
	android:layout_centerHorizontal="true"
	android:textColor="#fff"/>
	<com.facebook.login.widget.LoginButton
	android:id="@+id/login_button"
	android:layout_below="@+id/forgotpassword"
	android:layout_width="wrap_content"
	android:layout_centerHorizontal="true"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginTop="30dp"
	android:layout_marginBottom="30dp" />
	</RelativeLayout>

view raw gistfile1.txt hosted with ❤ by GitHub

Read my another blog post about Android game here
Follow @justdurgahere