Android

Android Login Layout – Beautifully Design

Android Login Layout Design
Written by Yasir Ameen

In this article i am going to create a beautifully design Android Login Layout with some of the design concept of android, i also implement custom design concept to the buttons so its look eye catching.

 

Step 1.  choose a good wallpaper for your layout which best suits your concept and using Photoshop, approximately crop it to vertical rectangle.

 

Here is the first design code, nothing but a saved picture in drawable folder.

<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"
    android:background="@drawable/abc">

</RelativeLayout>

output of the above code is here, but the picture is so bright, so we have to make it some transparent dark so all the views place on this picture may easily visible.

w_view

 

 

 

 

 

 

 

 

In order to achieve goal describe above, we will create a view whose color will be black and android:aplha property will be set to 0.5, here is the code and output.


<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"
    android:background="@drawable/abc">

    <View
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:alpha="0.5"
        android:layout_alignParentTop="true" />

</RelativeLayout>

view_back

 

 

 

 

 

 

 

 

Step 2. that’s good, now we are going to use TextView and EditText Objects for displaying “Login Text” and username and password field, i have downloaded suitable icons and saved it to drawable folder, see the code and output.


<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"
    android:background="@drawable/abc">

    <View
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:alpha="0.5"
        android:layout_alignParentTop="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="LOGIN"
        android:textSize="70sp"
        android:id="@+id/textView"
        android:textColor="#FFFFFF"
        android:layout_marginTop="65dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="TO"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:id="@+id/textView2"
        android:layout_marginTop="72dp"
        android:layout_alignTop="@+id/textView"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wraphttp://yasirameen.com/wp-admin/post.php?post=121&action=edit_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="YOUR ACCOUNT"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        android:id="@+id/textView3"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:id="@+id/editText"
        android:drawableLeft="@drawable/ic_account"
        android:hint="  Enter User Name"
        android:textColorHint="#999999"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="47dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:hint=" Enter User Passwrod"
        android:drawableLeft="@drawable/ic_secure_key"
        android:textSize="20sp"
        android:textColorHint="#999999"
        android:textColor="#FFFFFF"
        android:id="@+id/editText2"
        android:layout_below="@+id/editText"
        android:layout_alignLeft="@+id/editText"
        android:layout_alignStart="@+id/editText"
        android:layout_alignRight="@+id/editText"
        android:layout_alignEnd="@+id/editText" />

</RelativeLayout>

 

text_login

 

 

 

 

 

 

 

 

Step 3. Now let’s create a button for this layout, which quite time taken above all things. Our button will look like below image, keep in mind this is not a default style of button provided by the android framework, so we have to make it our own style.

button

Follow these steps for creating custom design button.

1. Create a dimen.xml file in res=> values folder and paste the following.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="corner_radius">0dp</dimen>
    <dimen name="layer_padding">3dp</dimen>
</resources>

 

2. Create a colors.xml file in res=> values folder and paste the following code.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red_pressed">#DD4B39</color>
    <color name="red_normal">#B64032</color>

    <color name="blue_pressed">#5A76B1</color>
    <color name="blue_normal">#516590</color>

</resources>

 

Note :  In this login design we have two button of different colors

  • One is blue Sign in
  • 2nd is Sign in With Google

3. Create a blue_btn_drawable.xml blue_btn_rectangle_drawable_normal.xml and blue_btn_rectangle_drawable_pressed.xml file respective  in drawable folder and paste the following code one by one.

blue_btn_drawable.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="@drawable/blue_btn_rectangle_drawable_pressed"/>
    <item android:drawable="@drawable/blue_btn_rectangle_drawable_normal"/>
</selector>

blue_btn_rectangle_drawable_normal.xml

 


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/blue_btn_rectangle_drawable_pressed" />

    <item android:bottom="@dimen/layer_padding">
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/corner_radius" />
            <solid android:color="@color/blue_normal" />
        </shape>
    </item>
</layer-list>

blue_btn_rectangle_drawable_pressed.xml

 

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/corner_radius" />
    <solid android:color="@color/blue_pressed" />
</shape>

Step 4. Now drag a simple button on layout and add a “android:background=”@drawable/blue_btn_drawable”
property in button xml, you will see that your button will change to the mine, see the code and outpu.


<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/blue_btn_drawable"
    android:textColor="@android:color/white"
    android:text="SIGN IN"
    android:textSize="20sp"
    android:id="@+id/button3"
    android:layout_below="@+id/editText2"
    android:layout_marginTop="6dp"
    android:layout_alignLeft="@+id/editText2"
    android:layout_alignStart="@+id/editText2"
    android:layout_alignRight="@+id/editText2"
    android:layout_alignEnd="@+id/editText2" />

your button should look like this.

sign_in

 

 

Step 5. Do the same for the Sign In With Google button.

 

google_btn_drawable.xml
<pre><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/google_btn_rectangle_drawable_pressed"/>
    <item android:drawable="@drawable/google_btn_rectangle_drawable_normal"/>
</selector>
google_btn_rectangle_drawable_normal.xml

 

