Android Login Page Screen Design

Almost all android application will have login or registration process in order to authenticate a user. In this article i will be demonstrating how to design android login screen design (note that it just designing the screens – no database connection or user validation).

1) Preview of login page

 

2) activity_main.xml

This is the code of design login page.

<?xml version=”1.0″ encoding=”utf-8″?>
<ScrollView xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”fill_parent”
android:fillViewport=”true” >

<RelativeLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”#fff”>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:padding=”10dip”
android:weightSum=”1″>

<!– put logo here –>

<ImageView
android:id=”@+id/imageView1″
android:layout_width=”match_parent”
android:layout_height=”50dp”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_weight=”.3″
android:layout_marginTop=”10dp”
android:src=”@drawable/js_logo” />

<EditText
android:id=”@+id/email”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginBottom=”30dp”
android:layout_marginTop=”30dp”
android:background=”#f7f7f7″
android:ems=”10″
android:hint=”Username”
android:inputType=”textEmailAddress”
android:padding=”10dp”
android:singleLine=”true”
android:textColorHint=”#777777″
android:textColor=”#b00a15″
android:textSize=”15sp”
android:drawableLeft=”@drawable/user”>
</EditText>

<EditText
android:id=”@+id/password”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginBottom=”30dp”
android:layout_marginTop=”5dip”
android:background=”#f7f7f7″
android:hint=”Password”
android:inputType=”textPassword”
android:padding=”10dp”
android:singleLine=”true”
android:textColor=”#be070b”
android:textColorHint=”#777777″
android:drawableLeft=”@drawable/pass”
android:textSize=”15sp” />

<!– Login button –>

<Button
android:id=”@+id/btnLogin”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”10dip”
android:layout_marginLeft=”60dp”
android:layout_marginRight=”60dp”
android:background=”@drawable/selector”
android:text=”Login Here”
android:textColor=”#fff”
android:textStyle=”bold” />

<!– Link to Registration Screen –>

<TextView
android:id=”@+id/link_to_register”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:layout_marginTop=”30dp”
android:gravity=”center”
android:text=”New ? Register here”
android:textColor=”#b00a15″
android:textSize=”20dip”
/>

</LinearLayout>
</RelativeLayout>
</ScrollView>