Design a Beautiful Login Screen for your Android App

I was creating Blog reader app for our blog so decided to share how to create it.In this tutorial we are going to learn how to design the Login Page for your application.

So lets begin the designing part of login screen

what we are designing:

Let’s start by creating a new project..

Starting new Project

1. Create a new project in Eclipse from File ⇒ New ⇒ Android Application Project. I had left my main activity name as MainActivity.java and gave the package name as com.example.login

2.Now we need to create a layout for login screen. Under res/layouts create a new xml file and name it as activity_main.xml
( Right Click on res/layout ⇒ New ⇒ Android XML File)

3. In activity_main.xml type following code

<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"
tools:context=".MainActivity" >
LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="@drawable/bg1
android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="log in"
            android:gravity="center"
            android:textColor="#ffffff"
            android:layout_marginTop="20dp"
            android:textStyle="bold"
            android:layout_marginBottom="20dp"
            android:textAppearance="?android:attr/textAppearanceLarge" />

<View                                      //define the line below the Login text similar to<hr>
   android:layout_width="fill_parent"
   android:layout_height="2dp"
   android:layout_marginBottom="10dp"
   android:background="#C0C0C0"/>

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:text="AndroidGreeve"
            android:textAlignment="center"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#A2F368"
            android:textSize="25sp"
            android:typeface="serif" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Email Address"
            android:layout_marginRight="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="20dp"
            android:textColor="#fff"
            android:textSize="20dp"
            android:inputType="textEmailAddress" >
            <requestFocus />
        </EditText>

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Password"
            android:layout_marginRight="15dp"
            android:layout_marginLeft="15dp"
             android:textColor="#fff"
             android:textSize="20dp"
            android:inputType="textPassword" />

        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@drawable/edittext_bg"
             android:layout_marginTop="20dp"
             android:layout_marginRight="15dp"
            android:layout_marginLeft="15dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:text="Button" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:gravity="center"
            android:text="Forget your password?"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </LinearLayout>
    <TextView
            android:id="@+id/textView3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="AndroidGreeve .in "
            android:textColor="#ffffff"
            android:gravity="center"
            android:layout_gravity="bottom"
            android:textStyle="bold"
            android:layout_alignParentBottom="true"
            android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

4.Next to change the background color of button.Create a file names loginbutton_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/red"/> 
    <item android:state_focused="true" android:drawable="@color/blue"/> 
    <item android:drawable="@color/blue"/> 
</selector>

5.To import color to the button we include the color code in color.xml file.

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

     <color name="bluee">#60CEFD</color>
     <color name="blue">#00f</color>
     <color name="red">#f00</color>

</resources>

6.Click on Run as--> Android application

o/p

If you like this post just share and subscribe to our Site.

In next Part "how to design registation form and some working of login."

Note:
Hello Myfriends,
We are deciding to Share a Ebook " how to create app in days " containing tricks and 2 complete making of apps from scratch . This Ebook will be given only to 10 lucky subscribers(chosen from random ) of our site.
Since subscription is free ,
so just subscribe if you are lucky you will win this as a Gift for New Year T&c applied.