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:

Android Login Page Design for beginner

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"/> <!-- pressed -->
    <item android:state_focused="true" android:drawable="@color/blue"/> <!-- focused -->
    <item android:drawable="@color/blue"/> <!-- default -->
</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.

Comments

Anonymous said…
good guidance

Popular posts from this blog

Pandas in Python - Dataframe Tutorial(With examples)

Pandas in Python for Data Analysis with Example(Step-by-Step guide)

The Ultimate guide On Jupyter Notebook[Part-2]-The Markdown