<pre><?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/google_btn_rectangle_drawable_pressed" />

    <item android:bottom="@dimen/layer_padding">
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/corner_radius" />
            <solid android:color="@color/red_normal" />
        </shape>
    </item>
</layer-list>
google_btn_rectangle_drawable_pressed.xml

 


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/corner_radius" />
    <solid android:color="@color/red_pressed" />
</shape>

Again drag a button and do the same as define in step 4, you will see the button will look
like this.

gmail

Step 5. Last thing we need is, a Gmail Icon button which is place left to the SIGN IN WITH GOOGLE BUTTON. I simply drag a button and drop it to the left of the sign in with google button. here is the code and the result.


<Button
    android:layout_width="62dp"
    android:layout_height="wrap_content"
    android:background="@drawable/google_btn_drawable"
    android:textColor="@android:color/white"
    android:drawableLeft="@drawable/google_logo"
    android:id="@+id/button2"
    android:layout_alignTop="@+id/button"
    android:paddingLeft="15dp"
    android:layout_alignLeft="@+id/button3"
    android:layout_alignStart="@+id/button3" />

button_with_gmailNow add another TextView onto the layout, which will be for displaying text to the bottom, here is the code.


<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="Android | Lollipop | Material | Yasir | Ameen | Login | Design | Activity | Blog | Facebook | Google | Kitkat | Marshmallow | Google"
    android:textColor="#FFFFFF"
    android:alpha="0.6"
    android:id="@+id/textView4"
    android:gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="41dp"
    android:layout_alignRight="@+id/button3"
    android:layout_alignEnd="@+id/button3"
    android:layout_alignLeft="@+id/button3"
    android:layout_alignStart="@+id/button3" />

 

result of the above code is here.

text

That’s good you have completed all the task, now here is the complete code.

COMPLETE CODE..

activity_main.xml
<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"
    android:background="@drawable/abc">

    <View
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:alpha="0.5"
        android:layout_alignParentTop="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="LOGIN"
        android:textSize="70sp"
        android:id="@+id/textView"
        android:textColor="#FFFFFF"
        android:layout_marginTop="65dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="TO"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:id="@+id/textView2"
        android:layout_marginTop="72dp"
        android:layout_alignTop="@+id/textView"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="YOUR ACCOUNT"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        android:id="@+id/textView3"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:id="@+id/editText"
        android:drawableLeft="@drawable/ic_account"
        android:hint="  Enter User Name"
        android:textColorHint="#999999"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="47dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:hint=" Enter User Passwrod"
        android:drawableLeft="@drawable/ic_secure_key"
        android:textSize="20sp"
        android:textColorHint="#999999"
        android:textColor="#FFFFFF"
        android:id="@+id/editText2"
        android:layout_below="@+id/editText"
        android:layout_alignLeft="@+id/editText"
        android:layout_alignStart="@+id/editText"
        android:layout_alignRight="@+id/editText"
        android:layout_alignEnd="@+id/editText" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/blue_btn_drawable"
        android:textColor="@android:color/white"
        android:text="SIGN IN"
        android:textSize="20sp"
        android:id="@+id/button3"
        android:layout_below="@+id/editText2"
        android:layout_marginTop="6dp"
        android:layout_alignLeft="@+id/editText2"
        android:layout_alignStart="@+id/editText2"
        android:layout_alignRight="@+id/editText2"
        android:layout_alignEnd="@+id/editText2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Android | Lollipop | Material | Yasir | Ameen | Login | Design | Activity | Blog | Facebook | Google | Kitkat | Marshmallow | Google"
        android:textColor="#FFFFFF"
        android:alpha="0.6"
        android:id="@+id/textView4"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="41dp"
        android:layout_alignRight="@+id/button3"
        android:layout_alignEnd="@+id/button3"
        android:layout_alignLeft="@+id/button3"
        android:layout_alignStart="@+id/button3" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/google_btn_drawable"
        android:textColor="@android:color/white"
        android:text="SIGN IN WITH GOOGLE"
        android:id="@+id/button"
        android:textSize="20sp"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="1dp"
        android:layout_marginStart="1dp"
        android:layout_below="@+id/button3"
        android:layout_toRightOf="@+id/button2"
        android:layout_alignRight="@+id/button3"
        android:layout_alignEnd="@+id/button3" />

    <Button
        android:layout_width="62dp"
        android:layout_height="wrap_content"
        android:background="@drawable/google_btn_drawable"
        android:textColor="@android:color/white"
        android:drawableLeft="@drawable/google_logo"
        android:id="@+id/button2"
        android:layout_alignTop="@+id/button"
        android:paddingLeft="15dp"
        android:layout_alignLeft="@+id/button3"
        android:layout_alignStart="@+id/button3" />

</RelativeLayout>

Final Result.

layout-2015-11-07-003616


	

About the author

Yasir Ameen

I'm a programmer, teacher, and speaker. I work out of my home in Pakistan, Karachi for the Mobile, especially Android Platform. I discuss about technology, gadgets, codes, the devices we’re going and we’ve been. I’m excited about community, social equity, and media.

6 Comments

Leave a Comment